diff --git a/DefaultTabBar.js b/DefaultTabBar.js index da58b524..81a8a705 100644 --- a/DefaultTabBar.js +++ b/DefaultTabBar.js @@ -1,5 +1,6 @@ const React = require('react'); -const { ViewPropTypes } = ReactNative = require('react-native'); +const ReactNative = require('react-native'); +const DeprecatedPropTypes = require('deprecated-react-native-prop-types'); const PropTypes = require('prop-types'); const createReactClass = require('create-react-class'); const { @@ -18,10 +19,10 @@ const DefaultTabBar = createReactClass({ backgroundColor: PropTypes.string, activeTextColor: PropTypes.string, inactiveTextColor: PropTypes.string, - textStyle: Text.propTypes.style, - tabStyle: ViewPropTypes.style, + textStyle: DeprecatedPropTypes.TextPropTypes.style, + tabStyle: DeprecatedPropTypes.ViewPropTypes.style, renderTab: PropTypes.func, - underlineStyle: ViewPropTypes.style, + underlineStyle: DeprecatedPropTypes.ViewPropTypes.style, }, getDefaultProps() { diff --git a/ScrollableTabBar.js b/ScrollableTabBar.js index 1500b2db..0af974a5 100644 --- a/ScrollableTabBar.js +++ b/ScrollableTabBar.js @@ -1,5 +1,6 @@ const React = require('react'); -const { ViewPropTypes } = ReactNative = require('react-native'); +const ReactNative = require('react-native'); +const DeprecatedPropTypes = require('deprecated-react-native-prop-types'); const PropTypes = require('prop-types'); const createReactClass = require('create-react-class'); const { @@ -24,12 +25,12 @@ const ScrollableTabBar = createReactClass({ activeTextColor: PropTypes.string, inactiveTextColor: PropTypes.string, scrollOffset: PropTypes.number, - style: ViewPropTypes.style, - tabStyle: ViewPropTypes.style, - tabsContainerStyle: ViewPropTypes.style, - textStyle: Text.propTypes.style, + style: DeprecatedPropTypes.ViewPropTypes.style, + tabStyle: DeprecatedPropTypes.ViewPropTypes.style, + tabsContainerStyle: DeprecatedPropTypes.ViewPropTypes.style, + textStyle: DeprecatedPropTypes.TextPropTypes.style, renderTab: PropTypes.func, - underlineStyle: ViewPropTypes.style, + underlineStyle: DeprecatedPropTypes.ViewPropTypes.style, onScroll: PropTypes.func, }, diff --git a/index.js b/index.js index 5996ff71..88a39bd7 100644 --- a/index.js +++ b/index.js @@ -1,6 +1,6 @@ const React = require('react'); -const { Component } = React; -const { ViewPropTypes } = ReactNative = require('react-native'); +const ReactNative = require('react-native'); +const DeprecatedPropTypes = require('deprecated-react-native-prop-types'); const createReactClass = require('create-react-class'); const PropTypes = require('prop-types'); const { @@ -41,12 +41,12 @@ const ScrollableTabView = createReactClass({ onChangeTab: PropTypes.func, onScroll: PropTypes.func, renderTabBar: PropTypes.any, - tabBarUnderlineStyle: ViewPropTypes.style, + tabBarUnderlineStyle: DeprecatedPropTypes.ViewPropTypes.style, tabBarBackgroundColor: PropTypes.string, tabBarActiveTextColor: PropTypes.string, tabBarInactiveTextColor: PropTypes.string, tabBarTextStyle: PropTypes.object, - style: ViewPropTypes.style, + style: DeprecatedPropTypes.ViewPropTypes.style, contentProps: PropTypes.object, scrollWithoutAnimation: PropTypes.bool, locked: PropTypes.bool, @@ -115,6 +115,10 @@ const ScrollableTabView = createReactClass({ }; }, + UNSAFE_componentWillMount() { + this.scrollView = React.createRef(); + }, + componentDidUpdate(prevProps) { if (this.props.children !== prevProps.children) { this.updateSceneKeys({ page: this.state.currentPage, children: this.props.children, }); @@ -138,15 +142,15 @@ const ScrollableTabView = createReactClass({ if (Platform.OS === 'ios') { const offset = pageNumber * this.state.containerWidth; if (this.scrollView) { - this.scrollView.scrollTo({x: offset, y: 0, animated: !this.props.scrollWithoutAnimation, }); + this.scrollView.current.scrollTo({x: offset, y: 0, animated: !this.props.scrollWithoutAnimation, }); } } else { if (this.scrollView) { this.tabWillChangeWithoutGesture = true; if (this.props.scrollWithoutAnimation) { - this.scrollView.setPageWithoutAnimation(pageNumber); + this.scrollView.current.setPageWithoutAnimation(pageNumber); } else { - this.scrollView.setPage(pageNumber); + this.scrollView.current.setPage(pageNumber); } } } @@ -232,7 +236,7 @@ const ScrollableTabView = createReactClass({ pagingEnabled automaticallyAdjustContentInsets={false} contentOffset={{ x: this.props.initialPage * this.state.containerWidth, }} - ref={(scrollView) => { this.scrollView = scrollView; }} + ref={this.scrollView} onScroll={Animated.event( [{ nativeEvent: { contentOffset: { x: this.state.scrollXIOS, }, }, }, ], { useNativeDriver: true, listener: this._onScroll, } @@ -271,7 +275,7 @@ const ScrollableTabView = createReactClass({ listener: this._onScroll, }, )} - ref={(scrollView) => { this.scrollView = scrollView; }} + ref={this.scrollView} {...this.props.contentProps} > {scenes} @@ -342,7 +346,7 @@ const ScrollableTabView = createReactClass({ if (!width || width <= 0 || Math.round(width) === Math.round(this.state.containerWidth)) { return; } - + if (Platform.OS === 'ios') { const containerWidthAnimatedValue = new Animated.Value(width); // Need to call __makeNative manually to avoid a native animated bug. See diff --git a/package.json b/package.json index a6f1a2c2..ef9b36af 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-native-scrollable-tab-view", - "version": "1.0.0", + "version": "1.1.0", "description": "", "main": "index.js", "scripts": { @@ -31,6 +31,7 @@ "dependencies": { "@react-native-community/viewpager": "3.3.0", "create-react-class": "^15.6.2", + "deprecated-react-native-prop-types": "^2.3.0", "prop-types": "^15.6.0", "react-timer-mixin": "^0.13.3" }, diff --git a/yarn.lock b/yarn.lock index 6768a385..901e52ce 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2,10 +2,15 @@ # yarn lockfile v1 -"@react-native-community/viewpager@^1.1.7": - version "1.1.7" - resolved "https://registry.yarnpkg.com/@react-native-community/viewpager/-/viewpager-1.1.7.tgz#7d3b1631f1ec91145db92a8e25c80d53027e96ba" - integrity sha512-k9v2KJtAprNPq7IZmedD2VLMePvPW+ohX3uDnkpoKritBji+/RtRmTKrdtPi3Uvp0toq/KtPttAds1dr7AZNpw== +"@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/normalize-color@*": + version "2.0.0" + resolved "https://registry.yarnpkg.com/@react-native/normalize-color/-/normalize-color-2.0.0.tgz#da955909432474a9a0fe1cbffc66576a0447f567" + integrity sha512-Wip/xsc5lw8vsBlmY2MO/gFLp3MvuZ2baBZjDeTjjndMgM0h5sxz7AZR62RDPGgstp8Np7JzjvVqVT7tpFZqsw== acorn-jsx@^3.0.0: version "3.0.1" @@ -261,6 +266,15 @@ deep-is@~0.1.3: resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34" integrity sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ= +deprecated-react-native-prop-types@^2.3.0: + version "2.3.0" + resolved "https://registry.yarnpkg.com/deprecated-react-native-prop-types/-/deprecated-react-native-prop-types-2.3.0.tgz#c10c6ee75ff2b6de94bb127f142b814e6e08d9ab" + integrity sha512-pWD0voFtNYxrVqvBMYf5gq3NA2GCpfodS1yNynTPc93AYA/KEMGeWDqqeUB6R2Z9ZofVhks2aeJXiuQqKNpesA== + dependencies: + "@react-native/normalize-color" "*" + invariant "*" + prop-types "*" + doctrine@^2.0.0: version "2.1.0" resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-2.1.0.tgz#5cd01fc101621b42c4cd7f5d1a66243716d3f39d" @@ -594,7 +608,7 @@ interpret@^1.0.0: resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.2.0.tgz#d5061a6224be58e8083985f5014d844359576296" integrity sha512-mT34yGKMNceBQUoVn7iCDKDntA7SC6gycMAWzGx1z/CMCTV7b2AAtXlo3nRyHZ1FelRkQbQjprHSYGwzLtkVbw== -invariant@^2.2.2: +invariant@*, invariant@^2.2.2: version "2.2.4" resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6" integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA== @@ -850,6 +864,15 @@ promise@^7.1.1: dependencies: asap "~2.0.3" +prop-types@*: + version "15.8.1" + resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5" + integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg== + dependencies: + loose-envify "^1.4.0" + object-assign "^4.1.1" + react-is "^16.13.1" + prop-types@^15.6.0: version "15.7.2" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5" @@ -859,6 +882,11 @@ prop-types@^15.6.0: object-assign "^4.1.1" react-is "^16.8.1" +react-is@^16.13.1: + version "16.13.1" + resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" + integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== + react-is@^16.8.1: version "16.9.0" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.9.0.tgz#21ca9561399aad0ff1a7701c01683e8ca981edcb"