How can I avoid a layout from overlapping with the status bar?

Issue

I'm making an app, and sometimes my layout gets overlapped by the status bar. This occurs at random and it triggers when I navigate to another screen. I assume it might have to do with the navigation. What can I do to solve this issue?

This is how it's supposed to look like:

And this is how sometimes gets overlapped:

I tried to add a paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight : 0 to the main View component, however, if I do that, the screen gets pushed to the bottom when the error doesn't happen, and I don't want that.

Solution

You need to take into account the "safe area" of your device. You've tagged react-navigation, which has some support built in and uses react-native-safe-area-context. They have documentation describing safe area support.

For example:

import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';

function Demo() {
  return (
    <SafeAreaView
      style={{ flex: 1, justifyContent: 'space-between', alignItems: 'center' }}
    >
      <Text>This is top text.</Text>
      <Text>This is bottom text.</Text>
    </SafeAreaView>
  );
}

export default function App() {
  return (
    <SafeAreaProvider>
      <NavigationContainer>{/*(...) */}</NavigationContainer>
    </SafeAreaProvider>
  );
}

Answered By - jnpdx