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.





Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Javascript Variables

Family FitnessTracker

Get started with Next-Gen Javascript

Create the ”Connect Wallet” Button in 5 Minutes — Tutorial With Source Code

Sign in to Metamask button on Rarible.

Sketching in the Browser

10 things you should know about React

The useState hook in React

React JS

A Simple Guide to Mobx — Practical Examples

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
Ryan Schleck

Ryan Schleck

More from Medium

Integrating Google maps with React native

Google Sign in React Native

Swipe Navigation on React Native

Install React Native modules with Expo