How to customize drawer navigator in react native drawer?

Question

I am creating a drawer navigation for my react native app but can't seem to customize the drawer. Tried following the documentation and other examples but they all bring up errors. I need to change the text size and colour and also add a profile picture on the top and a logout function way down at the bottom

function ProfileDrawer() { const Drawer = createDrawerNavigator()

return (

    <SafeAreaProvider>

        <Drawer.Navigator
            initialRouteName="DashBoard"
            screenOptions={{
                drawerStyle: {
                    width: '60%',
                },
                drawerActiveTintColor: "#BC4B52",
            }}
           

        >

            <Drawer.Screen
                name='DashBoard'
                component={DashBoard}
                options={{
                    drawerType: 'front',
                    title: "dashboard",
                    headerShown: false,
                    
                }}
            />

            
            <Drawer.Screen
                name='Profile'
                component={ProfileScreen}
                options={{
                    headerShown: false,
                    drawerIcon: () =>
                        <Ionicons name="md-person-outline"
                            size={30}
                            color="black" />

                }}
            />

            <Drawer.Screen
                name='Airtime'

                component={AirtimeScreen}

                options={{
                    headerShown:false,
                    drawerIcon:()=>
                    <Ionicons
                    name="cash-outline"
                    size={30}
                    color="black"
                    
                />
                }}
            />

        </Drawer.Navigator>



    </SafeAreaProvider>


)

}

score 1 · Accepted Answer · answered Sep 06 '22 at 18:55

you need to create a custom drawer component, refer to below link https://reactnavigation.org/docs/drawer-navigator/

for reference checkout this code

// CustomDrawer

const CustomDrawer = props => {
  return (
    <View style={{flex: 1}}>
      <DrawerContentScrollView
        {...props}
        contentContainerStyle={{backgroundColor: "white"}}>
        <View
          style={{
            flexDirection: "row",
            padding: 30,
            backgroundColor: "black",
            alignItems: "center",
          }}>
          <Image source={require("../../assets/userIcon.png")} />
        </View>
        <View style={{padding: 20}}>
          <DrawerItemList {...props} />
        </View>
        <View>
          <TouchableOpacity>
            <Text>Logout</Text>
          </TouchableOpacity>
        </View>
      </DrawerContentScrollView>
    </View>
  );
};

And in your drawer navigation route add CustomDrawer component

// ProfileDrawer

<Drawer.Navigator
      initialRouteName="DashBoard"
            screenOptions={{
                drawerStyle: {
                    width: '60%',
                },
                drawerActiveTintColor: "#BC4B52",
            }}
      drawerContent={props => <CustomDrawer {...props} />}

and if you want to change the text styles for the drawer items, mention in option like this

    <Drawer.Screen
     name='Profile'
     component={ProfileScreen}
     options={{
        headerShown: false,
        rawerLabelStyle: {fontSize: 10, color: "red"}
       ...

How to customize drawer navigator in react native drawer?

1 Answers1