Skip to main content

Introduction

React Navigation is a popular library for organizing routing and navigation in a React Native application.

This library helps to solve the problem of navigating between different screens and using shared data among different screens.

Prerequisites#

If you're already familiar with JavaScript, React, and React Native, then you can get started quickly with React Navigation! If not, we strongly recommend that you get the basic knowledge first and then come back here when you're done.

Courses that can help you:

This guide is an extension of the course on React Native

Minimum Requirements#

React Navigation 6 requires at least response-native@0.63.0. If you are using Expo, your SDK version must be at least 41.

Installation#

Install the required packages to your React Native project:

npm install @react-navigation/native@next

React Navigation consists of some basic utilities that are then used by navigators to create the navigation structure in your application. Don't worry about it now, everything will be clear soon! To get started with the installation, let's also install and configure the dependencies used by most navigators, after which we can move on by starting to write some code.

The libraries we will install now arereact-native-gesture-handler, react-native-reanimated, react-native-screens and react-native-safe-area-context. If you already have these libraries installed and the latest version, you're done! Otherwise, read on.

Installing dependencies into an Expo managed project#

In your project directory, run:

expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context

This will install versions of those libraries that are compatible.

Installing dependencies into a React Native project#

In your project directory, run:

npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context
info

After installation, you may receive warnings related to peer dependencies. They are usually caused by the wrong version range listed in some packages. You can safely ignore most of the warnings while your application is being built.

If you are on Mac and developing for iOS, you need to install modules (via Cocoapods) in order to complete the linking.

npx pod-install ios

Payment#

Now you are on a stripped-down version of the site, after subscribing to Patreon, you will get full access to the training course, as well as access to our server's private channels in Discord.

Download our mobile application or get tested in our JavaScript telegram bot, and also subscribe to our news.

Become a Patron!

Sumerian school

Contributors โœจ#

Thanks goes to these wonderful people (emoji key):


Dmitriy Vasilev

๐Ÿ“–๐Ÿ’ฒ

Become a Patron!