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
• Examples
• API reference
  • Components
• Implementation details
  • Disabling react-native-screens
• Supported versions
• Additional resources

Installation

1. Add the dependency in package.json file:

   Copy code Copied to clipboard.

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

2. Reinstall npm packages using npm install command.

Examples

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

Copy code Copied to clipboard.

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

enableScreens(false);

Supported versions

Additional resources

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

Last updated: Sep 30, 2025