React Native, Custom DrawerContent navigator issue

Question

I have a custom DrawerContent component and I am unable to navigate to a screen from it using navigator.navigate('DrawerHelp').

I am still getting this error and I really have no idea how to fix it.

I am trying to navigate from the Help button to its own component called DrawerHelp.

issue The action 'NAVIGATE' with payload {"name":"DrawerHelp"} was not handled by any navigator

This is my code below.

function DrawerComponent() {
    return (
        <Drawer.Navigator 
            drawerContentOptions={{activeBackgroundColor: '#efefef', activeTintColor: '#000000'}}
            initialRouteName="Tabs" 
            drawerStyle={{ backgroundColor:'#ffffff', width:'85%', paddingBottom: 50 }} 
            drawerContent={ 
                props => ( <CustomDrawerContent {...props} /> )
            }>
            <Drawer.Screen name="Dashboard" component={Tabs} options={{
                drawerIcon: config => <Ionicons name={'ios-home'} size={18} color={'#444'} headerTitle="AAA" />,
            }} />

            <Drawer.Screen name="Help" component={DrawerHelp} 
                options={{
                    drawerIcon: config => <Ionicons name={'ios-people-circle-outline'} size={18} color={'#444'}/>,
                }}
            />
        </Drawer.Navigator>
    );
}

export function CustomDrawerContent (props) {

    const [ tabs, setTabs ] = useState([
        { 
            name: 'Help',
            icon: 'ios-call',
            borderColor: '#e7c53f',
            backgroundColor: '#fff',
            color: '#e7c53f',
            fontWeight: '500'
        },{ 
            name: 'Share',
            icon: 'ios-megaphone',
            borderColor: '#e7c53f',
            backgroundColor: '#fff',
            color: '#e7c53f',
            fontWeight: '500'
        },{ 
            name: 'Logout',
            icon: 'ios-log-out',
            borderColor: '#e7c53f',
            backgroundColor: '#fff',
            color: '#e7c53f',
            fontWeight: '500'
        }
    ]);

    return (
        <DrawerContentScrollView {...props}>
            <DrawerItemList {...props} />
            <View style={{ padding: 15 }}>
                <View style={{ 
                    flexDirection: 'row', 
                    justifyContent: 'space-between',
                    height: 50,
                    alignItems: 'center'
                }}>
                    {
                        tabs.map((tab) => {
                            return (
                                <TouchableOpacity
                                    key={tab.name}
                                    style={{
                                        height: '100%',
                                        flex: .32,
                                        alignItems: 'center',
                                        borderWidth: .5,
                                        borderColor: tab.borderColor,
                                        backgroundColor: tab.backgroundColor,
                                        borderRadius: 10,
                                        flexDirection: 'row',
                                        justifyContent: 'space-evenly'
                                    }}
                                    onPress={() => {
                                        if(tab.name == 'Logout') {
                                            // navigation.toggleDrawer();
                                        }

                                        if(tab.name == 'Share') {
                                            // onShare();
                                        }

                                        if(tab.name == 'Help') {
                                            props.navigation.navigate('DrawerHelp');
                                        }
                                    }}>
                                    <Ionicons name={tab.icon} size={18} style={{ color: tab.color }} />
                                    <Text style={{ color: tab.color, fontWeight: tab.fontWeight }}>{trans(tab.name, cntx.lang)}</Text>
                                </TouchableOpacity>
                            )
                        })
                    }
                </View>
            </View>
        </DrawerContentScrollView>
    );
}

Answer 1

It is not working because you have defined DrawerComponent with name 'Help'

<Drawer.Screen name="Help" component={DrawerHelp} 
  options={{drawerIcon: config => <Ionicons name={'ios-people-circle-outline'} size={18} color={'#444'}/>
                

if(tab.name == 'Help') {
 props.navigation.navigate('DrawerHelp'); <== Change here to Help not DrawerHelp
}