In this block of code, I want to use navigation.navigate to switch between the home screen and the profile screen. But when I run the app, I get the following error: can't find variable navigation. I've been looking for a solution, but I can't seem to find it. Here's the code:
import 'react-native-gesture-handler';
import * as React from 'react';
import {View, Text, Button} from 'react-native';
import { NavigationContainer, StackActions } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
const Stack = createStackNavigator();
const HomeScreen = () => {
return(
<View>
<Text>Home Screen</Text>
<Button title="Go to Profile Screen" onPress={()=> navigation.navigate("Profile")}/>
</View>
);
}
const ProfileScreen = () => {
return(
<View>
<Text>Profile Screen</Text>
<Button title="Go to Home Screen" onPress={() => navigation.navigate("Home")}/>
</View>
);
}
export default function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
name="Profile"
component={ProfileScreen}
options={{ title: '' }}
/>
<Stack.Screen
name="Home"
component={HomeScreen}
/>
</Stack.Navigator>
</NavigationContainer>
);
}
Thank you in advance.
You can get
navigation
object fromprops
. Code example: