How to remove extra space above react navigation header?

Question

There is extra space appearing above the react navigation header, but only when I have built an apk and run it on my phone. When using expo, there is no extra space. I am using a Samsung S21 to test. I am also using React Native Paper.

App.js

const Drawer = createDrawerNavigator();

export default function App() {
  return (
    <PaperProvider theme={theme}>
      <NavigationContainer theme={navTheme}>
        <Drawer.Navigator
          initialRouteName="Home"
          screenOptions={{ header: (props) => <Header {...props} /> }}
        >
          <Drawer.Screen name="Home" component={Home} />
          <Drawer.Screen name="Compare" component={Compare} />
        </Drawer.Navigator>
      </NavigationContainer>
    </PaperProvider>
  );
}

Header.js

const Header = ({ route, navigation }) => {
  const theme = useTheme();
  const openDrawer = () => {
    navigation.openDrawer();
  };

  return (
    <Appbar.Header
      safeAreaInsets={{}}
      style={{
        backgroundColor: theme.colors.darkPrimary,
      }}
    >
      <Appbar.Action
        icon="menu"
        color={theme.colors.light}
        onPress={openDrawer}
      />
      <Appbar.Content color={theme.colors.light} title={route.name} />
    </Appbar.Header>
  );
};

export default Header;

I also noticed this problem a few days ago. I tried to set `` and it fixed it for Android. But then my iOS build is missing that space and the header is up behind the system status bar — jwynveen, Nov 15 '22 at 08:09

score 2 · Accepted Answer · answered Nov 15 '22 at 08:33

I had this problem and found that setting statusBarHeight={0} fixed the problem on Android. But then I noticed that it caused a problem on iOS.

In the React Native Paper docs for Appbar.Header, it says that it handles that spacing automatically only for iOS. So I did the following in my header component to conditionally set that property for Android only. I'm not 100% certain if this is a device-specific issue or platform-specific issue. I tested on a Pixel 4 (simulator) & 5 (physical).

function TopNavBar({ navigation, options, back }) {
  const headerProps = {};
  if (Platform.OS === 'android') {
    // according to [docs](https://callstack.github.io/react-native-paper/4.0/appbar-header.html#statusBarHeight)
    // header area is only handled for iOS >= 11 using SafeAreaView,
    // so we'll set it to 0 for Android
    headerProps.statusBarHeight = 0;
  }
  return (
    <Appbar.Header {...headerProps}>
      ...
    </Appbar.Header>
  );
}

How to remove extra space above react navigation header?

1 Answers1