Question 35413 in React native Question posted in
The official React Native documentation can be found here.

React native – remove space between drawerIcon and item text on Drawer.Screen

I’m trying to adjust space between icon and text in drawer screen.

Here’s an image to explain better.

Image showing space between icon and drawer item text

Here’s my code

<Drawer.Navigator screenOptions={(navigation) => ({
        drawerItemStyle: {
           borderRadius: 0,
           width: '100%',
           marginLeft: 0
        }
      })}>
      <Drawer.Screen 
         name="HomeScreen" 
         component={HomeScreen} 
         options={{ 
            headerShown: true,  
            headerTransparent: true, 
            headerTitle: "", 
            title: 'Start Delivery',
            drawerIcon: (({focused}) => <Icon name="car" size={25} color={focused ? "#288df9" : "#777"} style={{padding:0, margin:0}} />)
         }} 
      />
</Drawer.Navigator>

Thanks

Tags:

2

Answers


  1. 0

    The default Drawer uses a DrawerItemList which is a list of DrawerItems. Looking at the source code, the view that wraps the label implements a marginLeft of 32. This is hardcoded and cannot be changed without using dirty tricks.

    Let us test this using the following example.

    function App() {
  return (
     <NavigationContainer>
      <Drawer.Navigator>
        <Drawer.Screen name="Home" component={Home} options={{drawerIcon: () => <View style={{height:20, width: 20, backgroundColor: "red"}} />}}  />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

    The above uses a View as a dummy image with a red background. Here is the result.

    enter image description here

    Adding a marginRight of -32 to our icon removes the "gap" completely.

    function App() {
  return (
     <NavigationContainer>
      <Drawer.Navigator>
        <Drawer.Screen name="Home" component={Home} options={{drawerIcon: () => <View style={{height:20, width: 20, backgroundColor: "red", marginRight: -32}} />}}  />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

    Here is the result.

    enter image description here

    This is not ideal since we have to do this for each icon, thus we could create a custom component and reuse it.

    const CustomIconComponent = ({focused, name}) => {
    return <View style={{marginRight: -32}}>
        <Icon name={name} size={25} color={focused ? "#288df9" : "#777"} />
    </View>
}

    Then, use it for each screen.

    options={{ 
        
    ...
            title: 'Start Delivery',
            drawerIcon: (({focused}) => <CustomIconComponent focused={focused} />)
         }}

    There is a second way. We could create a custom drawer. This would allow us to not use the DrawerItem component but a custom component with custom stylings.

    Login or Signup to reply.
  2. 0

    Another option that solves that problem as well is to use negative marginLeft directly in the Text rendered inside every list Item. You can reach this solution using drawerLabelStyle property inside option prop as is showed below:

    
function App() {
  return (
     <NavigationContainer>
      <Drawer.Navigator>
        <Drawer.Screen name="Home" component={Home} options={{ drawerLabelSyle: { marginLeft: -10 } }}  />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search