react-native-screens
react-native-screens
aims to expose native navigation container components to React Native. It is not designed to be used as a standalone library but rather as a dependency of a full-featured navigation library.
Installation
- Add the dependency in package.json file:
"dependencies": { ... "@amazon-devices/react-native-screens": "~2.0.0" }
- Reinstall npm packages using
npm install
command.
Examples
import { enableFreeze, enableScreens } from '@amazon-devices/react-native-screens';
import { NavigationContainer } from '@amazon-devices/react-navigation__native';
import { createStackNavigator } from '@amazon-devices/react-navigation__stack';
import * as React from 'react';
import {
StyleSheet,
Text,
TouchableOpacity,
View
} from 'react-native';
enableScreens();
enableFreeze();
const Stack = createStackNavigator();
//@ts-ignore
const DemoScreen = ({ navigation, route }) => {
const { id } = route.params;
return (
<View>
<Text>SCREEN {id}</Text>
{[0,1,2,3].map((buttonId) => (
<TouchableOpacity onPress={() => navigation.navigate('Screen' + buttonId)}>
<Text>Go to screen #{buttonId}</Text>
</TouchableOpacity>
))}
<TouchableOpacity onPress={() => navigation.goBack()}>
<Text>{"<- Go back"}</Text>
</TouchableOpacity>
</View>
)
}
const screenOptions = { animationEnabled: true }
export const App = () => (
<NavigationContainer>
<Stack.Navigator screenOptions={screenOptions} detachInactiveScreens>
<Stack.Screen key={0} name={"Screen" + 0} component={DemoScreen} initialParams={{ id: 0 }} options={screenOptions} />
<Stack.Screen key={1} name={"Screen" + 1} component={DemoScreen} initialParams={{ id: 1 }} options={screenOptions} />
<Stack.Screen key={2} name={"Screen" + 2} component={DemoScreen} initialParams={{ id: 2 }} options={screenOptions} />
<Stack.Screen key={3} name={"Screen" + 3} component={DemoScreen} initialParams={{ id: 3 }} options={screenOptions} />
</Stack.Navigator>
</NavigationContainer>
)
API reference
Components
Component Name | Description |
---|---|
ScreenContainer |
This component is a container for one or more Screen components. |
Screen |
This component is a container for views we want to display on a navigation screen. |
ScreenStack |
Screen stack component expects one or more Screen components as direct children and renders them in a platform-native stack container. |
React Native for Vega uses react-native-screens to add support for native screens and supports the same APIs as react-native-screens apis.
iOS, Android, and Windows-specific props are not supported.
Implementation details
- The following
<Screen>
component props are not supported (most are iOS/Android specific):customAnimationOnSwipe
fullScreenSwipeEnabled
gestureEnabled
gestureResponseDistance
hideKeyboardOnSwipe
homeIndicatorHidden
nativeBackButtonDismissalEnabled
navigationBarColor
navigationBarHidden
onHeaderBackButtonClicked
onNativeDismissCancelled
preventNativeDismiss
replaceAnimation
screenOrientation
sheetAllowedDetents
sheetExpandsWhenScrolledToEdge
sheetCornerRadius
sheetGrabberVisible
sheetLargestUndimmedDetent
stackAnimation
(only fade animation is supported)stackPresentation
statusBarAnimation
statusBarColor
statusBarHidden
statusBarStyle
statusBarTranslucent
swipeDirection
transitionDuration
<ScreenStackHeaderConfig>
and other header components (<ScreenStackHeaderCenterView>
,ScreenStackHeaderRightView
,<ScreenStackHeaderLeftView>
,<ScreenStackHeaderSearchBarView>
) are not supported
Disabling react-native-screens
If you'd like to disable native screens support and use plain React Native Views add the following code in your entry file (App.js):
import { enableScreens } from '@amazon-devices/react-native-screens';
enableScreens(false);
Supported versions
Package name | Amazon NPM library version | OSS NPM library version | Vega OS build number | Vega SDK version | Release notes |
---|---|---|---|---|---|
@amazon-devices/react-native-screens |
2.0.0+3.25.0 | 3.25.0 | OS 1.1 (201010435950) |
0.19 | Released as a system distributed library. Backward-compatibility checks are not required on the initial release. |
Additional resources
For information on additional libraries, see Supported Third-Party Libraries and Services.
Last updated: Sep 30, 2025