React native Drawer Navigator item space

Viewed 76

I'm using the react native drawer navigator v6 and I would like to reduce the space between the items and also the space between icon and label, see screenshot: enter image description here

Does somebody know how?

Thanks!

My custom drawer:

function CustomDrawerContent(props) {
    return (
      <DrawerContentScrollView
        {...props}
        contentContainerStyle={{ paddingTop: 0 }}
      >
        <View style={styles.logo}>
          <Image source={require("../assets/images/logo.png")} />
        </View>
        <DrawerItemList {...props} style={{ paddingTop: 0, marginTop: 0 }} />
      </DrawerContentScrollView>
    );
  }
    

And my drawer navigator:

<Drawer.Navigator
  drawerContent={(props) => <CustomDrawerContent {...props} />}
  screenOptions={{
    gestureEnabled: true,
    headerTitleAlign: "center",
    headerStyle: {
      backgroundColor: "#82bf4e",
      borderBottomWidth: 0.5,
      shadowColor: "transparent",
      borderBottomColor: "#75ad46",
    },
    headerTitleStyle: {
      fontSize: 18,
    },
    headerTintColor: "#fff",
    headerLeft: () => <BackButton />,
  }}
>
  <Drawer.Screen
    name="Home"
    component={HomeScreen}
    options={{
      header: () => <HeaderContainer />,
      drawerItemStyle: { display: "none" },
    }}
  />
  <Drawer.Screen
    name="Mein Team"
    component={TeamScreen}
    options={{
      headerTitle: "Mein Team",
      drawerIcon: () => <AntDesign size={20} name="team" />,
    }}
  />
      ...
 </Drawer.Navigator>
1 Answers

You can create custom navigator using

<Drawer.Navigator drawerContent={(props) => <CustomDrawerContent {...props} />}>
  {/* screens */}
</Drawer.Navigator>

Adjust the spacing as you want.

Related