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 JavaScript library dependency in the package.json file. Select the tab for your React Native version.

   • React Native 0.72
   • React Native 0.83
   
   

   Copy code Copied to clipboard.

    "dependencies": {
        ...
        "@amazon-devices/react-native-screens": "~2.0.0"
    }
   

   
   

   Copy code Copied to clipboard.

    "dependencies": {
        ...
        "@amazon-devices/react-native-screens": "~3.0.0"
    }
   

2. Reinstall npm packages using the npm install command.

Examples

This example creates a demo app with four identical screens. Each screen shows its number and lets you navigate to any of the four screens or go back.

The example builds screens with react-navigation. To run this demo, you need to install the following navigation dependencies in package.json:

"dependencies": {
    ...
    "@amazon-devices/react-navigation__native": "^8.0.0",
    "@amazon-devices/react-navigation__stack": "^8.0.0"

}

Copy code 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

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 aren't supported.

Implementation details

The following <Screen> component props aren't 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 and none animations are supported)
• stackPresentation
• statusBarAnimation
• statusBarColor
• statusBarHidden
• statusBarStyle
• statusBarTranslucent
• swipeDirection
• transitionDuration
• <ScreenStackHeaderConfig> and other header components (<ScreenStackHeaderCenterView>, ScreenStackHeaderRightView, <ScreenStackHeaderLeftView>, <ScreenStackHeaderSearchBarView>) aren't 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):

Copy code Copied to clipboard.

import { enableScreens } from '@amazon-devices/react-native-screens';

enableScreens(false);

Supported versions

Additional resources

For information on other libraries, see Supported Third-Party Libraries and Services.

Last updated: Jul 21, 2026