I am new to react native and react navigation and I get this error.
Uncaught TypeError: Cannot read properties of undefined (reading 'navigate')
I don't understand my because I am just using the same code which already worked, but now it's not working.
I am trying to make a back arrow that send you back to the MachineList screen.
//doesn't 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 somewhere 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})}>
You have to desctruct the props argument.
const AddMachineDetails = ({route, ...props}) => { ... }
or
const AddMachineDetails = ({route, navigation, ...props}) => { ... } // then straightly use the *navigation*
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:
const AddMachineDetails = (props) => {
const AddMachineDetails = ({route, navigation, ...props}) => {
...
<TouchableOpacity onPress={() => navigation.navigate("MachinesListDetails")}>
<BackArrow />
</TouchableOpacity>
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