How to remove space from the top in react-drawer

Question

I am using it and i am getting white space at the top. Can any provide me detail to remove this white space from top. @react-navigation/drawer

Answer 1

In DrawerContentScrollView there is a default padding of 4 was added in @react-navigation/drawer code so to remove this just pass paddingTop prop in contentContainerStyle.

const insets = useSafeArea();

<DrawerContentScrollView
    contentContainerStyle={{
       paddingTop: insets.top,
    }}
   {...props}>
</DrawerContentScrollView>

Answer 2

You can use this if the status bar is hidden:

<DrawerContentScrollView 
    contentContainerStyle={{ paddingTop: 0 }}>
</DrawerContentScrollView>

Answer 3

Just to add, I had the same problem and useSafeArea is deprecated. I managed using useSafeAreaInsets.

import { useSafeAreaInsets } from 'react-native-safe-area-context';

...<DrawerContentScrollView 
  style={styles.container} 
  contentContainerStyle={{
    paddingTop: insets.top,
 }}
>...