@capgo/home-indicator

hide and show home button indicator in Capacitor app

Android

To be able to hide the home indicator on Android, you need to update your MainActivity.java file to add the following code:

// ...

import android.os.Build;
import android.os.Bundle;

import com.getcapacitor.BridgeActivity;

public class MainActivity extends BridgeActivity {


    void fixSafeArea() {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.R) {
            getWindow().setDecorFitsSystemWindows(false);
        }
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        fixSafeArea();
    }
    // on resume
    @Override
    public void onResume() {
        super.onResume();
        fixSafeArea();
    }

    // on pause
    @Override
    public void onPause() {
        super.onPause();
        fixSafeArea();
    }
}

And the update styles.xml to add the following code:

        <item name="android:statusBarColor">
            @android:color/transparent
        </item>

Documentation

The most complete doc is available here: https://capgo.app/docs/plugins/home-indicator/

Install

npm install @capgo/home-indicator
npx cap sync

API

• hide()
• show()
• isHidden()
• getPluginVersion()

Capacitor Home Indicator Plugin for controlling the iOS home indicator visibility. The home indicator is the horizontal bar at the bottom of iOS devices without a physical home button.

hide()

hide() => Promise<void>

Hide the home indicator at the bottom of the screen.

This visually hides the iOS home indicator bar, providing a more immersive full-screen experience. Users can still swipe up to access home, but the indicator will not be visible until they start the gesture.

iOS only. Has no effect on Android or web.

Since: 0.0.1

show()

show() => Promise<void>

Show the home indicator at the bottom of the screen.

This restores the default iOS home indicator visibility, making it always visible to the user. This is the default behavior.

iOS only. Has no effect on Android or web.

Since: 0.0.1

isHidden()

isHidden() => Promise<{ hidden: boolean; }>

Check whether the home indicator is currently hidden.

Returns the current visibility state of the iOS home indicator.

Returns: Promise<{ hidden: boolean; }>

Since: 0.0.1

getPluginVersion()

getPluginVersion() => Promise<{ version: string; }>

Get the native Capacitor plugin version.

Returns: Promise<{ version: string; }>

Since: 0.0.1

CSS Variables

You can use --safe-area-inset-bottom to make sure your content is not hidden by the home indicator This variable is injected by the plugin for android. It's useful if you set real fullscreen mode on android. with :

getWindow().setDecorFitsSystemWindows(false);

Credits

This plugin was created originally for Kick.com by Capgo