React Native: How To Navigate Between Screens

Installing React Navigation On Expo

npm add @react-navigation/native @react-navigation/stack
expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

Configuring React Navigation

The highlighted component index.js is at the topmost layer of this app. I am also hovering my cursor over Navigation.js because we will be doing some work in this as well.
In this example the two screens we will navigate between are Home and Options
In this example I’ve disabled the headers because it is my personal preference. Feel free to leave them and see what it looks like on the various screens if you’d like.
default export of Navigation.js

Implementing React Navigation

the highlighted portions are the aforementioned navigation prop. Once this Text is touched or clicked, the app will navigate to the Options screen.
This will render some centered text reading “Go back to Home Screen” that once clicked/touched will navigate the app back to the Home screen. Again the onPress function with navigation is highlighted.




Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store