chore: upgrade to latest react-native-tab-view

packages/tabs/.flowconfig

@@ -5,8 +5,8 @@
 ; Ignore templates for 'react-native init'
 .*/local-cli/templates/.*
 
-; Ignore the website subdir
-<PROJECT_ROOT>/website/.*
+; Ignore the Dangerfile
+<PROJECT_ROOT>/bots/dangerfile.js
 
 ; Ignore "BUCK" generated dirs
 <PROJECT_ROOT>/\.buckd/
@@ -18,25 +18,39 @@
 ; For RN Apps installed via npm, "Libraries" folder is inside
 ; "node_modules/react-native" but in the source repo it is in the root
 .*/Libraries/react-native/React.js
-.*/Libraries/react-native/ReactNative.js
+
+; Ignore polyfills
+.*/Libraries/polyfills/.*
+
+; Ignore metro
+.*/node_modules/metro/.*
 
 ; Ignore duplicate modules under example/
-.*/example/node_modules/fbjs
-.*/example/node_modules/fbemitter
-.*/example/node_modules/react
-.*/example/node_modules/react-native
-.*/example/node_modules/expo
-.*/example/node_modules/xdl
-.*/example/node_modules/reqwest
+.*/example/node_modules/fbjs/.*
+.*/example/node_modules/fbemitter/.*
+.*/example/node_modules/react/.*
+.*/example/node_modules/react-native/.*
 .*/example/\.buckd/
 
-.*/node_modules/react-native-gesture-handler
-.*/node_modules/react-native-safe-area-view
+; Ignore duplicate modules under docs/
+.*/docs/node_modules/fbjs/.*
+.*/docs/node_modules/react/.*
+
+; Ignore some modules we don't need to parse
+.*/node_modules/prettier/.*
+.*/node_modules/eslint.*
+.*/node_modules/reqwest/tests/fixtures/.*
+
+[untyped]
+.*/node_modules/expo/.*
+.*/node_modules/xdl/.*
+.*/node_modules/react-native-gesture-handler/.*
 
 [include]
 
 [libs]
 node_modules/react-native/Libraries/react-native/react-native-interface.js
+node_modules/react-native/flow-github
 node_modules/react-native/flow
 
 [options]
@@ -44,15 +58,8 @@ emoji=true
 
 module.system=haste
 
-experimental.strict_type_args=true
-
 munge_underscores=true
 
-module.file_ext=.js
-module.file_ext=.native.js
-module.file_ext=.android.js
-module.file_ext=.ios.js
-
 module.name_mapper='^expo$' -> 'emptyObject'
 module.name_mapper='^react-native-gesture-handler$' -> 'emptyObject'
 
@@ -62,14 +69,11 @@ suppress_type=$FlowIssue
 suppress_type=$FlowFixMe
 suppress_type=$FlowFixMeProps
 suppress_type=$FlowFixMeState
-suppress_type=$FixMe
 
-suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(5[0-6]\\|[1-4][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*[react_native_oss|react_native_fb][a-z,_]*\\)?)\\)
-suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(5[0-6]\\|[1-4][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*[react_native_oss|react_native_fb][a-z,_]*\\)?)\\)?:? #[0-9]+
+suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(<VERSION>\\)? *\\(site=[a-z,_]*[react_native_oss|react_native_fb][a-z,_]*\\)?)\\)
+suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(<VERSION>\\)? *\\(site=[a-z,_]*[react_native_oss|react_native_fb][a-z,_]*\\)?)\\)?:? #[0-9]+
 suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
 suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError
 
-unsafe.enable_getters_and_setters=true
-
 [version]
-^0.56.0
+^0.67.1

packages/tabs/example/app.json

@@ -3,7 +3,7 @@
     "name": "React Navigation Tabs Example",
     "description": "Demonstrates the various capabilities of react-navigation-tabs: https://github.com/react-navigation/react-navigation-tabs",
     "slug": "react-navigation-tabs-demos",
-    "sdkVersion": "23.0.0",
+    "sdkVersion": "27.0.0",
     "version": "1.0.0",
     "primaryColor": "#2196f3",
     "icon": "assets/icon.png",

packages/tabs/example/package.json

@@ -9,14 +9,14 @@
   },
   "dependencies": {
     "@expo/vector-icons": "^6.2.0",
-    "expo": "~23.0.4",
+    "expo": "^27.0.2",
     "hoist-non-react-statics": "^2.5.0",
-    "prop-types": "^15.6.0",
-    "react": "16.0.0",
-    "react-native": "0.50.4",
+    "prop-types": "^15.6.1",
+    "react": "16.3.1",
     "react-lifecycles-compat": "^3.0.4",
+    "react-native": "~0.55.4",
     "react-native-safe-area-view": "^0.7.0",
-    "react-native-tab-view": "^0.0.78",
+    "react-native-tab-view": "^1.0.0",
     "react-navigation": "^2.0.0-rc.8"
   },
   "devDependencies": {
@@ -27,8 +27,9 @@
   },
   "main": "App.js",
   "resolutions": {
-    "**/react-lifecycles-compat": "3.0.4",
     "**/hoist-non-react-statics": "2.5.0",
-    "**/react-native-tab-view": "0.0.78"
+    "**/prop-types": "15.6.1",
+    "**/react-lifecycles-compat": "3.0.4",
+    "**/react-native-tab-view": "1.0.0"
   }
 }

packages/tabs/example/rn-cli.config.js

@@ -2,7 +2,7 @@
 
 const path = require('path');
 const glob = require('glob-to-regexp');
-const blacklist = require('metro-bundler/src/blacklist');
+const blacklist = require('metro/src/blacklist');
 const pak = require('../package.json');
 
 const dependencies = Object.keys(pak.dependencies);

packages/tabs/package.json

@@ -38,10 +38,10 @@
   "homepage": "https://github.com/react-navigation/react-navigation-tabs#readme",
   "dependencies": {
     "hoist-non-react-statics": "^2.5.0",
-    "prop-types": "^15.6.0",
+    "prop-types": "^15.6.1",
     "react-lifecycles-compat": "^3.0.4",
     "react-native-safe-area-view": "^0.7.0",
-    "react-native-tab-view": "~0.0.78"
+    "react-native-tab-view": "^1.0.0"
   },
   "devDependencies": {
     "@expo/vector-icons": "^6.2.0",
@@ -58,12 +58,12 @@
     "eslint": "^4.12.1",
     "eslint-config-satya164": "^1.0.1",
     "eslint-plugin-react-native-globals": "^0.1.0",
-    "flow-bin": "~0.56.0",
+    "flow-bin": "~0.67.0",
     "jest": "^21.2.1",
     "prettier": "^1.8.2",
-    "react": "16.0.0",
-    "react-dom": "16.0.0",
-    "react-native": "~0.50.4",
+    "react": "16.3.1",
+    "react-dom": "16.3.1",
+    "react-native": "~0.55.4",
     "react-navigation": "^2.0.1",
     "react-test-renderer": "16.2.0"
   },

packages/tabs/src/navigators/createMaterialTopTabNavigator.js

@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import { Platform } from 'react-native';
-import { TabViewAnimated, TabViewPagerPan } from 'react-native-tab-view';
+import { TabView, PagerPan } from 'react-native-tab-view';
 import createTabNavigator, {
   type InjectedProps,
 } from '../utils/createTabNavigator';
@@ -19,7 +19,7 @@ type Props = InjectedProps & {
   tabBarOptions?: TabBarOptions,
 };
 
-class TabView extends React.PureComponent<Props> {
+class MaterialTabView extends React.PureComponent<Props> {
   static defaultProps = {
     // fix for https://github.com/react-native-community/react-native-tab-view/issues/312
     initialLayout: Platform.select({
@@ -104,14 +104,21 @@ class TabView extends React.PureComponent<Props> {
     );
   };
 
-  _renderPanPager = props => <TabViewPagerPan {...props} />;
+  _renderPanPager = props => <PagerPan {...props} />;
 
-  _renderScene = ({ route, focused }) => {
-    const { renderScene, animationEnabled, swipeEnabled } = this.props;
+  _renderScene = ({ route }) => {
+    const {
+      renderScene,
+      animationEnabled,
+      swipeEnabled,
+      descriptors,
+    } = this.props;
 
     if (animationEnabled === false && swipeEnabled === false) {
+      const { navigation } = descriptors[route.key];
+
       return (
-        <ResourceSavingScene isFocused={focused}>
+        <ResourceSavingScene isFocused={navigation.isFocused()}>
           {renderScene({ route })}
         </ResourceSavingScene>
       );
@@ -123,15 +130,12 @@ class TabView extends React.PureComponent<Props> {
   render() {
     const {
       navigation,
-      tabBarPosition,
       animationEnabled,
       // eslint-disable-next-line no-unused-vars
       renderScene,
       ...rest
     } = this.props;
 
-    let renderHeader;
-    let renderFooter;
     let renderPager;
 
     const { state } = this.props.navigation;
@@ -149,25 +153,18 @@ class TabView extends React.PureComponent<Props> {
       swipeEnabled = swipeEnabled(state);
     }
 
-    if (tabBarPosition === 'bottom') {
-      renderFooter = this._renderTabBar;
-    } else {
-      renderHeader = this._renderTabBar;
-    }
-
     if (animationEnabled === false && swipeEnabled === false) {
       renderPager = this._renderPanPager;
     }
 
     return (
-      <TabViewAnimated
+      <TabView
         {...rest}
         navigationState={navigation.state}
         animationEnabled={animationEnabled}
         swipeEnabled={swipeEnabled}
         renderPager={renderPager}
-        renderHeader={renderHeader}
-        renderFooter={renderFooter}
+        renderTabBar={this._renderTabBar}
         renderScene={
           /* $FlowFixMe */
           this._renderScene
@@ -177,4 +174,4 @@ class TabView extends React.PureComponent<Props> {
   }
 }
 
-export default createTabNavigator(TabView);
+export default createTabNavigator(MaterialTabView);

packages/tabs/src/views/MaterialTopTabBar.js

@@ -42,7 +42,7 @@ export default class TabBarTop extends React.PureComponent<Props> {
     allowFontScaling: true,
   };
 
-  _renderLabel = ({ route, index, focused }) => {
+  _renderLabel = ({ route }) => {
     const {
       position,
       navigation,
@@ -59,6 +59,9 @@ export default class TabBarTop extends React.PureComponent<Props> {
     }
 
     const { routes } = navigation.state;
+    const index = routes.indexOf(route);
+    const focused = index === navigation.state.index;
+
     // Prepend '-1', so there are always at least 2 items in inputRange
     const inputRange = [-1, ...routes.map((x, i) => i)];
     const outputRange = inputRange.map(
@@ -89,7 +92,7 @@ export default class TabBarTop extends React.PureComponent<Props> {
     return label;
   };
 
-  _renderIcon = ({ route, index }) => {
+  _renderIcon = ({ route }) => {
     const {
       position,
       navigation,
@@ -104,6 +107,8 @@ export default class TabBarTop extends React.PureComponent<Props> {
       return null;
     }
 
+    const index = navigation.state.routes.indexOf(route);
+
     // Prepend '-1', so there are always at least 2 items in inputRange
     const inputRange = [-1, ...navigation.state.routes.map((x, i) => i)];
     const activeOpacity = position.interpolate({