Home

Awesome

@capgo/home-indicator

<a href="https://capgo.app/"><img src='https://raw.githubusercontent.com/Cap-go/capgo/main/assets/capgo_banner.png' alt='Capgo - Instant updates for capacitor'/></a>

<div align="center"> <h2><a href="https://capgo.app/?ref=plugin"> ➡️ Get Instant updates for your App with Capgo 🚀</a></h2> <h2><a href="https://capgo.app/consulting/?ref=plugin"> Fix your annoying bug now, Hire a Capacitor expert 💪</a></h2> </div>

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 android.os.Handler;
import android.view.WindowInsets;

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>

Install

npm install @capgo/home-indicator
npx cap sync

API

<docgen-index> </docgen-index> <docgen-api> <!--Update the source file JSDoc comments and rerun docgen to update the docs below-->

hide()

hide() => Promise<void>

Hide the home indicator.

Since: 0.0.1


show()

show() => Promise<void>

Show the home indicator.

Since: 0.0.1


isHidden()

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

Get the home indicator status.

Returns: <code>Promise<{ hidden: boolean; }></code>

Since: 0.0.1


getPluginVersion()

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

Get the native Capacitor plugin version

Returns: <code>Promise<{ version: string; }></code>


</docgen-api>

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