Home » Android » android – React-navigation drawer content is misaligned-Exceptionshub

android – React-navigation drawer content is misaligned-Exceptionshub

Posted by: admin February 26, 2020 Leave a comment

Questions:

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

enter image description here

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;
How to&Answers: