Options that you want to apply to all screen in a navigator are passed as screenOptions to the Navigator
1import { NavigationContainer } from '@react-navigation/native'
2import { createStackNavigator } from '@react-navigation/stack'
3
4const Stack = createStackNavigator()
5
6function HomeScreen({ navigation }) {
7 return (
8 <View>
9 <Text>This is home screen</Text>
10 <Button onPress={() => navigation.navigate('Other')} title="Go to other screen" />
11 </View>
12 )
13}
14
15function OtherScreen() {
16 return (
17 <View>
18 <Text>This is another screen. Tap the Back icon to go back to Home</Text>
19 </View>
20 )
21}
22
23const App = () => {
24 return (
25 <NavigationContainer>
26 <Stack.Navigator initialRouteName="Home">
27 <Stack.Screen name="Home" component={HomeScreen} />
28 <Stack.Screen name="Other" component={OtherScreen} />
29 </Stack.Navigator>
30 </NavigationContainer>
31 )
32}
33
34export default App
Pass the navigation param to the component, and use navigation.navigate('screenName') to navigate to that screen. screenName is whatever value you gave for name when setting up the screen in a navigator.
1function HomeScreen({ navigation }) {
2 return (
3 <View>
4 <Text>This is home screen</Text>
5 <Button onPress={() => navigation.navigate('Other')} title="Go to other screen" />
6 </View>
7 )
8}