chore: reuse the stack code from react navigation 5

The code for the stack is almost the same as v5, with the only differences being the types and the navigation object. To avoid making same changes in 2 places which error-prone, I decided to reuse the same code. Due to the differences, it's not possible to just use it as a dependency, so I followed this approach:
- Copy the source files on post install and apply patches to make it work with React Navigation 4
- When we need to make changes, we can make them in v5 repo and update the version here, most of the time it wouldn't need any extra work
- If we need to make v4 specific changes, we can change the code in vendor/ and then re-generate the patch with `yarn patch`

Author: satya164

.eslintignore

@@ -1,3 +1,4 @@
 node_modules/
 coverage/
 lib/
+vendor/

.gitignore

@@ -51,6 +51,7 @@ android/keystores/debug.keystore
 # Build
 dist/
 generated/
+vendor/
 
 # generated by bob
 lib/

README.md

@@ -47,6 +47,10 @@ While developing, you can run the example app with [Expo](https://expo.io/) to t
 yarn example start
 ```
 
+The code in this repo uses the source from [`@react-navigation/stack`](https://github.com/react-navigation/navigation-ex/tree/master/packages/stack) and patches it to make it usable in React Navigation 4. If you need to make changes, please send a pull request there.
+
+If the change is specifically related to React Navigation 4 integration, change the files in `src/vendor` and then run `yarn patch` to update the patch file with the latest changes.
+
 Make sure your code passes TypeScript and ESLint. Run the following to verify:
 
 ```sh

example/app.json

@@ -3,14 +3,18 @@
     "name": "React Navigation Stack Example",
     "description": "Demonstrates the various capabilities of react-navigation-stack",
     "slug": "react-navigation-stack-demo",
-    "sdkVersion": "35.0.0",
+    "sdkVersion": "36.0.0",
     "version": "1.0.0",
     "primaryColor": "#2196f3",
     "packagerOpts": {
       "config": "./metro.config.js",
       "projectRoots": ""
     },
-    "entryPoint": "node_modules/expo/AppEntry.js"
+    "entryPoint": "node_modules/expo/AppEntry.js",
+    "platforms": [
+      "android",
+      "ios"
+    ]
   },
   "displayName": "React Navigation Stack Example",
   "name": "StackExample"

example/metro.config.js

@@ -1,37 +1,43 @@
 /* eslint-disable import/no-extraneous-dependencies */
 
 const path = require('path');
-const blacklist = require('metro-config/src/defaults/blacklist');
-const project = require('../package.json');
+const fs = require('fs');
 const escape = require('escape-string-regexp');
+const blacklist = require('metro-config/src/defaults/blacklist');
+
+const root = path.resolve(__dirname, '..');
+const pak = JSON.parse(
+  fs.readFileSync(path.join(root, 'package.json'), 'utf8')
+);
 
-const projectDependencies = Object.keys({
-  ...project.dependencies,
-  ...project.peerDependencies,
-});
+const modules = [
+  '@babel/runtime',
+  '@expo/vector-icons',
+  ...Object.keys(pak.dependencies || {}),
+  ...Object.keys(pak.peerDependencies || {}),
+];
 
 module.exports = {
   projectRoot: __dirname,
-  watchFolders: [path.resolve(__dirname, '..')],
+  watchFolders: [root],
 
   resolver: {
     blacklistRE: blacklist([
-      new RegExp(
-        `^${escape(
-          path.resolve(__dirname, 'node_modules', project.name)
-        )}\\/.*$`
-      ),
-      new RegExp(
-        `^${escape(path.resolve(__dirname, '..', 'node_modules'))}\\/.*$`
-      ),
+      new RegExp(`^${escape(path.join(root, 'node_modules'))}\\/.*$`),
     ]),
 
-    providesModuleNodeModules: [
-      '@expo/vector-icons',
-      'react-native-safe-area-context',
-      '@babel/runtime',
-      'react-navigation',
-      ...projectDependencies,
-    ],
+    extraNodeModules: modules.reduce((acc, name) => {
+      acc[name] = path.join(__dirname, 'node_modules', name);
+      return acc;
+    }, {}),
+  },
+
+  transformer: {
+    getTransformOptions: async () => ({
+      transform: {
+        experimentalImportSupport: false,
+        inlineRequires: true,
+      },
+    }),
   },
 };

example/package.json

@@ -9,23 +9,23 @@
     "ios": "react-native run-ios"
   },
   "dependencies": {
-    "@react-native-community/masked-view": "^0.1.1",
-    "expo": "^35.0.0",
-    "expo-asset": "~7.0.0",
-    "expo-barcode-scanner": "~7.0.0",
-    "expo-constants": "~7.0.0",
+    "@react-native-community/masked-view": "0.1.5",
+    "expo": "^36.0.0",
+    "expo-asset": "~8.0.0",
+    "expo-barcode-scanner": "~8.0.0",
+    "expo-constants": "~8.0.0",
     "hoist-non-react-statics": "^3.3.0",
-    "react": "~16.8.3",
-    "react-dom": "~16.8.3",
-    "react-native": "~0.59.10",
-    "react-native-gesture-handler": "~1.3.0",
-    "react-native-maps": "~0.25.0",
+    "react": "16.9.0",
+    "react-dom": "16.9.0",
+    "react-native": "0.61.4",
+    "react-native-gesture-handler": "~1.5.0",
+    "react-native-maps": "0.26.1",
     "react-native-paper": "^2.15.2",
-    "react-native-reanimated": "~1.2.0",
-    "react-native-safe-area-context": "^0.3.6",
+    "react-native-reanimated": "~1.4.0",
+    "react-native-safe-area-context": "0.6.0",
     "react-native-unimodules": "^0.7.0-rc.1",
     "react-native-web": "^0.11.4",
-    "react-native-webview": "7.0.5",
+    "react-native-webview": "7.4.3",
     "react-navigation": "^4.0.7",
     "react-navigation-drawer": "^2.2.2",
     "react-navigation-tabs": "^2.5.5"

example/src/ModalStack.tsx

@@ -11,7 +11,7 @@ import {
   createStackNavigator,
   CardStyleInterpolators,
   NavigationStackScreenProps,
-  CardStyleInterpolator,
+  StackCardStyleInterpolator,
 } from 'react-navigation-stack';
 import Animated from 'react-native-reanimated';
 
@@ -21,7 +21,7 @@ const gestureResponseDistance = {
   vertical: Dimensions.get('window').height,
 };
 
-const forVerticalInvertedIOS: CardStyleInterpolator = ({
+const forVerticalInvertedIOS: StackCardStyleInterpolator = ({
   current: { progress },
   layouts: { screen },
 }) => {