feat: initial version of native stack (#102)

packages/example/src/Screens/NativeStack.expo.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+
+export default function NativeStack() {
+  return (
+    <View style={styles.container}>
+      <Text style={styles.text}>Currently not supported on Expo :(</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: '#eceff1',
+  },
+  text: {
+    fontSize: 16,
+    color: '#999',
+  },
+});

packages/example/src/Screens/NativeStack.tsx

@@ -0,0 +1,117 @@
+import * as React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { Button } from 'react-native-paper';
+// eslint-disable-next-line import/no-unresolved
+import { useScreens } from 'react-native-screens';
+import { RouteProp, ParamListBase } from '@react-navigation/core';
+import { StackNavigationProp } from '@react-navigation/stack';
+import {
+  createNativeStackNavigator,
+  NativeStackNavigationProp,
+} from '@react-navigation/native-stack';
+import Article from '../Shared/Article';
+import Albums from '../Shared/Albums';
+
+type NativeStackParams = {
+  article: { author: string };
+  album: undefined;
+};
+
+type NativeStackNavigation = NativeStackNavigationProp<NativeStackParams>;
+
+const ArticleScreen = ({
+  navigation,
+  route,
+}: {
+  navigation: NativeStackNavigation;
+  route: RouteProp<NativeStackParams, 'article'>;
+}) => (
+  <React.Fragment>
+    <View style={styles.buttons}>
+      <Button
+        mode="contained"
+        onPress={() => navigation.push('album')}
+        style={styles.button}
+      >
+        Push album
+      </Button>
+      <Button
+        mode="outlined"
+        onPress={() => navigation.goBack()}
+        style={styles.button}
+      >
+        Go back
+      </Button>
+    </View>
+    <Article author={{ name: route.params.author }} />
+  </React.Fragment>
+);
+
+const AlbumsScreen = ({
+  navigation,
+}: {
+  navigation: NativeStackNavigation;
+}) => (
+  <React.Fragment>
+    <View style={styles.buttons}>
+      <Button
+        mode="contained"
+        onPress={() => navigation.push('article', { author: 'Babel fish' })}
+        style={styles.button}
+      >
+        Push article
+      </Button>
+      <Button
+        mode="outlined"
+        onPress={() => navigation.goBack()}
+        style={styles.button}
+      >
+        Go back
+      </Button>
+    </View>
+    <Albums />
+  </React.Fragment>
+);
+
+const NativeStack = createNativeStackNavigator<NativeStackParams>();
+
+type Props = {
+  navigation: StackNavigationProp<ParamListBase>;
+};
+
+export default function NativeStackScreen({ navigation }: Props) {
+  navigation.setOptions({
+    headerShown: false,
+  });
+
+  return (
+    <NativeStack.Navigator>
+      <NativeStack.Screen
+        name="article"
+        component={ArticleScreen}
+        options={({ route }) => ({
+          title: `Article by ${route.params.author}`,
+        })}
+        initialParams={{ author: 'Gandalf' }}
+      />
+      <NativeStack.Screen
+        name="album"
+        component={AlbumsScreen}
+        options={{ title: 'Album' }}
+      />
+    </NativeStack.Navigator>
+  );
+}
+
+// eslint-disable-next-line react-hooks/rules-of-hooks
+useScreens(true);
+
+const styles = StyleSheet.create({
+  buttons: {
+    flexDirection: 'row',
+    padding: 8,
+  },
+  button: {
+    margin: 8,
+  },
+});

packages/example/src/Screens/SimpleStack.tsx

@@ -5,6 +5,7 @@ import { RouteProp, ParamListBase } from '@react-navigation/core';
 import {
   createStackNavigator,
   StackNavigationProp,
+  StackNavigationOptions,
 } from '@react-navigation/stack';
 import Article from '../Shared/Article';
 import Albums from '../Shared/Albums';
@@ -77,7 +78,7 @@ const AlbumsScreen = ({
 const SimpleStack = createStackNavigator<SimpleStackParams>();
 
 type Props = {
-  options?: React.ComponentProps<typeof SimpleStack.Navigator>;
+  options?: StackNavigationOptions;
   navigation: StackNavigationProp<ParamListBase>;
 };
 

packages/example/src/Shared/Albums.tsx

@@ -28,6 +28,10 @@ export default function Albums() {
         // eslint-disable-next-line react/no-array-index-key
         <Image key={i} source={source} style={styles.cover} />
       ))}
+      {COVERS.map((source, i) => (
+        // eslint-disable-next-line react/no-array-index-key
+        <Image key={i + 'F'} source={source} style={styles.cover} />
+      ))}
     </ScrollView>
   );
 }

packages/example/src/index.tsx

@@ -23,6 +23,7 @@ import {
 } from '@react-navigation/stack';
 
 import SimpleStack from './Screens/SimpleStack';
+import NativeStack from './Screens/NativeStack';
 import ModalPresentationStack from './Screens/ModalPresentationStack';
 import BottomTabs from './Screens/BottomTabs';
 import MaterialTopTabsScreen from './Screens/MaterialTopTabs';
@@ -44,6 +45,7 @@ type RootStackParamList = {
 
 const SCREENS = {
   SimpleStack: { title: 'Simple Stack', component: SimpleStack },
+  NativeStack: { title: 'Native Stack', component: NativeStack },
   ModalPresentationStack: {
     title: 'Modal Presentation Stack',
     component: ModalPresentationStack,