Auto-hide the navigation bar

[loicparent]

Hello,

Thanks for this plugin :)

I wonder if this is possible to hide automatically the navigation bar after showing it manually.

For example, I manually hide the navigation bar at the opening of the application on my phone (Samsung Galaxy A51) but, I can show it again without any code by swiping from bottom to top.

So the navigation bar is visible again but this event is not detected by the listener and so, I can't detect when the appBar is visible or hide.

It would be nice to have a way …

1. to get the status of the navigation bar visibility (visible | hidden) (something like : NavigationBar.getVisibilityStatus())
2. to detect the manual show event of the device
3. to activate an auto-hide option with a delay (something like NavigationBar.autoHide({hideAfter: 3000}))

Thanks for your help,
Loïc

[fromage9747]

@loicparent use settimeout and then run NavigationBar.hide()

[loicparent]

Hello @fromage9747,

Thanks for your reply :)

Yes, this is what I wanted to do but due to the fact that the user can show this navigation bar manually (without any event detection), I need to detect the trigger to start the timeout.

[fromage9747]

@loicparent I see what you mean. You are experiencing exactly what I have discovered.

In the readme it says that there is an eventListener which I have implemented like so:

NavigationBar.addListener(NavigationBarPluginEvents.SHOW, async () => {
        console.log('🚨 Navigation Bar has been shown');
        setTimeout(async () => {
          await NavigationBar.hide();
        }, 2000);
      })

Unfortunately, it never triggers. And as soon as I touch the screen, the status bar and navigation bar are shown.

I suspect that you are experiencing the exact same issue.

Capacitor has: https://capacitorjs.com/docs/apis/status-bar

window.addEventListener('statusTap', async () => {
        console.log('🚨 statusbar tapped');
        await StatusBar.show();
      });

Which also does not trigger! Not sure what is going on....

[fromage9747]

@loicparent Found a native way of doing it and it works as expected.

Remove anything you have to do with this plugin and the Capacitor StatusBar plugin.

Add the below to your MainAcivitiy.java modify as you need to make it work.

@Override
  public void onCreate(Bundle savedInstanceState) {
    registerPlugin(CapacitorMusicControls.class);
    super.onCreate(savedInstanceState);
    View decorView = getWindow().getDecorView();
    final int opts =
      View.SYSTEM_UI_FLAG_LAYOUT_STABLE |
        View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION |
        View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN |
        View.SYSTEM_UI_FLAG_HIDE_NAVIGATION |
        View.SYSTEM_UI_FLAG_FULLSCREEN |
        View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY;

    decorView.setOnFocusChangeListener(new View.OnFocusChangeListener() {
      @Override
      public  void onFocusChange(View v, boolean hasFocus) {
        if (hasFocus) {
          decorView.setSystemUiVisibility(opts);
        }
      }
    });

    ((View) decorView).setOnSystemUiVisibilityChangeListener(new View.OnSystemUiVisibilityChangeListener() {
      @Override
      public void onSystemUiVisibilityChange(int visibility) {
        decorView.setSystemUiVisibility(opts);
      }
    });
  }

Taken from here https://forum.ionicframework.com/t/android-status-bar-shown-on-touch/206260

Peace!
🦙

[loicparent]

Hello @fromage9747,

Thanks again for your help :)

Unfortunately, it seems to doesn't work on my side.
Also, I prefer having the total control on the status bar and the navigation bar using the capacitor plugins.

@hugotomazi, do you think these features could be added to have a listener that detect the native show of the navigation bar?

Have a nice day,
Loïc

[fcontrerasz]

hi ! some solution?. the listener "show" not works. thks