After reading this tutorial, you will have basic understanding about react navigation stack.
Android Studio Environment:
You can follow this article’s prerequisites section for setting up Android Studio, JDK & environment variables and creating a React Native project.
Npm Packages :
react-native-reanimated, react-native-gesture-handler, react-native-screens, react-native-safe-area-context,@react-native-community/masked-view, react-navigation
We need to install the dependencies first:
npm i react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
npm i @react-navigation/native @react-navigation/stack
After you install an npm package, you need to rebuild your project and re-run.
Note that if you currently have more than one programs reading your project files, below command may give error.
If you get any errors,
We should import react-native-gesture-handler at the very beginning of our project(App.js or index.js)
Open app.js and in the first line enter:
Then wrap our whole application with NavigationContainer after we import it.
We also need to create a router which will define the screens for our navigation.
In our router we import createStackNavigator and initialize a stack with that function.
After we initialize our Stack we can call <Stack.Navigator> and create Screens for every page we have in our app.
In Stack.Screen we have two required props: name and component.
Name is the string that we will call our screen with, component is the component that will be rendered when we navigate to the screen.
Since we wrapped our whole app with NavigationContainer in App.js file, we can use navigation functions in all pages.
We created a function and called this.props.navigation.navigate(‘SecondPage’);
Note that ‘SecondPage’ is the name of our other Stack screen.
You can clone this project from here via github.
This was just a setup tutorial, if you want to learn more about react navigation you can find the full documentation here.