react-navigation

import {enableFreeze, enableScreens} from '@amazon-devices/react-native-screens';
import {NavigationContainer} from '@amazon-devices/react-navigation__native';
import {createStackNavigator, StackNavigationOptions} from '@amazon-devices/react-navigation__stack';
import * as React from 'react';
import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';

function generateRandomColors(n: number): string[] {
  const generatedColors: string[] = [];

  for (let i = 0; i < n; i++) {
    const red = Math.floor(Math.random() * 128 + 64);
    const green = Math.floor(Math.random() * 128 + 64);
    const blue = Math.floor(Math.random() * 128 + 64);
    const hex = `#${red.toString(16).padStart(2, '0')}${green
      .toString(16)
      .padStart(2, '0')}${blue.toString(16).padStart(2, '0')}`;
    generatedColors.push(hex);
  }

  return generatedColors;
}

enableScreens();
enableFreeze();

const Stack = createStackNavigator();

const styles = StyleSheet.create({
  screenContainer: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontSize: 30,
  },
  button: {
    width: 200,
    height: 100,
    alignItems: 'center',
    justifyContent: 'center',
  },
  buttonContainer: {
    flexWrap: 'wrap',
  },
});

const numberOfScreens = 4;

const colors = generateRandomColors(numberOfScreens);

const Screen = ({navigation, route}: {navigation: any; route: any}) => {
  const {id} = route.params;
  return (
    <View style={[styles.screenContainer, {backgroundColor: colors[id]}]}>
      <Text style={styles.text}>SCREEN {id}</Text>
      <View style={styles.buttonContainer}>
        {colors.map((color, buttonId) => (
          <TouchableOpacity
            onPress={() => navigation.navigate('Screen' + buttonId)}>
            <View style={[styles.button, {backgroundColor: color}]}>
              <Text>Go to screen #{buttonId}</Text>
            </View>
          </TouchableOpacity>
        ))}
        <TouchableOpacity onPress={() => navigation.goBack()}>
          <View style={[styles.button, {backgroundColor: 'white'}]}>
            <Text>{'<- Go back'}</Text>
          </View>
        </TouchableOpacity>
      </View>
    </View>
  );
};

const screenOptions: StackNavigationOptions = { animation: 'default' };
export const App = () => (
  <NavigationContainer>
    <Stack.Navigator screenOptions={screenOptions} detachInactiveScreens>
      {colors.map((_, id) => (
        <Stack.Screen
          key={id}
          name={'Screen' + id}
          component={Screen}
          initialParams={{id}}
          options={screenOptions}
        />
      ))}
    </Stack.Navigator>
  </NavigationContainer>
);

import {enableFreeze, enableScreens} from '@amazon-devices/react-native-screens';
import {createNativeStackNavigator} from '@amazon-devices/react-navigation__native-stack';
import {NavigationContainer} from '@amazon-devices/react-navigation__native';
import * as React from 'react';
import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';

function generateRandomColors(n: number): string[] {
  const generatedColors: string[] = [];

  for (let i = 0; i < n; i++) {
    const red = Math.floor(Math.random() * 128 + 64);
    const green = Math.floor(Math.random() * 128 + 64);
    const blue = Math.floor(Math.random() * 128 + 64);
    const hex = `#${red.toString(16).padStart(2, '0')}${green
      .toString(16)
      .padStart(2, '0')}${blue.toString(16).padStart(2, '0')}`;
    generatedColors.push(hex);
  }

  return generatedColors;
}

enableScreens();
enableFreeze();

const Stack = createNativeStackNavigator();

const styles = StyleSheet.create({
  screenContainer: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontSize: 30,
  },
  button: {
    width: 200,
    height: 100,
    alignItems: 'center',
    justifyContent: 'center',
  },
  buttonContainer: {
    flexWrap: 'wrap',
  },
});

const numberOfScreens = 4;

const colors = generateRandomColors(numberOfScreens);

const Screen = ({navigation, route}: {navigation: any; route: any}) => {
  const {depth, id} = route.params;
  return (
    <View
      style={[
        styles.screenContainer,
        {backgroundColor: colors[id], margin: 20 * depth},
      ]}>
      <Text style={styles.text}>SCREEN {id}</Text>
      <View style={styles.buttonContainer}>
        {colors.map((color, buttonId) => (
          <TouchableOpacity
            onPress={() =>
              navigation.navigate('Screen' + buttonId, {depth: depth + 1})
            }>
            <View style={[styles.button, {backgroundColor: color}]}>
              <Text>Go to screen #{buttonId}</Text>
            </View>
          </TouchableOpacity>
        ))}
        <TouchableOpacity onPress={() => navigation.goBack()}>
          <View style={[styles.button, {backgroundColor: 'white'}]}>
            <Text>{'<- Go back'}</Text>
          </View>
        </TouchableOpacity>
      </View>
    </View>
  );
};

const screenOptions = {
  headerShown: false,
};

export const App = () => (
  <NavigationContainer>
    <Stack.Navigator screenOptions={screenOptions}>
      {colors.map((_, id) => (
        <Stack.Screen
          key={id}
          name={'Screen' + id}
          component={Screen}
          initialParams={{id, depth: 0}}
          options={screenOptions}
        />
      ))}
    </Stack.Navigator>
  </NavigationContainer>
);

import { enableScreens } from '@amazon-devices/react-native-screens';
import { createBottomTabNavigator } from '@amazon-devices/react-navigation__bottom-tabs';
import { NavigationContainer } from '@amazon-devices/react-navigation__native';
import * as React from 'react';
import { Text, TouchableOpacity,View } from 'react-native';

enableScreens();

function HomeScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home!</Text>
    </View>
  );
}

function SettingsScreen() {
  const [text, setText] = React.useState("Press me to check if touches work");
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <TouchableOpacity onPress={() => setText("Touching works!")}>
        <View style={{ width: 200, height: 200, backgroundColor: "skyblue" }}>
          <Text>{text}</Text>
        </View>
      </TouchableOpacity>
      <Text>Settings!</Text>
    </View>
  );
}

const Tab = createBottomTabNavigator();

export const App = () => {
  return (
    <NavigationContainer>
      <Tab.Navigator detachInactiveScreens>
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

import { enableFreeze, enableScreens } from '@amazon-devices/react-native-screens';
import { createMaterialTopTabNavigator } from '@amazon-devices/react-navigation__material-top-tabs';
import { NavigationContainer } from '@amazon-devices/react-navigation__native';
import * as React from 'react';
import { Text, TouchableOpacity,View } from 'react-native';

enableScreens();
enableFreeze();

function HomeScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home!</Text>
    </View>
  );
}

function SettingsScreen() {
  const [text, setText] = React.useState("Press me to check if touches work");
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <TouchableOpacity onPress={() => setText("Touching works!")}>
        <View style={{ width: 200, height: 200, backgroundColor: "skyblue" }}>
          <Text>{text}</Text>
        </View>
      </TouchableOpacity>
      <Text>Settings!</Text>
    </View>
  );
}

const Tab =
createMaterialTopTabNavigator();

export const App = () => {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

module.exports = {
  presets: [...],
  plugins: ['@amazon-devices/react-native-reanimated/plugin'] // add it here
};

npm start -- --reset-cache

import {GestureHandlerRootView} from '@amazon-devices/react-native-gesture-handler';
import {createDrawerNavigator} from '@amazon-devices/react-navigation__drawer';
import {NavigationContainer} from '@amazon-devices/react-navigation__native';
import React, {useState} from 'react';
import {Text, TouchableOpacity, View} from 'react-native';

function HomeScreen() {
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Text>Home!</Text>
    </View>
  );
}

function SettingsScreen() {
  const [text, setText] = useState('Press me to check if touches work');
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <TouchableOpacity onPress={() => setText('Touching works!')}>
        <View style={{width: 200, height: 200, backgroundColor: 'skyblue'}}>
          <Text>{text}</Text>
        </View>
      </TouchableOpacity>
      <Text>Settings!</Text>
    </View>
  );
}

const Drawer = createDrawerNavigator();

export const App = () => (
  <GestureHandlerRootView style={{flex: 1, backgroundColor: 'white'}}>
    <NavigationContainer>
      <Drawer.Navigator initialRouteName="Home" detachInactiveScreens={false}>
        <Drawer.Screen name="Home" component={HomeScreen} />
        <Drawer.Screen name="Settings" component={SettingsScreen} />
      </Drawer.Navigator>
    </NavigationContainer>
  </GestureHandlerRootView>
);