react-native-screens - Amazon Vega Docs

The react-native-screens library exposes native navigation container components to React Native. This library isn’t a standalone library, but it’s a dependency of a full-featured navigation library.

Installation

Add the dependency in the 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.

Disabling react-native-screens

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

Known issues and limitations

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

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 aren’t required on the initial release.

Supported Third-Party Libraries and Services.

​Installation

​Examples

​API reference

​Components

​Disabling react-native-screens

​Known issues and limitations

​Supported versions

​Related topics