react naviagation v5 navigate from drawer custom view

Question

I am using React Navigation V5, I wanna custom drawer Navigation content which contents the image on top and some others navigation items unders

Here is my drawer items:

• Image (custom view)
• Profile
• Products
• Orders

Here is my code my custom drawer content.

export const CustomDrawerContent = props => {
return (
    <SafeAreaView style={styles.customDrawer}>
        <View
            style={{ flex: 1 }}
        >

            <DrawerContentScrollView {...props}>
                <TouchableNativeFeedback onPress={() => { console.log('go profile');  }}>
                    <View style={styles.userContainer}>
                        <View style={styles.imageContainer}>

                            <Image
                                style={styles.image}
                                source={{ uri: 'https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTLCta_MQcJFd2kpz8HwXFm-6vxVqXzRUgCOIuhs94Q32GG8EeJ' }}
                            />
                        </View>
                        <Text style={styles.name}>Nguyen van Admin</Text>
                    </View>
                </TouchableNativeFeedback>

                <DrawerItemList {...props} />
            </DrawerContentScrollView>
            <DrawerItem
                label="Đăng xuất"
                style={{
                    borderWidth: 1,
                }}
                labelStyle={{
                    color: 'black'
                }}
                icon={({ focused, color, size }) => <Ionicons
                    size={23}
                    color={color}
                    name={Platform.OS === 'android' ? 'md-exit' : 'ios-exit-outline'}

                />}
            />
        </View>

    </SafeAreaView>
);
}

So If the profile screen existed in drawer, By clicking to the image i can use

props.navigate("profile")

But if I remove the profile screen from the drawer screens. I can not navigate to profile anymore. How do i archive navigate to profile screen without adding it the drawer screens?

Or Can I hide profile item from drawer items?

Answer 1

To hide a menu item from drawer, use Array.map(...) instead of <DrawerItemList {...props} /> in custom drawer content.,

{drawerItems.map((item, index) => {
return (
  <DrawerItem
    label={item.drawerLabel}
    onPress={() => props.navigation.navigate(item.routeName)}
  />
);
})}

and add a useEffect hook to custom drawer content like below,

let [drawerItems, setDrawerItems] = useState([]);

useEffect(() => {
let drawerItemsList = [];
for (const key in props.descriptors) {
  if (props.descriptors.hasOwnProperty(key)) {
    if (!key.includes('profile')) {
      const element = props.descriptors[key];
      element.options.routeName = key.substring(0, key.indexOf('-'));
      drawerItemsList.push(element.options);
    }
  }
}
setDrawerItems(drawerItemsList);
}, []);

Another approach.,
Create an Array like below in the custom drawer content.,

const drawerItemsList = [
{
    drawerLabel: 'Products',
    drawerIcon: 'product',
    routeName: 'products',
    active: true,
},
{
    drawerLabel: 'Orders',
    drawerIcon: 'order',
    routeName: 'orders',
    active: false,
},
];

let [drawerItems, setDrawerItems] = useState(drawerItemsList);

and instead of <DrawerItemList {...props} /> use <Flatlist /> like below.,

<View>
<FlatList 
    data={drawerItems} 
    keyExtractor={(item)=>item.routeName.trim()} 
    renderItem={({item,index})=>(
        <DrawerItem
            label={item.drawerLabel}
            icon={({color, size}) => <Ionicons name={item.drawerIcon} color={item.active?'#1e90ff':'#ccc'} size={size} />}
            labelStyle={[item.active?{color: '#1e90ff'}:{color: '#ccc'}]}
            style={item.active?{backgroundColor: '#1e90ff20'}:null}
            onPress={() => {
              drawerItemsList.forEach((element,i) => {
                i!==index?element.active=false:element.active=true
              });
              setDrawerItems(drawerItemsList)
              props.navigation.navigate(item.routeName)
            }}
        />
    )} 
/>
</View>