1

I'm using @react-navigation/drawer.

And it is very annoying with the style inside <DrawerContentScrollView>

I have demo here ( please run on andorid, on web do not have the paddingTop )

The problem: ![problem

Inside the view in DrawerContentScrollView has a style:

{
  "paddingTop": 34.18181800842285,
  "paddingStart": 0,
  "paddingEnd": 0
}

It's good if I don't customize a header at the top. It seems StatusBar's padding. I don't know where to fix it. I want to turn it off or change the paddingTop: 0.

want to remove

Does anyone have a solution to this problem?

Zuet
  • 559
  • 6
  • 23

1 Answers1

1

add contentContainerStyle={{paddingTop: 0}} into <DrawerContentScrollView>

<DrawerContentScrollView
  {...props}
  contentContainerStyle={{paddingTop: 0}}>
  <DrawerItemList {...props} />
</DrawerContentScrollView>
Zuet
  • 559
  • 6
  • 23
  • This is good but would love to see also how to edit the Item styles individually as well as asked (although actually not needed for this solution) – Liam Clark Gutiérrez Jan 23 '23 at 15:03
  • Either define the drawer entries by using DrawerItem component, or define options props inside your Drawer screens, and then use DrawerContent or DrawerItemList compoments – Alix Humbert Feb 14 '23 at 09:51