Monday, 26 November 2018

React Native Modal is not drawn below the StatusBar on Android

In React Native (With EXPO), I'm showing a Modal. The Modal gets drawn behind the StatusBar in iOS but it's not happening on Android.

Do you know why? I could not find any solution for this.

The StatusBar has already set the translucent={true} prop. That's why you are able to see the Map behind the StatusBar on Android. But I can not draw the Modal component behind it (as I can do on iOS).

Here I add a couple of screenshots and an online viewer to check this behavior: https://snack.expo.io/BJR4oF4A7

Another weird behavior that I'm seeing is that it doesn't matter which translucent value I set, it always works in the same way (it's always translucent, even when I set it to false).

In case that this is impossible, how can I set the background to #FFF and the font-color to #000 on the StatusBar on Android?

I want to know:

  1. Why there are different behaviors in iOS and Android.
  2. Why changing the props of StatusBar still not changing its behavior (can be seen in the online viewer, changing translucent, or backgroundColor values)
  3. If it's impossible to get the modal drawn behind the StatusBar, so, how can I change the background and the font-color of it when a Modal is opened? (in Android) (with no hiding it)

Android Android

iOS iOS



from React Native Modal is not drawn below the StatusBar on Android

No comments:

Post a Comment