The status bar on Android issue with backdropColor

[jparksecurity]

Current Behavior The status bar on Android doesn't get darker like the rest of the screen.

Input Code

• REPL or Repo link if applicable: https://snack.expo.io/@horaeng/49211e

Expected behavior/code The status bar on Android gets darker just like on iOS

Environment

• Device: any Android device
• OS: Android
• react-native-copilot: v2.5.1
• react-native: v0.63
• react-native-svg: v.12.1.0

Additional context/Screenshots

Android	iOS

[jparksecurity]

Maybe something like this would work:

useEffect(() => {
    if (Platform.OS === 'android') {
      copilotEvents.on('start', () => {
        StatusBar.setBackgroundColor(backdropColor);
      });
      copilotEvents.on('stop', () => {
        StatusBar.setBackgroundColor(transparent);
      });
    }
    return () => {
      copilotEvents.off('start');
      copilotEvents.off('stop');
    };
  }, [copilotEvents]);

[jparksecurity]

I found androidStatusBarVisible prop, but it doesn't work.

https://github.com/mohebifar/react-native-copilot/blob/99676c2137a81d3569c65e332daf89b1a602c71d/src/hocs/copilot.js#L27

[eyalyoli]

Try making the status bar transparent:

<StatusBar
          translucent // <-- this may be bad for you
          backgroundColor="transparent"
          barStyle="dark-content"
          {...statusBarStyle}
        />

[jparksecurity]

Try making the status bar transparent:

<StatusBar
          translucent // <-- this may be bad for you
          backgroundColor="transparent"
          barStyle="dark-content"
          {...statusBarStyle}
        />

@eyalyoli thank you for the suggestion. I tested it, but translucent isn't helping...

My current workaround is StatusBar.setBackgroundColor to match overlay color. However, I see the timing is mismatched. I'm wondering if someone has a different idea.

[eyalyoli]

I meant you try using this line :

backgroundColor="transparent"

[jparksecurity]

oh, I see your point. Maybe you're right, but it's still happening even if I don't use StatusBar at all as you see in the repo https://snack.expo.io/@horaeng/49211e.

Or it could be just because Expo sets backgroundColor to transparent as default. https://docs.expo.io/versions/v40.0.0/config/app/#backgroundcolor-1

If setting the background color to transparent is a problem, I'm not sure what I can do except what I'm already doing(manually setting background color) while using Expo.

Do you see the same problem on Android?

[eyalyoli]

There are mainly two type of statusbars that you should be aware of:

1. Colored - this the normal state, you choose the color and the system automatically "pads" your app so that nothing overlays the statusbar.
2. Translucent - you basically tell the system not to pad your app so you could draw components below the statusbar.

If you are using expo, then yes, it defaults to transparent & translucent statusbar - that is when statusbar pad is "@zero. If you test an APK of an expo (bare) app, you'll see that the status bar is colored and not working as in Expo (it has height).

To have a consistent experience, and to cope with weird bugs (such the one your having) I suggest you always handel status bar color/type by adding the component that I suggested to your screens. Hope this clarifies the issue your having.

[jparksecurity]

That makes sense. I really appreciate you giving me the advice. And it definitely clarifies the issue.

So I tried to add the StatusBar component as suggested in my example repo.
https://snack.expo.io/@horaeng/statusbar-android

I started seeing the status bar and the rest screen being out of the sync. Do you have any insight on this?

[eyalyoli]

You just have to play with it and implement whatever fits your production app (not testing). I used the same code for another issue I had with drop-down menus (on just one screen).

One thing you should be aware of, when you test on Expo, it acts differently than on a native build of your app (using react-native cli and not expo). It is also very different for iOS. So do what looks good in production not on Expo. Test your app via react-native cli with real APK. If you are not planning to go bare, then you should experiment with Expo production app (I don't have experience there).

My app is bare but I like to use Expo for testing. I know, because of the differences, there are some things I can't test on Expo and I don't care how they appear there as long as they appear perfect in prod.

[jparksecurity]

I see. I just tested the same implementation on prod, but it looks like it's out of sync as well. I guess I need more testing.

Again, thank you for the comments. It really helps me a lot!