Make StatusBar translucent in React Native, Android

You might see the status bar in the top is visible and the notch area is covered by some horizontal bar maybe in gray color. Some thing like this.

you might want to make unwanted space transparent, like most apps

So, if you are hitting your head just like I was to remove that. Here is the way. First goto android/app/src/main/res/values/styles.xml file. Add this item to style, <item name=”android:windowTranslucentStatus”>true</item>.

Add react-native-safe-area-context package if not present. This worked best for me. SafeAreaView from react-native doesn’t work sometimes. Finally, don’t forget to enclose the screen with SafeAreaView and container style of flex:1