How to render react native app under the status bar?

Question

I am learning app development in react native and my app is overlapping with the status bar of my phone. If I add padding to the top then the padding would differ for different phones. I tried using SafeAreaView but it is not working and I read somewhere it only works for iPhones. So is there any way that I can render the app under the status bar? Any suggestions would be appreciated.

The app getting overlapped with the status bar

Answer 1

I finally solved it by simply adding paddingTop:StatusBar.currentHeight to the root view tag of my component.

Answer 2

You will need to find the statusbar height and set the top margin of your container to be equal to that amount.

Since Expo provides this value as a constant, you can use it to set the style of your parent component such that the content is always under the status bar.

You can follow this pattern from the github issue here

const App = StackNavigator({
  Home: { screen: HomeScreen },
  About: { screen: AboutScreen },
  }, {
    navigationOptions: { headerStyle: { marginTop: Expo.Constants.statusBarHeight } }
  })