Package Exports

@react-navigation/native-stack

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@react-navigation/native-stack) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

`@react-navigation/native-stack`

Stack navigator for React Native using native primitives for navigation. Uses react-native-screens under the hood.

Expo is currently not supported as it includes an older version of react-native-screens.

Installation

Open a Terminal in your project's folder and run,

yarn add @react-navigation/core @react-navigation/native-stack

Now we need to install react-native-screens.

yarn add react-native-screens

To complete the linking on iOS, make sure you have Cocoapods installed. Then run:

cd ios
pod install
cd ..

To finalize installation of react-native-screens for Android, add the following two lines to dependencies section in android/app/build.gradle:

implementation 'androidx.appcompat:appcompat:1.1.0-rc01'
implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02'

Make sure to enable react-native-screens. This needs to be done before our app renders. To do it, add the following code in your entry file (e.g. App.js):

import { useScreens } from 'react-native-screens';

useScreens();

Usage

import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="home" component={Home} options={{ title: 'Home' }} />
      <Stack.Screen name="feed" component={Feed} options={{ title: 'Feed' }} />
      <Stack.Screen
        name="profile"
        component={Profile}
        options={{ title: 'Profile' }}
      />
    </Stack.Navigator>
  );
}