CODEWITHSUNDEEP
androidreact-nativereact-navigation-drawer
Amanda
Amanda

Reputation: 21

React-navigation drawer content is misaligned

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;

Upvotes: 2

Views: 1479

Answers (3)

me noob
me noob

Reputation: 609

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

Upvotes: 0

michelhora
michelhora

Reputation: 11

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

Upvotes: 1

JAy Patel
JAy Patel

Reputation: 1

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

Upvotes: 0

Related Questions