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

score 11 · Answer 1 · answered Jun 08 '21 at 05:42

11

You can use this if the status bar is hidden:

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

answered Jun 08 '21 at 05:42

Mouad Tahir

450
6
9

Vikas Sharma · Answer 2 · 2020-10-20T23:08:25.037

8

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>

edited Oct 20 '20 at 23:08

answered Oct 20 '20 at 22:47

Vikas Sharma

685
8
18

Thanks, I'd guessed there was some padding but didn't know there was a `contentContainerStyle` property – eckc Apr 20 '21 at 04:20

score 4 · Answer 3 · answered Nov 20 '20 at 00:51

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

How to remove space from the top in react-drawer

3 Answers3