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

Question

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

Here's an image to explain better.

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

Answer 1

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.

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.

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.

Answer 2

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>
  );
}