The widely used navigation library for React Native is: https://reactnavigation.org/!

It features 3 main types of navigation: stacks, bottom tabs and drawers.

Prerequisites

1. You need the main library installed:

npm install @react-navigation/native

1. Need some dependencies installed:

npx expo install react-native-screens react-native-safe-area-context

1. Wrap your app in <NavigationContainer>:

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';

export default function App() {
  return (
    <NavigationContainer>
			{/* Navigation code here */}
		</NavigationContainer>
  );
}

Should the above steps be outdated, search for up to date instructions on the official doc: https://reactnavigation.org/docs/getting-started/

Stack Navigation

Principle

It acts like a stack. Last screen in is first screen out (LIFO).

You can stack multiple screens on top of each other.

You can go back to previous screens by removing the screens on top of the stack.

Examples

iOS Settings

React Native sample implementation

Installation

npm install @react-navigation/native-stack

Code