Getting started
What follows within the Fundamentals section of this documentation is a tour of the most important aspects of React Navigation. It should cover enough for you to know how to build your typical small mobile application, and give you the background that you need to dive deeper into the more advanced parts of React Navigation.
Pre-requisites
If you're already familiar with JavaScript, React and React Native, then you'll be able to get moving with React Navigation quickly! If not, we highly recommend you to gain some basic knowledge first, then come back here when you're done.
Here are some resources to help you out:
- React Native Express (Sections 1 to 4)
- Main Concepts of React
- React Hooks
- React Context (Advanced)
Installation
Install the required packages in your React Native project:
- npm
- Yarn
- pnpm
npm install @react-navigation/native@^5.x
yarn add @react-navigation/native@^5.x
pnpm add @react-navigation/native@^5.x
React Navigation is made up of some core utilities and those are then used by navigators to create the navigation structure in your app. Don't worry too much about this for now, it'll become clear soon enough! To frontload the installation work, let's also install and configure dependencies used by most navigators, then we can move forward with starting to write some code.
The libraries we will install now are react-native-gesture-handler
, react-native-reanimated
, react-native-screens
and react-native-safe-area-context
and @react-native-community/masked-view
. If you already have these libraries installed and at the latest version, you are done here! Otherwise, read on.
Installing dependencies into an Expo managed project
In your project directory, run:
npx expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view
This will install versions of these libraries that are compatible.
You can now continue to "Hello React Navigation" to start writing some code.