React-native: [Android] StatusBar Translucent not working in Android 4.x.x after upgrading to react 0.23

[slamus]

Hi Everyone,

As the title says: StatusBar Translucent not working in Android 4.x.x after upgrading to react 0.23
I join you screenshots below:

Android 5/6

Android 4

Before, the status bar was black (no prob with that) but the content was _below_ the status bar

[charpeni]

@facebook-github-bot label android

[charpeni]

cc @janicduplessis

[janicduplessis]

I changed the implementation of translucent and it only works on API 21+ now. Can you just not add top padding on Android 4.4- using Platform.Version < 21?

[chirag04]

@janicduplessis I don't have a paddingTop nor do i render StatusBar in my app. I guess android renders a status bar for me. but https://github.com/facebook/react-native/pull/6218 breaks that contract and forces me to render StatusBar now on android 5+

Can we add this to known issue if above is true? I def. liked the flexibility of not rendering status bar. Not all my views have a DrawerLayout.

[janicduplessis]

The changes were made here #6481, I don't mind bringing back the old implementation for 4.4 but it caused issues with the software keyboard.

@chirag04 I'm not sure I 100% get your issue, could you give me a small example of your setup?

[donnguyen]

@janicduplessis Some people use a custom view with height = system status height to make it easy to change the status background color on both Android and iOS (yes, combined with translucent=true on Android), you can see here: https://github.com/jineshshah36/react-native-nav/blob/master/components%2FStatusBarEnhanced.js#L41 or here https://github.com/react-native-fellowship/react-native-navbar/blob/master/index.js#L98.

Before #6481, you used SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN so the custom view was under the system status bar, that mean it worked fine on both Android Lollipop and Pre-Lollipop. But when you changed how you implement status bar native module, no more SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN but setOnApplyWindowInsetsListener and limited the translucent prop to API 21+, this is where the issue comes out. The custom view is still there but not under system status bar anymore so it will make a gap between system status bar and the main content of the app (you can see that on the 2nd screenshots that slamus posted above). I know the quick fix here is just set the height of the custom view on Android Pre-Lollipop to 0, but I guess you may have a better way?! Let me know what you think.

[janicduplessis]

@donnguyen I see. I still think checking the Android version and setting the status bar height to 0 is a fine solution. Of course if someone can find a solution to adjust insets that works on API 20- that would be great, the issue with SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN as I mentioned was that it caused the view to not pan on the focused input anymore.

[lacker]

Since it seems like there is a solution here I am going to close this issue.

[elantion]

Sorry I new to ReactNative. I don't google any solution example for this issue. Can someone provide some code snippet? Appreciate a lot.

[nirav4273]

@elantion
import Expo from 'expo'

inside CSS try this one. Worked for me in android 6.
marginTop:Expo.Constants.statusBarHeight