Hello please I need help with an error on a react native project

I created a drawer with submenu and trying to use the navigation prop in the DrawerItem so the sub menu will navigate to a particular screen

Here is the my code

App.js

`

import 'react-native-gesture-handler';
import { StyleSheet, Text, View } from 'react-native';

//screens
import Home from './screens/Home';
import Login from './screens/Login';
import Logout from './screens/Logout';
import Profile from './screens/Profile';
import DrawerNavigator, { Drawer } from './components/DrawerNavigator';

// icons
import {
  FontAwesome,
  Feather
} from '@expo/vector-icons'
import { Colors } from './components/styles';
import CustomDrawer from './components/CustomDrawer';

// colors
const { gray } = Colors;

export default function App() {
  return (
    <DrawerNavigator
      initialRouteName='Home'>
      <Drawer.Screen
        name="Logout"
        component={Logout}
        options={{
          drawerIcon: ({ focused, color, size }) => (
            <Feather name='power' size={20} color={gray} />
          )
        }}
      />
      <Drawer.Screen
        name="Home"
        component={Home}
        options={{
          drawerLabel: () => null
        }}
      />
    </DrawerNavigator>
  );
}

`

DrawerNavigaor.js

`

import React from 'react';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';
import { Colors } from './styles';
import CustomDrawer from './CustomDrawer';


// colors
const { secondary, gray } = Colors

export const Drawer = createDrawerNavigator();

const DrawerNavigator = ({ children, initialRouteName }) => {
  return (
    <NavigationContainer>
      <Drawer.Navigator
      drawerContent={(props) => <CustomDrawer {...props} />}
      screenOptions={{
        headerShown: false,
        drawerActiveTintColor: secondary,
        drawerActiveBackgroundColor: '#fff',
        drawerPosition: 'right',
        drawerLabelStyle: {
          marginLeft: -10,
          fontSize: 17,
        }
      }}
        initialRouteName={initialRouteName}
      >
        {children}
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

export default DrawerNavigator

`

CustomDrawer.js

`

import { View, Text } from 'react-native'
import React, { useState } from 'react'

import {
    DrawerContentScrollView,
    DrawerItem,
    DrawerItemList
} from '@react-navigation/drawer'
import { Colors, Hr, Icon, ProfilePic } from './styles'

//icons
import { Feather, FontAwesome } from "@expo/vector-icons"
import Profile from '../screens/Profile'
import { useNavigation } from '@react-navigation/native';

//colors
const { gray, secondary } = Colors;

const CustomDrawer = (props, { navigation }) => {

    const [collapsed, setCollapsed] = useState(false);


    return (
        <DrawerContentScrollView {...props}>
            <Icon>
                <ProfilePic
                    drawer={true}
                    resizeMode='cover'
                    source={require('./../assets/img/default.png')}
                />
            </Icon>
            <Hr drawer={true} />
            <View>
                <DrawerItem
                    icon={({ color, size, focused }) => (
                        <FontAwesome
                            name='lock'
                            size={20}
                            color={!collapsed ? color : secondary}
                        />
                    )}
                    label={({ focused, color }) =>
                        <View
                            style={{ marginLeft: -25, flex: 1, flexDirection: 'row', justifyContent: 'space-between' }}>
                            {!collapsed ?
                                (<>
                                    <Text style={{ fontSize: 17, color, marginHorizontal: 20, }}>
                                        Profile
                                    </Text>
                                    <Feather
                                        name='chevron-down'
                                        size={20}
                                        style={{
                                            marginLeft: 20
                                        }}
                                    />
                                </>
                                ) : (<>
                                    <Text style={{ fontSize: 17, color: secondary, marginHorizontal: 20, }}>
                                        Profile
                                    </Text>
                                    <Feather
                                        name='chevron-up'
                                        size={20}
                                        style={{
                                            color,
                                            marginLeft: 20
                                        }}
                                    />
                                </>
                                )
                            }
                        </View>
                    }
                    onPress={() => { collapsed ? setCollapsed(false) : setCollapsed(true) }}
                />
                {collapsed ?
                    (<DrawerItem
                        icon={({ color, size, focused }) => (
                            <Feather name='list' size={20} color={color} style={{ marginLeft: 30 }} />
                        )}
                        label={({ focused, color }) => <Text style={{ fontSize: 17, color, marginLeft: -20 }}>My Profile</Text>}
                        onPress={() => { navigation.navigate('Home') }}
                    />) :
                    ""
                }
                <DrawerItemList {...props} />
            </View>
        </DrawerContentScrollView>
    )
}

export default CustomDrawer

`

github repo: text

I tried passing the navigation directly together with the props on the drawerContent but it still did work

CodePudding user response：

You may use props.navigation.navigate instead of navigation.navigate