refactor: change @react-native-community/viewpager to react-native-pa…

…ger-view
ant-design · Apr 15, 2021 · 19cb73b · 19cb73b
1 parent c574e6b
commit 19cb73b
Show file tree

Hide file tree

Showing 11 changed files with 52 additions and 73 deletions.
diff --git a/.jest.config.js b/.jest.config.js
@@ -11,6 +11,7 @@ const transformPackages = [
   '@bang88/react-native-ultimate-listview',
   '@react-native-community',
   '@react-native-picker/picker',
+  'react-native-pager-view'
 ];
 
 module.exports = {

diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-11.15.0
+14.16.1
diff --git a/README.md b/README.md
@@ -55,16 +55,16 @@ or
 yarn add @ant-design/react-native
 ```
 
-### Installing peer dependencies (4.0.0+)
+### Installing peer dependencies
 
 ```bash
-npm install @react-native-community/cameraroll @react-native-picker/picker @react-native-community/segmented-control @react-native-community/slider @react-native-community/viewpager
+npm install @react-native-community/cameraroll @react-native-picker/picker @react-native-community/segmented-control @react-native-community/slider react-native-pager-view
 ```
 
 or
 
 ```bash
-yarn add @react-native-community/cameraroll @react-native-picker/picker @react-native-community/segmented-control @react-native-community/slider @react-native-community/viewpager
+yarn add @react-native-community/cameraroll @react-native-picker/picker @react-native-community/segmented-control @react-native-community/slider react-native-pager-view
 ```
 
 > You need go to ios folder and run `pod install` (auto linking)，Android will handle it by itself.

diff --git a/README.zh-CN.md b/README.zh-CN.md
@@ -55,16 +55,16 @@ or
 yarn add @ant-design/react-native
 ```
 
-### 安装peer依赖(4.0.0+)
+### 安装peer依赖
 
 ```bash
-npm install @react-native-community/cameraroll @react-native-community/picker @react-native-community/segmented-control @react-native-community/slider @react-native-community/viewpager
+npm install @react-native-community/cameraroll @react-native-picker/picker @react-native-community/segmented-control @react-native-community/slider react-native-pager-view
 ```
 
 or
 
 ```bash
-yarn add @react-native-community/cameraroll @react-native-community/picker @react-native-community/segmented-control @react-native-community/slider @react-native-community/viewpager
+yarn add @react-native-community/cameraroll @react-native-picker/picker @react-native-community/segmented-control @react-native-community/slider react-native-pager-view
 ```
 
 > 安装完依赖后需要到 iOS 目录 `pod install`(auto linking)，Android 不需要手动处理

diff --git a/components/carousel/index.tsx b/components/carousel/index.tsx
@@ -1,6 +1,6 @@
-import ViewPager, { ViewPagerProps } from '@react-native-community/viewpager';
 import React from 'react';
 import { StyleProp, Text, View, ViewStyle } from 'react-native';
+import ViewPager, { PagerViewProps } from 'react-native-pager-view';
 import { WithTheme, WithThemeStyles } from '../style';
 import CarouselStyles, { CarouselStyle } from './style/index';
 
@@ -139,9 +139,10 @@ class Carousel extends React.Component<CarouselProps, CarouselState> {
     } else {
       pages = <View>{children}</View>;
     }
-    const vpProps: ViewPagerProps = {
+    const vpProps: PagerViewProps = {
       initialPage: selectedIndex,
       showPageIndicator: false,
+      children: pages,
       onPageSelected: e => {
         this.setState({ selectedIndex: e.nativeEvent.position });
         this.autoplay();
@@ -167,26 +168,22 @@ class Carousel extends React.Component<CarouselProps, CarouselState> {
     };
     return (
       <WithTheme themeStyles={CarouselStyles} styles={this.props.styles}>
-        {
-          styles => (
-            <View
-              style={[styles.wrapperStyle]}
+        {styles => (
+          <View style={[styles.wrapperStyle]}>
+            <ViewPager
+              {...vpProps}
+              style={this.props.style}
+              // Lib does not support dynamically orientation change
+              orientation={vertical ? 'vertical' : 'horizontal'}
+              // Lib does not support dynamically transitionStyle change
+              transitionStyle="scroll"
+              ref={this.viewPager as any}
             >
-              <ViewPager
-                {...vpProps}
-                style={this.props.style}
-                // Lib does not support dynamically orientation change
-                orientation={vertical ? 'vertical' : 'horizontal'}
-                // Lib does not support dynamically transitionStyle change
-                transitionStyle="scroll"
-                ref={this.viewPager as any}
-              >
-                {pages}
-              </ViewPager>
-              {dots && this.renderDots(selectedIndex)}
-            </View>
-          )
-        }
+              {pages}
+            </ViewPager>
+            {dots && this.renderDots(selectedIndex)}
+          </View>
+        )}
       </WithTheme>
     );
   }

diff --git a/components/tabs/Tabs.tsx b/components/tabs/Tabs.tsx
@@ -1,6 +1,6 @@
-import ViewPager from '@react-native-community/viewpager';
 import React from 'react';
 import { Animated, Dimensions, LayoutChangeEvent, NativeScrollEvent, NativeSyntheticEvent } from 'react-native';
+import ViewPager from 'react-native-pager-view';
 import { WithTheme, WithThemeStyles } from '../style';
 import View from '../view';
 import { DefaultTabBar } from './DefaultTabBar';

diff --git a/docs/react/upgrade-notes.en-US.md b/docs/react/upgrade-notes.en-US.md
@@ -5,18 +5,18 @@ title: Upgrade
 
 Here list some of main incompatible changes and recommended changes in the upgrade. See [Changelog](/changelog) for all changes.
 
-### 4.0.0
+### 4.1.0
 
 > Installing peer dependencies
 
 ```bash
-npm install @react-native-community/cameraroll @react-native-community/picker @react-native-community/segmented-control @react-native-community/slider @react-native-community/viewpager
+npm install @react-native-community/cameraroll @react-native-picker/picker @react-native-community/segmented-control @react-native-community/slider react-native-pager-view
 ```
 
 or
 
 ```bash
-yarn add @react-native-community/cameraroll @react-native-community/picker @react-native-community/segmented-control @react-native-community/slider @react-native-community/viewpager
+yarn add @react-native-community/cameraroll @react-native-picker/picker @react-native-community/segmented-control @react-native-community/slider react-native-pager-view
 ```
 
 > You need go to ios folder and run `pod install` (auto linking)，Android will handle it by itself.

diff --git a/docs/react/upgrade-notes.zh-CN.md b/docs/react/upgrade-notes.zh-CN.md
@@ -5,18 +5,18 @@ title: 升级指南
 
 此处着重列出升级中的不兼容变化和推荐改动。所有变动请见 [Changelog](/changelog)。
 
-### 4.0.0
+### 4.1.0
 
 > 升级到4.0.0+需要安装peer依赖然后link
 
 ```bash
-npm install @react-native-community/cameraroll @react-native-community/picker @react-native-community/segmented-control @react-native-community/slider @react-native-community/viewpager
+npm install @react-native-community/cameraroll @react-native-picker/picker @react-native-community/segmented-control @react-native-community/slider react-native-pager-view
 ```
 
 or
 
 ```bash
-yarn add @react-native-community/cameraroll @react-native-community/picker @react-native-community/segmented-control @react-native-community/slider @react-native-community/viewpager
+yarn add @react-native-community/cameraroll @react-native-picker/picker @react-native-community/segmented-control @react-native-community/slider react-native-pager-view
 ```
 
 > 安装完依赖后需要到 iOS 目录 `pod install`(auto linking)，Android 不需要手动处理

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ant-design/react-native",
-  "version": "4.0.7",
+  "version": "4.1.0",
   "description": "基于蚂蚁金服移动设计规范的 React Native 组件库",
   "keywords": [
     "ant",
@@ -51,10 +51,9 @@
     "@react-native-community/cameraroll": "^1.5.2",
     "@react-native-community/eslint-config": "^0.0.5",
     "@react-native-community/masked-view": "^0.1.9",
-    "@react-native-picker/picker": "^1.9.10",
     "@react-native-community/segmented-control": "^1.4.0",
     "@react-native-community/slider": "^2.0.9",
-    "@react-native-community/viewpager": "^3.3.0",
+    "@react-native-picker/picker": "^1.9.10",
     "@react-navigation/native": "^5.1.6",
     "@react-navigation/stack": "^5.2.11",
     "@testing-library/react-native": "^5.0.3",
@@ -110,6 +109,7 @@
     "react-native": "0.62.2",
     "react-native-gesture-handler": "^1.6.1",
     "react-native-mocker": "^0.0.12",
+    "react-native-pager-view": "^5.1.3",
     "react-native-reanimated": "^1.8.0",
     "react-native-safe-area-context": "^0.7.3",
     "react-native-screens": "^2.5.0",
@@ -121,10 +121,10 @@
   "peerDependencies": {
     "@react-native-community/async-storage": ">= 1.11.0",
     "@react-native-community/cameraroll": ">= 1.5.2",
-    "@react-native-community/picker": ">= 1.2.0",
+    "@react-native-picker/picker": "^1.9.10",
     "@react-native-community/segmented-control": ">= 1.4.0",
     "@react-native-community/slider": ">= 2.0.0",
-    "@react-native-community/viewpager": ">= 3.3.0"
+    "react-native-pager-view": "^5.1.3"
   },
   "scripts": {
     "lint": "npm run tslint && npm run srclint && npm run applint",
@@ -166,5 +166,8 @@
   "typings": "lib/index.d.ts",
   "pre-commit": [
     "lint-staged"
-  ]
+  ],
+  "resolutions": {
+    "graceful-fs": "^4.2.4"
+  }
 }
diff --git a/rn-kitchen-sink/ios/Podfile b/rn-kitchen-sink/ios/Podfile
@@ -1,4 +1,4 @@
-platform :ios, '9.0'
+platform :ios, '10.0'
 require_relative '../../node_modules/@react-native-community/cli-platform-ios/native_modules'
 
 def add_flipper_pods!(versions = {})

diff --git a/yarn.lock b/yarn.lock
@@ -1161,11 +1161,6 @@
   resolved "https://registry.npm.taobao.org/@react-native-community/slider/download/@react-native-community/slider-2.0.9.tgz#bf74045c96f1fb22e3ec961e321300c230c63990"
   integrity sha1-v3QEXJbx+yLj7JYeMhMAwjDGOZA=
 
-"@react-native-community/viewpager@^3.3.0":
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/@react-native-community/viewpager/-/viewpager-3.3.0.tgz#e613747a43a31a6f3278f817ba96fdaaa7941f23"
-  integrity sha512-tyzh79l4t/hxiyS9QD3LRmWMs8KVkZzjrkQ8U8+8To1wmvVCBtp8BenvNsDLTBO7CpO/YmiThpmIdEZMr1WuVw==
-
 "@react-native-picker/picker@^1.9.10":
   version "1.9.11"
   resolved "https://registry.npm.taobao.org/@react-native-picker/picker/download/@react-native-picker/picker-1.9.11.tgz#490c752417c17d687e2941659b3c0bff9cb79b83"
@@ -7440,27 +7435,10 @@ got@^6.7.1:
     unzip-response "^2.0.1"
     url-parse-lax "^1.0.0"
 
-[email protected]:
-  version "4.1.11"
-  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.11.tgz#0e8bdfe4d1ddb8854d64e04ea7c00e2a026e5658"
-  integrity sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg=
-
-graceful-fs@^3.0.0:
-  version "3.0.12"
-  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-3.0.12.tgz#0034947ce9ed695ec8ab0b854bc919e82b1ffaef"
-  integrity sha512-J55gaCS4iTTJfTXIxSVw3EMQckcqkpdRv3IR7gu6sq0+tbC363Zx6KH/SEwXASK9JRbhyZmVjJEVJIOxYsB3Qg==
-  dependencies:
-    natives "^1.1.3"
-
-graceful-fs@^4.0.0, graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.3, graceful-fs@^4.1.6, graceful-fs@^4.1.9, graceful-fs@^4.2.0, graceful-fs@^4.2.3:
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.3.tgz#4a12ff1b60376ef09862c2093edd908328be8423"
-  integrity sha512-a30VEBm4PEdx1dRB7MFK7BejejvCvBronbLjht+sHuGYj8PHs7M/5Z+rt5lw551vZ7yfTCj4Vuyy3mSJytDWRQ==
-
-graceful-fs@~1.2.0:
-  version "1.2.3"
-  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-1.2.3.tgz#15a4806a57547cb2d2dbf27f42e89a8c3451b364"
-  integrity sha1-FaSAaldUfLLS2/J/QuiajDRRs2Q=
+[email protected], graceful-fs@^3.0.0, graceful-fs@^4.0.0, graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.3, graceful-fs@^4.1.6, graceful-fs@^4.1.9, graceful-fs@^4.2.0, graceful-fs@^4.2.3, graceful-fs@^4.2.4, graceful-fs@~1.2.0:
+  version "4.2.6"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.6.tgz#ff040b2b0853b23c3d31027523706f1885d76bee"
+  integrity sha512-nTnJ528pbqxYanhpDYsi4Rd8MAeaBA67+RZ10CM1m3bTAVFEDcd5AuA4a6W5YkGZ1iNXHzZz8T6TBKLeBuNriQ==
 
 graphql@^14.0.0:
   version "14.6.0"
@@ -11132,11 +11110,6 @@ nanomatch@^1.2.9:
     snapdragon "^0.8.1"
     to-regex "^3.0.1"
 
-natives@^1.1.3:
-  version "1.1.6"
-  resolved "https://registry.yarnpkg.com/natives/-/natives-1.1.6.tgz#a603b4a498ab77173612b9ea1acdec4d980f00bb"
-  integrity sha512-6+TDFewD4yxY14ptjKaS63GVdtKiES1pTPyxn9Jb0rBqPMZ7VcCiooEhPNsr+mqHtMGxa/5c/HhcC4uPEUw/nA==
-
 natural-compare@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
@@ -14279,6 +14252,11 @@ react-native-modal-popover@^0.0.12:
     lodash.debounce "^4.0.8"
     prop-types "^15.6.2"
 
+react-native-pager-view@^5.1.3:
+  version "5.1.3"
+  resolved "https://registry.yarnpkg.com/react-native-pager-view/-/react-native-pager-view-5.1.3.tgz#2c8ef36a43548192f0463061907553f85b49ad97"
+  integrity sha512-VGNEzx8kGraH3LDw31ftM0+PigQxaz4todfI8TEn022y5RyujCTwBFV3V5+pmmPUMk06sISd3k8RLAMMcZVp3w==
+
 react-native-reanimated@^1.8.0:
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-1.8.0.tgz#0b5719b20c1fed9aaf8afd9a12e21c9bd46ee428"