Hi I am new to react native and react navigation and I get this error.

I don't understand my because I am just doing the same code wich already worked but now it's not working.

I am trying to make a back arrow that send you back to the MachineList screen.

//dosent work
const AddMachineDetails = ({route}, props) => {

...

<TouchableOpacity onPress={() => props.navigation.navigate("MachinesList")}>
       <BackArrow />
</TouchableOpacity>

So when I press my backarrow it send me this error : Uncaught TypeError: Cannot read properties of undefined (reading 'navigate')

Here is my Navigation file :

import MachinesList from '../components/MachinesList'
import AddMachineDetails from '../components/AddMachineDetails';

...


function MachineListStackScreen() {
    return(
        <Stack.Navigator screenOptions={{headerShown: false}}>
            <Stack.Screen name='MachinesList' component={MachinesList}/>
            <Stack.Screen name='AddMachineDetails' component={AddMachineDetails}/>
        </Stack.Navigator>
    )
}

...

I think the problem is somwhere in this code, but if not, I'll show you more of my code

Here is an example where my navigation.navigate work perfectly :

//no specific imports  (but works)

const MachinesList = (props) => {

...


<TouchableOpacity style={styles.machineBox} onPress={() => props.navigation.navigate('AddMachineDetails', {item})}>

CodePudding user response：

You have to desctruct the props argument.

const AddMachineDetails = ({route, ...props}) => { ... }  

or

const AddMachineDetails = ({route, navigation, ...props}) => { ... }  // then straightly use the *navigation*

CodePudding user response：

Optional chaining can be useful in future to prevent errors in runtime. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining

CodePudding user response：

The issue is here ({route}, props) =>.

You are destructuring the first argument, but there aren't other parameters passed and that's why "props" variable is undefined.

You have two solutions:

1. Just use props:

const AddMachineDetails = (props) => {

2. Destructure props:

const AddMachineDetails = ({route, navigation, ...props}) => {
...

<TouchableOpacity onPress={() => navigation.navigate("MachinesListDetails")}>
       <BackArrow />
</TouchableOpacity>