feat: use gesture handler and reanimated for performance

BREAKING CHANGE: this removes some props which are difficult/impossible to implement with reanimated,
and requires linking [react-native-gesture-handler](https://github.com/kmagiera/react-native-gesture-handler)
and [react-native-reanimated](https://github.com/kmagiera/react-native-reanimated)

List of breaking changes:

- The `renderPager` prop is removed. Now there's only one pager implemented with gesture handler.
- The `animationEnabled` prop is removed. It's not straightforward to implement, and doesn't make much sense in the scope of this library.
- The `canJumpToTab` prop is removed
- Few props such as `onSwipeStart`, `onSwipeEnd` and `onAnimationEnd` have been removed (if you have ideas on how to implement these, happy to add them back)
- The `position` prop received by the `renderTabBar` and `renderScene` are now [reanimated](https://github.com/kmagiera/react-native-reanimated) nodes, so you'll need to migrate your custom tab bar to use reanimated. This should mostly be straightforward.
- No react-native-web support because both gesture handler and reanimated are native deps. I can implement the pager with pan responder for web, but can't do much for reanimated

.circleci/config.yml

@@ -58,6 +58,3 @@ workflows:
       - lint-and-flow:
           requires:
             - install-dependencies
-      - unit-tests:
-          requires:
-            - install-dependencies

.flowconfig

@@ -46,10 +46,13 @@
 .*/node_modules/prettier/.*
 .*/node_modules/eslint.*
 
+; Ignore modules with errors
+.*/node_modules/@expo/.*
+
 [untyped]
 .*/node_modules/expo/.*
 .*/node_modules/xdl/.*
-.*/node_modules/react-native-gesture-handler/.*
+.*/node_modules/react-native-view-shot/.*
 
 [include]
 

example/.babelrc

@@ -5,7 +5,7 @@
   "plugins": [
     ["module-resolver", {
       "alias": {
-        "react-native-tab-view": "../src"
+        "react-native-tab-view": "../src/index.js"
       }
     }]
   ]

example/README.md

@@ -1,8 +1,8 @@
-## Run the example
+# Run the example
 
 - [View it with Expo](https://expo.io/@satya164/react-native-tab-view-demos)
 - Run the example locally
-  + Clone the repository and `cd` to this directory
-  + Run `yarn` to install the dependencies
-  + Run `yarn start` to start the packager
-  + Scan the QR Code with the Expo app
+  - Clone the repository and `cd` to this directory
+  - Run `yarn` to install the dependencies
+  - Run `yarn start` to start the packager
+  - Scan the QR Code with the Expo app

example/app.json

@@ -3,7 +3,8 @@
     "name": "React Native Tab View Demos",
     "description": "Demonstrates the various capabilities of react-native-tab-view: https://github.com/react-native-community/react-native-tab-view",
     "slug": "react-native-tab-view-demos",
-    "sdkVersion": "27.0.0",
+    "privacy": "public",
+    "sdkVersion": "32.0.0",
     "version": "1.0.0",
     "primaryColor": "#2196f3",
     "icon": "assets/icon.png",
@@ -15,7 +16,7 @@
       "assetExts": [
         "ttf"
       ],
-      "config": "./rn-cli.config.js",
+      "config": "./metro.config.js",
       "projectRoots": ""
     }
   }

example/metro.config.js

@@ -0,0 +1,28 @@
+/* eslint-disable import/no-commonjs */
+
+const path = require('path');
+const blacklist = require('metro-config/src/defaults/blacklist');
+const pak = require('../package.json');
+const escape = require('escape-string-regexp');
+
+const peerDependencies = Object.keys(pak.peerDependencies);
+
+module.exports = {
+  projectRoot: __dirname,
+  watchFolders: [path.resolve(__dirname, '..')],
+
+  resolver: {
+    blacklistRE: blacklist([
+      new RegExp(
+        `^${escape(path.resolve(__dirname, '..', 'node_modules'))}\\/.*$`
+      ),
+      new RegExp(
+        `^${escape(
+          path.resolve(__dirname, '..', 'docs', 'node_modules')
+        )}\\/.*$`
+      ),
+    ]),
+
+    providesModuleNodeModules: ['@babel/runtime', ...peerDependencies],
+  },
+};

example/package.json

@@ -2,11 +2,11 @@
   "name": "tabviewexample",
   "version": "0.0.1",
   "private": true,
-  "main": "App.js",
+  "main": "src/App.js",
   "scripts": {
-    "start": "react-native-scripts start",
-    "android": "react-native-scripts android",
-    "ios": "react-native-scripts ios"
+    "start": "expo start",
+    "android": "expo android",
+    "ios": "expo ios"
   },
   "dependencies": {
     "@expo/vector-icons": "^9.0.0",
@@ -21,7 +21,6 @@
     "glob-to-regexp": "^0.4.0"
   },
   "resolutions": {
-    "**/prop-types": "15.6.1",
-    "**/react": "16.3.1"
+    "**/react": "16.5.0"
   }
 }