React Native, Custom DrawerContent navigator issue - reactjs

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
}