React-navigation drawer content is misaligned

Question

I'm writing a React Native app that uses the react-navigation 5.x library, specifically @react-navigation/drawer. I have four screens in the drawer, each with an icon and a label.

Screenshot

My problem is that the labels for each screen do not line up correctly -- see the 'Device Configuration' item compared to the others. The alignment seems to depend on the size of the icon, with the wider icons pushing the label more to the right.

I've tried hard-coding the size of the icon so that they're all the same, but that didn't work. I'm not sure what else to try. I'd appreciate any ideas!

My code:

function Icon(props) {
    return (
        <Ionicon
            name={props.name}
            size={props.size}
            color={props.color}
        />
    );
}

const DrawerNavigator = createDrawerNavigator();

function Drawer() {

    return (
        <DrawerNavigator.Navigator
            drawerContentOptions={{
                activeTintColor: Colors.drawerScreenSelected
            }}
        >
            <DrawerNavigator.Screen
                name="Home"
                component={Tabs}
                options={{
                    drawerIcon: ({color, size}) => (
                        <Icon name="md-home" color={color} size={size} />
                    )
                }}
            />
            <DrawerNavigator.Screen
                name="Login"
                component={LoginScreen}
                options={{
                    drawerIcon: ({color, size}) => (
                        <Icon name="md-log-in" color={color} size={size} />
                    )
                }}
            />
            <DrawerNavigator.Screen
                name="Device Configuration"
                component={DeviceConfigScreen}
                options={{
                    drawerIcon: ({color, size}) => (
                        <Icon name="md-bluetooth" color={color} size={size} />
                    )
                }}
            />
            <DrawerNavigator.Screen
                name="Email Data"
                component={ExportDataScreen}
                options={{
                    drawerIcon: ({color, size}) => (
                        <Icon name="md-at" color={color} size={size} />
                    )
                }}
            />

        </DrawerNavigator.Navigator>
    );
}

export default Drawer;

Have you tried setting a fixed width for your icons? Looks like your icons have different widths which is affecting the alignment of the label. — satya164, Feb 17 '20 at 23:27
Thank you! I thought 'size' was setting the width but it was setting the font size. Setting 'width' did what I was looking for. — Amanda, Feb 18 '20 at 15:43
@satya164 for my use case, setting width and size with same value results in icon got cutted in the end. setting width only, will result in icon container is increasing but the icon size is still same. do you have any other idea? — me noob, Apr 28 '22 at 04:21

score 1 · Answer 1 · answered May 07 '21 at 16:27

It happens because the Device Cofiguration icon's width is different than others, in order to fix it,you can set a container outer the Icon and set a default with and height!

like this:

<View style={{width: 25, height:25}}>
  <Icon>
</View>

I hope it helps. ;D

score 0 · Answer 2 · answered Apr 17 '20 at 07:53

give style in Icon

    <DrawerNavigator.Screen
            name="Home"
            component={Tabs}
            options={{
                drawerIcon: ({color, size}) => (
                    <Icon name="md-home" color={color}
                       style={{alignSelf:"center",marginRight:6,paddingLeft:2}}
                     size={size} />
                )
            }}
        />"

score 0 · Answer 3 · answered Apr 28 '22 at 04:32

This is work for me, without cutting the edge of the icon.

code:

<DrawerItem 
   icon={() => <YourIcon name={yourIconName} size={props.size}> style={{width: props.size + //experiment with this}} />}
/>

above code will work, but the next problem is that your label will have more empty space in between the icon. to solve it here is the code:

<DrawerItem 
   icon={() => <YourIcon name={yourIconName} size={props.size}> style={{width: props.size + //experiment with this}} />}
   labelStyle={{marginLeft: -20}}
/>

note: -20 can be any number you want to be, in my case, the icon is in the left side so i want my label 20 more to the left

React-navigation drawer content is misaligned

3 Answers3

give style in Icon