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 dependency in package.json file:

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

Reinstall npm packages using the 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`	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 animation is 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);

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 other libraries, see Supported Third-Party Libraries and Services.

​Installation

​Examples

​API reference

​Components

​Implementation details

​Disabling react-native-screens

​Supported versions

​Additional resources