JSPM

@react-navigation/native-stack

5.0.0-alpha.13
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 1229503
  • Score
    100M100P100Q203708F
  • License MIT

Native stack navigator component for iOS and Android

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>
  );
}