How to remove space from the top in react-drawer

user_4614713 0
Viewed 2587

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/drawerenter image description here

react-navigation-drawer react-native
3 Answers

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>
user_104532490

You can use this if the status bar is hidden:

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

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,
 }}
>...
user_138217750
Related