chore: add native stack navigator

Author: Piotr Trocki

example/ios/Podfile.lock

@@ -185,7 +185,7 @@ PODS:
     - React-cxxreact (= 0.63.4)
     - React-jsi (= 0.63.4)
   - React-jsinspector (0.63.4)
-  - react-native-pager-view (5.4.11):
+  - react-native-pager-view (5.4.15):
     - React-Core
   - react-native-safe-area-context (3.2.0):
     - React-Core
@@ -393,11 +393,11 @@ EXTERNAL SOURCES:
 
 SPEC CHECKSUMS:
   boost-for-react-native: 39c7adb57c4e60d6c5479dd8623128eb5b3f0f2c
-  DoubleConversion: cde416483dac037923206447da6e1454df403714
+  DoubleConversion: 831926d9b8bf8166fd87886c4abab286c2422662
   FBLazyVector: 3bb422f41b18121b71783a905c10e58606f7dc3e
   FBReactNativeSpec: f2c97f2529dd79c083355182cc158c9f98f4bd6e
   Folly: b73c3869541e86821df3c387eb0af5f65addfab4
-  glog: 40a13f7840415b9a77023fbcae0f1e6f43192af3
+  glog: 476ee3e89abb49e07f822b48323c51c57124b572
   RCTRequired: 082f10cd3f905d6c124597fd1c14f6f2655ff65e
   RCTTypeSafety: 8c9c544ecbf20337d069e4ae7fd9a377aadf504b
   React: b0a957a2c44da4113b0c4c9853d8387f8e64e615
@@ -408,7 +408,7 @@ SPEC CHECKSUMS:
   React-jsi: a0418934cf48f25b485631deb27c64dc40fb4c31
   React-jsiexecutor: 93bd528844ad21dc07aab1c67cb10abae6df6949
   React-jsinspector: 58aef7155bc9a9683f5b60b35eccea8722a4f53a
-  react-native-pager-view: 7f00d63688f7df9fad86dfb0154814419cc5eb8d
+  react-native-pager-view: b1914469643f40042e65d78cbf3d3dfebd6fb0d9
   react-native-safe-area-context: f0906bf8bc9835ac9a9d3f97e8bde2a997d8da79
   React-RCTActionSheet: 89a0ca9f4a06c1f93c26067af074ccdce0f40336
   React-RCTAnimation: 1bde3ecc0c104c55df246eda516e0deb03c4e49b

example/package.json

@@ -18,6 +18,7 @@
   "dependencies": {
     "@react-native-community/masked-view": "^0.1.10",
     "@react-navigation/native": "^5.8.10",
+    "@react-navigation/native-stack": "5.0.4",
     "@react-navigation/stack": "^5.12.8",
     "react": "16.13.1",
     "react-native": "0.63.4",

example/src/App.tsx

@@ -1,5 +1,16 @@
+import { enableScreens } from 'react-native-screens';
+// run this before any screen render(usually in App.js)
+enableScreens();
+
 import * as React from 'react';
-import { StyleSheet, Text, ScrollView, TouchableOpacity } from 'react-native';
+import {
+  StyleSheet,
+  Text,
+  ScrollView,
+  TouchableOpacity,
+  Button,
+  Alert,
+} from 'react-native';
 import { NavigationContainer, useNavigation } from '@react-navigation/native';
 import { createStackNavigator } from '@react-navigation/stack';
 import { BasicPagerViewExample } from './BasicPagerViewExample';
@@ -18,6 +29,8 @@ import CustomIndicatorExample from './tabView/CustomIndicatorExample';
 import CustomTabBarExample from './tabView/CustomTabBarExample';
 import CoverflowExample from './tabView/CoverflowExample';
 import ReanimatedOnPageScrollExample from './ReanimatedOnPageScrollExample';
+import NativeStackExample from './NativeStackExample';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
 
 const examples = [
   { component: BasicPagerViewExample, name: 'Basic Example' },
@@ -38,6 +51,10 @@ const examples = [
     component: NestPagerView,
     name: 'Nest PagerView Example',
   },
+  {
+    component: NativeStackExample,
+    name: 'NativeStackExample',
+  },
   { component: ScrollableTabBarExample, name: 'ScrollableTabBarExample' },
   { component: AutoWidthTabBarExample, name: 'AutoWidthTabBarExample' },
   { component: TabBarIconExample, name: 'TabBarIconExample' },
@@ -72,19 +89,51 @@ function App() {
 
 const Stack = createStackNavigator();
 
+const NativeStack = createNativeStackNavigator();
+
 export function Navigation() {
+  const [mode, setMode] = React.useState<'native' | 'js'>('native');
+  const NavigationStack = mode === 'js' ? Stack : NativeStack;
   return (
     <NavigationContainer>
-      <Stack.Navigator initialRouteName="PagerView Example">
-        <Stack.Screen name="PagerView Example" component={App} />
+      <NavigationStack.Navigator initialRouteName="PagerView Example">
+        <NavigationStack.Screen
+          name="PagerView Example"
+          component={App}
+          options={{
+            headerRight: () => (
+              <Button
+                onPress={() =>
+                  Alert.alert(
+                    'Alert',
+                    `Do you want to change to the ${
+                      mode === 'js' ? 'native stack' : 'js stack'
+                    } ?`,
+                    [
+                      { text: 'No', onPress: () => {} },
+                      {
+                        text: 'Yes',
+                        onPress: () => {
+                          setMode(mode === 'js' ? 'native' : 'js');
+                        },
+                      },
+                    ]
+                  )
+                }
+                title={mode === 'js' ? 'JS' : 'NATIVE'}
+                color="orange"
+              />
+            ),
+          }}
+        />
         {examples.map((example, index) => (
-          <Stack.Screen
+          <NavigationStack.Screen
             key={index}
             name={example.name}
             component={example.component}
           />
         ))}
-      </Stack.Navigator>
+      </NavigationStack.Navigator>
     </NavigationContainer>
   );
 }

example/yarn.lock

@@ -1128,6 +1128,11 @@
     query-string "^6.13.6"
     react-is "^16.13.0"
 
+"@react-navigation/[email protected]":
+  version "5.0.4"
+  resolved "https://registry.yarnpkg.com/@react-navigation/native-stack/-/native-stack-5.0.4.tgz#1bf82c529390e7203d65635fc68164b2cbc4093f"
+  integrity sha512-i+5o0v582ZxTDrEDJcud5XI4BmzR+RAYAt592dnFgduO0lwIjch+IY5t+8PGg8n9FEN7dj+ivj1V5kx8ZggFQg==
+
 "@react-navigation/native@^5.8.10":
   version "5.9.3"
   resolved "https://registry.yarnpkg.com/@react-navigation/native/-/native-5.9.3.tgz#3859f439adc9a744b79a98fbc7606bdd459574d5"