as

Settings
Sign out
Notifications
Alexa
Amazon Appstore
AWS
Documentation
Support
Contact Us
My Cases
Get Started
Design and Develop
Publish
Reference
Support

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

  1. Add the dependency in package.json file:

    Copied to clipboard.

     "dependencies": {
         ...
         "@amazon-devices/react-native-screens": "~2.0.0"
     }
    
  2. Reinstall npm packages using npm install command.

Examples

Copied to clipboard.


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):

Copied to clipboard.

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