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

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)

About this issue

Original URL
State: closed
Created 8 years ago
Comments: 19 (9 by maintainers)

Most upvoted comments

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.

mehcode on Aug 16, 2016

Yep, it worked! Huge thanks for help guys!

alexHlebnikov on Aug 19, 2016

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.

mehcode on Aug 15, 2016

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 on Aug 18, 2016