Add native stack example

example/src/App.tsx

@@ -1,10 +1,14 @@
 import 'react-native-gesture-handler';
 import * as React from 'react';
 import { DevSettings } from 'react-native';
+import { enableScreens } from 'react-native-screens';
 import AsyncStorage from '@react-native-community/async-storage';
 import ReactNavigation4Example from './ReactNavigation4Example';
 import ReactNavigation5Example from './ReactNavigation5Example';
 import SimpleExample from './SimpleExample';
+import NativeStackExample from './NativeStackExample';
+
+enableScreens();
 
 const STORAGE_KEY = 'rnsac-current-example';
 
@@ -40,6 +44,9 @@ export default function App() {
     DevSettings.addMenuItem('Show React Navigation 5 Example', () => {
       setCurrentExample('react-navigation-5');
     });
+    DevSettings.addMenuItem('Show Native Stack Example', () => {
+      setCurrentExample('native-stack');
+    });
   }, []);
 
   switch (currentExample) {
@@ -49,6 +56,8 @@ export default function App() {
       return <ReactNavigation4Example />;
     case 'react-navigation-5':
       return <ReactNavigation5Example />;
+    case 'native-stack':
+      return <NativeStackExample />;
     default:
       return null;
   }

example/src/NativeStackExample.tsx

@@ -0,0 +1,74 @@
+import * as React from 'react';
+import { Text, View, Button } from 'react-native';
+import { NavigationContainer } from '@react-navigation/native';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { createNativeStackNavigator } from 'react-native-screens/native-stack';
+import type { StackScreenProps } from '@react-navigation/stack';
+
+type Routes = {
+  Home: undefined;
+  Details: undefined;
+  Settings: undefined;
+};
+
+function HomeScreen({ navigation }: StackScreenProps<Routes, 'Home'>) {
+  return (
+    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+      <Text>Home Screen</Text>
+      <Button
+        title="Go to Details"
+        onPress={() => navigation.navigate('Details')}
+      />
+    </View>
+  );
+}
+
+function SettingsScreen({ navigation }: StackScreenProps<Routes, 'Settings'>) {
+  return (
+    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+      <Text>Settings Screen</Text>
+      <Button
+        title="Go to Details"
+        onPress={() => navigation.navigate('Details')}
+      />
+    </View>
+  );
+}
+
+const Tab = createBottomTabNavigator();
+
+function TabsScreen() {
+  return (
+    <Tab.Navigator>
+      <Tab.Screen name="Home" component={HomeScreen} />
+      <Tab.Screen name="Settings" component={SettingsScreen} />
+    </Tab.Navigator>
+  );
+}
+
+function DetailsScreen({ navigation }: StackScreenProps<Routes, 'Details'>) {
+  return (
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <Text>Details Screen</Text>
+      <Button
+        title="Go to Details... again"
+        onPress={() => navigation.push('Details')}
+      />
+      <Button title="Go to Home" onPress={() => navigation.navigate('Home')} />
+      <Button title="Go back" onPress={() => navigation.goBack()} />
+    </View>
+  );
+}
+
+const Stack = createNativeStackNavigator();
+
+export default function NativeStackExample() {
+  return (
+    <NavigationContainer>
+      <Stack.Navigator>
+        <Stack.Screen name="Tabs" component={TabsScreen} />
+        <Stack.Screen name="Details" component={DetailsScreen} />
+      </Stack.Navigator>
+    </NavigationContainer>
+  );
+}