A status bar appears along the upper edge of the mobile screen and it displays information about the device’s current state, like the time, the cellular carrier, and also the battery level. By default, its shown on a white background and the status information is in black.

I did some research on Youtube and I found that a lot of React Native tutorials used Android devices as their simulator and so if you’re using an iOS device, the code you need is slightly different to the tutorials.

Even if you search the React Native docs or elsewhere, there’s no easy, straight forward explanation on how to do it.

So i’ll show you how and its actually really simple.

1. First, we need to import the status bar and the Safe area view components from React Native.

import { StatusBar, SafeAreaView } from 'react-native'

2. We then need to create our component and inside the return, we insert our StatusBar component and use the SafeAreaView component to wrap around it. This is will render the status bar within the safe area boundaries of the device so nothing would overlap our components (for example, the device’s camera or any screen notches)

const appStatusBar = () => {

return (
      <SafeAreaView>
        <StatusBar barStyle='light-content'/> 
      </SafeAreaView>
)

}

Depending on the background color you choose, you may need to change the icons to a lighter color if the background is dark, otherwise you wont see them properly. In our example, we’ll be using a dark background, so we added the StatusBar a prop called ‘barStyle’ and we passed in ‘light-content’ as the value.

3. Now on an Android device, you could add the backgroundColor prop to the StatusBar component and give it a color value and this will work. But on iOS, this won’t change anything.

The way to get the background color to change is to wrap these components inside a View component and add the backgroundColor prop and value there. You can also add any other styling you need (padding, margin etc).

So the final code will look like this:

import { StatusBar, SafeAreaView } from 'react-native'

const appStatusBar = () => {

return (

<View style={{backgroundColor: '#001F2D'}}>
      <SafeAreaView>
        <StatusBar barStyle='light-content'/> 
      </SafeAreaView>
    </View>
)

}

export default appStatusBar

And that’s all there is to it. We’ve changed the background color of the status bar to a dark color and the status bar icons and time are lighter so we can see them.

Happy coding!