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 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 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	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 are not supported.

Known issues and limitations

The following 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

and other header components (, ScreenStackHeaderRightView, , ) are not 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);

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.

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

​Installation

​Examples

​API reference

​Components

​Known issues and limitations

​Disabling react-native-screens

​Supported versions

​Related topics