react-native-screens - Amazon Vega Docs

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

React Native 0.72
React Native 0.83

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

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

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"

}

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`	A container for one or more `Screen` components.
`Screen`	A container for views to display on a navigation screen.
`ScreenStack`	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 aren’t supported.

Implementation details

The following 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
and other header components (, ScreenStackHeaderRightView, , ) 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):

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

enableScreens(false);

Additional resources

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

​Installation

​Examples

​API reference

​Components

​Implementation details

​Disabling react-native-screens

​Additional resources