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;

Answer 1

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

Answer 2

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} />
                )
            }}
        />"

Answer 3

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