Statusbar doesn't hide automatically after showing by user interaction on android

[Seungwoo-Yu]

Bug Report

Plugin(s)

"@capacitor/android": "2.4.2" "@capacitor/core": "2.4.2"

Capacitor Version

Latest Dependencies:

@capacitor/cli: 2.4.2 @capacitor/core: 2.4.2 @capacitor/android: 2.4.2 @capacitor/electron: 2.4.2 @capacitor/ios: 2.4.2

Installed Dependencies:

@capacitor/android 2.4.2 @capacitor/cli 2.4.2 @capacitor/ios not installed @capacitor/core 2.4.2 @capacitor/electron not installed

Platform(s)

Android 9 (SM-G955N)

Current Behavior

Status bar, was hidden in component initialization doesn't hide automatically after status bar was popped out by user interaction while android native apps do the job.

Expected Behavior

Status bar has to hide in few seconds as soon as there are no user interactions

Code Reproduction

https://github.com/Seungwoo-Yu/ionic-capacitor-status-bar-reproduction

Other Technical Details

WebStorm 2020.2.3, Windows 10 Pro version 2004

Additional Context

This video may help to understand what is going on https://github.com/Seungwoo-Yu/ionic-capacitor-status-bar-reproduction/blob/master/status-bar-reproduction.mp4

In my opinion, There are two ways to fix this bug; supporting auto hide option for StatusBar.hide() and adding two events to let us know when user starts to interact with status bar and user stops doing it.

At this time, this code fixes this issue but it is not even good one and may vulnerable at performance

const subscription = interval(1000).subscribe(async () => {
      const info = await StatusBar.getInfo();
      if (info.visible) { await StatusBar.hide(); }
    });

[lincolnthree]

Agreed, this is a problem we also need to solve without polling / using additional resources.

[apbarratt]

Hi guys,

I don't suppose there's been any more investigation into this? I often create rapid prototypes to be used in film and TV and so having unwanted OS artifacts like this flashing up can be rather frustrating.

I had one today that came up every time anyone tapped an input field on a cheap Alcatel phone. Switching to a Samsung phone did the trick to avoid the issue but as Samsung phones are easily recognisable, it actually produces its own problems for us as we then have to sort out clearance for product placement, which isn't particularly easy at times as no company wants to see their phones being used by undesirable characters... yes, they are that petty.

[lserravite0426]

A temporary solution could be this:

fromEvent(document.getElementsByTagName('body').item(0), 'click').subscribe({
    next: async () => {
      const { visible } = await StatusBar.getInfo();
      if (visible) StatusBar.hide();
  },
});

[Saqib92]

still same issue on capacitor 5.

[kiralyta]

this is a frustrating issue on android

[lincolnthree]

My solution (essentially using window.timeout())

Check every 3 seconds if the status bar is visible. If so, wait for 3 seconds, then hide it. Seems to be a reasonable user experience. It does clutter the Capacitor logs, but users don't usually look at those ;)

      interval(3000).subscribe(async () => {
        const info = await StatusBar.getInfo().catch(opts.errorHandler);
        if (info && info.visible) {
          await Timeout.fn(() => StatusBar.hide({
            animation: Animation.Fade
          }).catch(opts.errorHandler), 3000);
        }
      });