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