hide and show home button indicator in Capacitor app

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>

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

npm install @capgo/home-indicator
npx cap sync

• 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() => 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() => 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() => 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() => Promise<{ version: string; }>

Get the native Capacitor plugin version.

Returns: Promise<{ version: string; }>

Since: 0.0.1

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);

This plugin was created originally for Kick.com by Capgo