Adding Status Bar Margin in React Native

Reading time: < 1 minute

If we hide the nav header (headerShown: false) in React Native, we may encounter this issue:

The content appears below the status bar and is not properly visible with the clock, battery status, and other widgets on the screen.

To solve this problem, follow these steps:

First, import Platform and StatusBar:

import { Platform, StatusBar } from 'react-native';

Then, add this property in the style of the main container of the screen:

marginTop: Platform.OS === "ios" ? 0 : StatusBar.currentHeight

This marginTop property helps to solve the problem.

DevCodeLight