(React Native) Typeerror: Undefined is not an Object (evaluating '_this.props.navigation')

Question

I can’t fix this mistake.. someone help me

I click the button to go to another page and it appears.. follows the code:

[This is the code of the menu component, it has a list of buttons with this structure]

The same component is with this structure..

const Menu = () => {...}

[Button structure]

            <TapGestureHandler>
                <TouchableOpacity onPress={() => this.props.navigation.navigate('Dashboard')}>
                    <AntDesign name="home" size={35} color="#fff" />
                </TouchableOpacity>
            </TapGestureHandler>

`

[File routers] Of course there are more screens, I only put one, but the others are the same, then there is a createSwitchNagivation and inside I call this Stack and dps I give an export

const Stack = createStackNavigator({ Dashboard: { screen: Dashboard, navigationOptions: { headerShown: false, } } }

Answer 1

Maybe it’s the way you exported your page to the route, I’ll rewrite the code to show you how to build the route and the page according to the new api of React navigation and React itself. 1. creates separate files for the screens, to make the example better 2. places the route in app.js

solving by means of function:

     import React from 'react'
     import * from 'react-native'
     import { useNavigation } from '@react-navigation/native'

   export default function SuaPágina(){
     const navigation = useNavigation() // Novo hoock
           return( 
            <View>
            <TapGestureHandler>
                <TouchableOpacity onPress={() => 
                       navigation.navigate('Dashboard')}>
                    <AntDesign name="home" size={35} color="#fff" />
                </TouchableOpacity>
            </TapGestureHandler>
             </View>
            )}

file of your route:

    import React from 'react'
    import SuaPágina from '.../
    import createStackNavigator from '@react-navigation/stack'
    import NavigationContainer from '@react-navigation/native'


   const Stack = createStackNavigator()

   export default  function App(){

    return(

       <NavigationContainer> 
             <Stack.Navigator>
                   <Stack.Screen  name='Nome da Tela' 
                    component={página que tu exportou}/>
                   <Stack.Screen name='DashBoard'
                    component={página Dashboard}/>
             </Stack.Navigator>           
       </NavigationContainer>
     )       
   }