React-native: [Android 6.0+] StatusBar translucent={true} doesn't works

[alexHlebnikov]

I've found a problem: on Android 6.0+ status bar doesn't renders as it must with translucent={true} enabled.
On Android 4.4+ and Android 5.0+ it works as expected.

Here is my status bar code:

<StatusBar
 animated={true}
 barStyle={barStyle}
 backgroundColor={backgroundColor}
 translucent={true}
 showHideTransition={'fade'}
/>

Tested on:
RN 0.31.0
Google Nexus 5x (Android 6.0)
Google Nexus 4 (Android 5.0)
Meizu MX (Android 4.4.4)

[satya164]

Can you post a screenshot?

cc @janicduplessis

[alexHlebnikov]

Hi @satya164 !

Here is screenshot from emulator (StatusBar behaviour is the same like on real device).

The StatusBar must be semitransparent and lay behind the app header. But here it's on top of app screen. And because of that every app screen is now shifted down on StatusBar's height.

I must say, on RN 0.29.0 and 0.30.0 (as I remember) there was no such behaviour with StatusBar.

[mehcode]

Can confirm that at least on RN 0.30.0 <StatusBar translucent/> works as expected. Haven't upgraded to 0.31.0 but was planning to today and will update if I see this regression as well.

[alexHlebnikov]

@mehcode @janicduplessis

Now I can confirm the same problem on Nexus 5x with Android 7.0 and RN 0.31.0.

Also, I can confirm the problem is _not_ reproduced on same device, but on RN 0.30.0.

[alexHlebnikov]

Also I've checked RN 0.32.0 RC.0 - same problem there.

[nihgwu]

I'm using the StatusBar with the same props and it works as expected on those RN versions
Google Nexus 6, 6.0.0

[mehcode]

To follow up -- I also have no problems with translucent in Android 6.x / RN 0.31.0

---

@alexHlebnikov To try and understand where @nihgwu and I differ from you, how do you use <StatusBar/> ?

I have a single <StatusBar /> component that is rendered near the root view as

<StatusBar translucent backgroundColor="rgba(255, 255, 255, 0)" />

I use a borderTop to give a color under the statusBar depending on the needs of the scene.

[alexHlebnikov]

@mehcode I'm using single <StatusBar /> inside my root view. Here is my code:

<StatusBar
  animated
  barStyle={barStyle}
  backgroundColor={backgroundColor}
  translucent
  showHideTransition={'fade'}
/>

I recently checked RN 0.30.0 on Nexus 5x (Android 7.0) and StatusBar shows great, just like it must be.
But on RN 0.31.0 and 0.32.0.RC it's always shows incorrectly.

[alexHlebnikov]

Hmm. It might sounds strange, but could the issue be connected with Android permissions?
Permission politics was changed on Androids 6+. I'm detecting user geolocation in my app. Before the app launches on Android 6+ there is a system popup asking for geolocation. Could it be because of that? On Android 4 and 5 there is no such popup.

Permissions I use:

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

But that's not explains why there was no problem with StatusBar on Android 6+ with RN 0.30.0 ...

[janicduplessis]

@alexHlebnikov I know there is an issue about Modals + StatusBar that cause it to not work properly, you may be right and it could be related. Maybe try removing the permission request to test. As far as I can remember there was no changes to StatusBar recently so I'm surprised that there was a regression.

[alexHlebnikov]

@janicduplessis thanks, I'll try turn off permissions and then share the results.

[alexHlebnikov]

@janicduplessis @mehcode

So here is what I've found.
Here is the lines of code I removed from AndroidManifest.xml:

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>

Without this code (StatusBar is correct) :

With this code (StatusBar is broken) :

So, the problem seems to me is in Android system modal.

[alexHlebnikov]

I've almost forgot.
For permissions handling, I'm using this package - react-native-android-permissions

If there is some other way to make geolocation permission work on Android 6.0+ without this package - I'm gladly try it.

[satya164]

@alexHlebnikov there's a PermissionsAndroid module in master. Not released yet though.

[mehcode]

@alexHlebnikov Do you ask for permissions immediately? It looks like it. Try waiting a bit (eg. after the first render cycle). I use that same module but don't ask immediately and it works fine.

[janicduplessis]

Here's the related issue: #7474. StatusBar uses this to get the decor view and add a OnApplyWindowInsetsListener to it. Maybe it gets the wrong view when a dialog is opened. If someone could look into it it would be great :).

[janicduplessis]

If waiting a bit before asking for permissions (setTimeout) does fix it it would probably confirm my theory.

[alexHlebnikov]

@mehcode @janicduplessis yes, I'm asking for permissions immediately.
Thank you guys, I'll try yours suggestion and tell about the results.

[alexHlebnikov]

Yep, it worked! Huge thanks for help guys!