How to navigate to other pages with header buttons in React Navigation? - react-native

Question

How to navigate between screens using buttons on the header? When I try to go back or navigate to other pages using header buttons I get the same error.
The buttons on the screen work perfectly.
"undefined is not an object (evaluating 'navigation.navigate')
(Device)"
"undefined is not an object (evaluating 'navigation.goBack')"
import 'react-native-gesture-handler';
import React from 'react';
import { Text, View, StyleSheet, Button } from 'react-native';
import Constants from 'expo-constants';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
const Stack = createStackNavigator();
//Screen 1
function HomeScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
<Button
title="Details"
onPress={() => navigation.navigate('Details')}
/>
</View>
);
}
//Screen 2
function DetailsScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Details</Text>
<Button title="back home" onPress={() => navigation.goBack()} />
</View>
);
}
export default function App({ navigation, route }) {
return (
<NavigationContainer>
<Stack.Navigator initialRout="Home">
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen
name="Details"
component={DetailsScreen}
options={{
headerTitle: () => <Text>Register</Text>,
headerRight: () => <Button title="Test" onPress={() => navigation.navigate('Home')} />,
headerLeft: () => <Button title="back home" onPress={() => navigation.goBack()} />,
}}
/>
</Stack.Navigator>
</NavigationContainer>
);
}
https://snack.expo.io/#camileppst/navigation-test

Answer 1

you need to inject the navigation props, not getting it from the props of the App component:
export default function App() {
return (
<NavigationContainer>
<Stack.Navigator initialRout="Home">
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen
name="Details"
component={DetailsScreen}
options={({navigation}) => ({
headerTitle: () => <Text>Register</Text>,
headerRight: () => <Button title="Test" onPress={() => navigation.navigate('Home')} />,
headerLeft: () => <Button title="back home" onPress={() => navigation.goBack()} />,
})}
/>
</Stack.Navigator>
</NavigationContainer>
);
}