feat: upgrade to latest react-native-tab-view using ViewPager

react-navigation · Mar 9, 2021 · 2261001 · 2261001
1 parent 70ddcce
commit 2261001
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 20 deletions.
diff --git a/example/package.json b/example/package.json
@@ -27,11 +27,12 @@
     "react-native": "https://github.com/expo/react-native/archive/sdk-40.0.0.tar.gz",
     "react-native-appearance": "~0.3.3",
     "react-native-gesture-handler": "~1.8.0",
+    "react-native-pager-view": "^4.2.4",
     "react-native-paper": "^4.7.2",
     "react-native-reanimated": "~1.13.0",
     "react-native-safe-area-context": "3.1.9",
     "react-native-screens": "~2.15.0",
-    "react-native-tab-view": "^2.16.0",
+    "react-native-tab-view": "^3.0.0",
     "react-native-vector-icons": "^8.1.0",
     "react-native-web": "~0.15.0"
   },

diff --git a/packages/material-top-tabs/package.json b/packages/material-top-tabs/package.json
@@ -53,18 +53,16 @@
     "react": "~16.13.1",
     "react-native": "~0.63.2",
     "react-native-builder-bob": "^0.18.1",
-    "react-native-gesture-handler": "~1.8.0",
-    "react-native-reanimated": "~1.13.0",
-    "react-native-tab-view": "^2.16.0",
+    "react-native-pager-view": "^4.2.4",
+    "react-native-tab-view": "^3.0.0",
     "typescript": "^4.2.3"
   },
   "peerDependencies": {
     "@react-navigation/native": "^5.0.5",
     "react": "*",
     "react-native": "*",
-    "react-native-gesture-handler": ">= 1.0.0",
-    "react-native-reanimated": ">= 1.0.0",
-    "react-native-tab-view": ">= 2.16.0"
+    "react-native-pager-view": ">= 1.0.0",
+    "react-native-tab-view": ">= 3.0.0"
   },
   "react-native-builder-bob": {
     "source": "src",

diff --git a/packages/material-top-tabs/src/__tests__/index.test.tsx b/packages/material-top-tabs/src/__tests__/index.test.tsx
@@ -7,7 +7,20 @@ import {
   MaterialTopTabScreenProps,
 } from '../index';
 
-it('renders a material bottom tab navigator with screens', async () => {
+jest.mock('react-native-pager-view', () => {
+  const React = require('react');
+  const { View } = require('react-native');
+
+  return class ViewPager extends React.Component<React.PropsWithChildren<{}>> {
+    setPage() {}
+
+    render() {
+      return <View>{this.props.children}</View>;
+    }
+  };
+});
+
+it('renders a material top tab navigator with screens', async () => {
   const Test = ({
     route,
     navigation,

diff --git a/packages/material-top-tabs/src/types.tsx b/packages/material-top-tabs/src/types.tsx
@@ -196,16 +196,10 @@ export type MaterialTopTabNavigationConfig = Partial<
     | 'onSwipeEnd'
     | 'renderScene'
     | 'renderTabBar'
-    | 'renderPager'
     | 'renderLazyPlaceholder'
     | 'lazy'
   >
 > & {
-  /**
-   * Function that returns a React element to use as the pager.
-   * The pager handles swipe gestures and page switching.
-   */
-  pager?: React.ComponentProps<typeof TabView>['renderPager'];
   /**
    * Function that returns a React element to render for routes that haven't been rendered yet.
    * Receives an object containing the route as the prop.

diff --git a/packages/material-top-tabs/src/views/MaterialTopTabView.tsx b/packages/material-top-tabs/src/views/MaterialTopTabView.tsx
@@ -25,7 +25,6 @@ type Props = MaterialTopTabNavigationConfig & {
 };
 
 export default function MaterialTopTabView({
-  pager,
   lazyPlaceholder,
   tabBar = (props: MaterialTopTabBarProps) => <MaterialTopTabBar {...props} />,
   state,
@@ -58,7 +57,6 @@ export default function MaterialTopTabView({
         renderScene={({ route }) => descriptors[route.key].render()}
         navigationState={state}
         renderTabBar={renderTabBar}
-        renderPager={pager}
         renderLazyPlaceholder={lazyPlaceholder}
         lazy={({ route }) => descriptors[route.key].options.lazy === true}
         onSwipeStart={() => navigation.emit({ type: 'swipeStart' })}

diff --git a/yarn.lock b/yarn.lock
@@ -16162,6 +16162,11 @@ react-native-iphone-x-helper@^1.3.0, react-native-iphone-x-helper@^1.3.1:
   resolved "https://registry.yarnpkg.com/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.3.1.tgz#20c603e9a0e765fd6f97396638bdeb0e5a60b010"
   integrity sha512-HOf0jzRnq2/aFUcdCJ9w9JGzN3gdEg0zFE4FyYlp4jtidqU03D5X7ZegGKfT1EWteR0gPBGp9ye5T5FvSWi9Yg==
 
+react-native-pager-view@^4.2.4:
+  version "4.2.4"
+  resolved "https://registry.yarnpkg.com/react-native-pager-view/-/react-native-pager-view-4.2.4.tgz#84bf9122e086e508904423d90b1cd628e0068ca8"
+  integrity sha512-UuOaaTsokKgutaC0SfE+kCD+vT/5N1JVQsbSRdzMvNq9KKj3Bic/j30R4Kevq6LraCWh/9rCc6EV/M4v/zZoBA==
+
 react-native-paper@^4.7.2:
   version "4.7.2"
   resolved "https://registry.yarnpkg.com/react-native-paper/-/react-native-paper-4.7.2.tgz#a40d1da87af5b030d45b525313cd703d490876ff"
@@ -16188,10 +16193,10 @@ react-native-screens@~2.15.0:
   resolved "https://registry.yarnpkg.com/react-native-screens/-/react-native-screens-2.15.0.tgz#9b97c1881c4fcdf304bf363f0013225901625f44"
   integrity sha512-qTSQPy0WKHtlb8xt5gY0Gt6sdvfQUQAnFSqgsggW9UEvySbkHzpqOrOYNA79Ca8oXO0dCFwp6X8buIiDefa7+Q==
 
-react-native-tab-view@^2.16.0:
-  version "2.16.0"
-  resolved "https://registry.yarnpkg.com/react-native-tab-view/-/react-native-tab-view-2.16.0.tgz#cae72c7084394bd328fac5fefb86cd966df37a86"
-  integrity sha512-ac2DmT7+l13wzIFqtbfXn4wwfgtPoKzWjjZyrK1t+T8sdemuUvD4zIt+UImg03fu3s3VD8Wh/fBrIdcqQyZJWg==
+react-native-tab-view@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/react-native-tab-view/-/react-native-tab-view-3.0.0.tgz#ea01e0956a4a96dd87d3cfdd8ee39f9aad319943"
+  integrity sha512-uuvLV3KWVXx3ZEESBYALo4w8fuHFUrrg2K2OCtfHv+xOmTWjjRzm+opi0PMXSLOxl7+uMeJvJYEzR13B6pXpkA==
 
 react-native-vector-icons@^8.1.0:
   version "8.1.0"