I'm sure that at some point you stumbled upon the problem with the status bar. By default the React Native draws the container view from the top left corner of the screen without taking in case the status bar. To resolve this issue, we give the container view top margin but as you know the height of the status bar in iOS and Android is different.

So, to resolve this issue, luckily, there is a React Native component called <StatusBar>.

Lets move on to the solution!

Importing the <StatusBar> component

import { StatusBar } from 'react-native'

How to use

<View>
  <StatusBar
    barStyle="light-content"
  />
</View>

In this example, I'm using only one of the <StatusBar> props:

  • barStyle - sets the color of the status bar text. It could be either - light-content or dark-content.

Here is the full list of props:

  • animated - if the transition between status bar property changes should be animated. Supported for backgroundColor, barStyle and hidden.
  • backgroundColor - the background color of the status bar. (Android only)
  • barStyle - sets the color of the status bar text.
  • hidden - if the status bar is hidden.
  • networkActivityIndicatorVisible - if the network activity indicator should be visible. (iOS only)
  • showHideTransition - the transition effect when showing and hiding the status bar using the hidden prop. Defaults to 'fade'. (iOS only)
  • translucent - if the status bar is translucent. When translucent is set to true, the app will draw under the status bar. This is useful when using a semi transparent status bar color. (Android only)

That was a short example of how to use the <StatusBar> component in your React Native apps!

Happy coding! 👻