Keep this repo up to date with ptomasroos module it was forked from.

.github/ISSUE_TEMPLATE.md

@@ -0,0 +1,30 @@
+<!--
+  Thanks for reporting a issue!
+
+  In order to be able to help out I need you to provide a
+  reproduction repository. That means you !!! should !!! provide a reachable repository which reproduces the issue you're experiencing.
+
+  This will greatly improve the chance for you to get the bug fixed and me to be able to find it.
+-->
+
+- [ ] I have searched [existing issues](https://github.com/happypancake/react-native-scrollable-tab-view/issues)
+- [ ] I am using the [latest scrollable tab view version](https://www.npmjs.com/package/react-native-scrollable-tab-view)
+
+<!--
+  Describe your issue in detail.
+-->
+
+## Steps to Reproduce
+<!--
+  Required. Let us know how to reproduce the issue. Include a code sample or issue will be closed.
+-->
+
+## Expected Behavior
+<!--
+  Write what you thought would happen.
+-->
+
+## Actual Behavior
+<!--
+  Write what happened. Include screenshots if needed.
+-->

.npmignore

@@ -1 +1,2 @@
 Example
+.github/

Button.ios.js

@@ -1,7 +1,7 @@
 const React = require('react');
 const ReactNative = require('react-native');
 const {
- TouchableOpacity,
+  TouchableOpacity,
   View,
 } = ReactNative;
 

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() {
@@ -86,7 +87,7 @@ const DefaultTabBar = createReactClass({
                 { translateX },
               ]
             },
-            this.props.underlineStyle,
+            this.props.tabBarUnderlineStyle,
           ]}
         />
       </View>

Example/ScrollableTabsExample.js

@@ -4,11 +4,11 @@ import {
   View,
 } from 'react-native';
 
-import ScrollableTabView, { ScrollableTabBar, } from 'react-native-scrollable-tab-view';
+import ScrollableTabView, { ScrollableTabBar } from 'react-native-scrollable-tab-view';
 
 export default () => {
   return <ScrollableTabView
-    style={{marginTop: 20, }}
+    style={{ marginTop: 20 }}
     initialPage={0}
     renderTabBar={() => <ScrollableTabBar />}
   >

Example/SimpleExample.js

@@ -3,11 +3,11 @@ import {
   Text,
 } from 'react-native';
 
-import ScrollableTabView, {DefaultTabBar, } from 'react-native-scrollable-tab-view';
+import ScrollableTabView, { DefaultTabBar } from 'react-native-scrollable-tab-view';
 
 export default () => {
   return <ScrollableTabView
-    style={{marginTop: 20, }}
+    style={{ marginTop: 20 }}
     initialPage={1}
     renderTabBar={() => <DefaultTabBar />}
   >

Example/yarn.lock

@@ -1388,8 +1388,8 @@ detect-indent@^4.0.0:
     repeating "^2.0.0"
 
 diff@^3.2.0:
-  version "3.3.1"
-  resolved "https://registry.yarnpkg.com/diff/-/diff-3.3.1.tgz#aa8567a6eed03c531fc89d3f711cd0e5259dec75"
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/diff/-/diff-3.5.0.tgz#800c0dd1e0a8bfbc95835c202ad220fe317e5a12"
 
 dom-walk@^0.1.0:
   version "0.1.1"
@@ -3465,8 +3465,8 @@ [email protected]:
   dependencies:
     react-native-dismiss-keyboard "1.0.0"
 
-"react-native-scrollable-tab-view@file:../":
-  version "0.6.7"
+"react-native-scrollable-tab-view@file:..":
+  version "0.10.0"
   dependencies:
     create-react-class "^15.6.2"
     prop-types "^15.6.0"

SceneComponent.js

@@ -1,12 +1,12 @@
 const React = require('react');
 const ReactNative = require('react-native');
-const {Component, } = React;
-const {View, StyleSheet, } = ReactNative;
+const { Component } = React;
+const { View, StyleSheet } = ReactNative;
 
 const StaticContainer = require('./StaticContainer');
 
 const SceneComponent = (Props) => {
-  const {shouldUpdated, ...props, } = Props;
+  const { shouldUpdated, ...props } = Props;
   return <View {...props}>
       <StaticContainer shouldUpdate={shouldUpdated}>
         {props.children}

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,
   },
 
@@ -148,7 +149,7 @@ const ScrollableTabBar = createReactClass({
   measureTab(page, event) {
     const { x, width, height, } = event.nativeEvent.layout;
     this._tabsMeasurements[page] = {left: x, right: x + width, width, height, };
-    this.updateView({value: this.props.scrollValue._value, });
+    this.updateView({value: this.props.scrollValue.__getValue(), });
   },
 
   render() {
@@ -164,6 +165,10 @@ const ScrollableTabBar = createReactClass({
       width: this.state._widthTabUnderline,
     };
 
+    const {
+      onScroll,
+    } = this.props;
+
     return <View
       style={[styles.container, {backgroundColor: this.props.backgroundColor, }, this.props.style, ]}
       onLayout={this.onContainerLayout}
@@ -176,6 +181,8 @@ const ScrollableTabBar = createReactClass({
         directionalLockEnabled={true}
         bounces={false}
         scrollsToTop={false}
+        onScroll={onScroll}
+        scrollEventThrottle={16}
       >
         <View
           style={[styles.tabs, {width: this.state._containerWidth, }, this.props.tabsContainerStyle, ]}
@@ -193,9 +200,9 @@ const ScrollableTabBar = createReactClass({
     </View>;
   },
 
-  componentWillReceiveProps(nextProps) {
+  componentDidUpdate(prevProps) {
     // If the tabs change, force the width of the tabs container to be recalculated
-    if (JSON.stringify(this.props.tabs) !== JSON.stringify(nextProps.tabs) && this.state._containerWidth) {
+    if (JSON.stringify(prevProps.tabs) !== JSON.stringify(this.props.tabs) && this.state._containerWidth) {
       this.setState({ _containerWidth: null, });
     }
   },
@@ -207,12 +214,12 @@ const ScrollableTabBar = createReactClass({
       width = WINDOW_WIDTH;
     }
     this.setState({ _containerWidth: width, });
-    this.updateView({value: this.props.scrollValue._value, });
+    this.updateView({value: this.props.scrollValue.__getValue(), });
   },
 
   onContainerLayout(e) {
     this._containerMeasurements = e.nativeEvent.layout;
-    this.updateView({value: this.props.scrollValue._value, });
+    this.updateView({value: this.props.scrollValue.__getValue(), });
   },
 });
 

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 {
@@ -10,17 +10,19 @@ const {
   ScrollView,
   Platform,
   StyleSheet,
-  ViewPagerAndroid,
   InteractionManager,
 } = ReactNative;
+
+const ViewPagerAndroid = require('@react-native-community/viewpager');
 const TimerMixin = require('react-timer-mixin');
+const ViewPager = require('@react-native-community/viewpager');
 
 const SceneComponent = require('./SceneComponent');
 const DefaultTabBar = require('./DefaultTabBar');
 const ScrollableTabBar = require('./ScrollableTabBar');
 
 const AnimatedViewPagerAndroid = Platform.OS === 'android' ?
-  Animated.createAnimatedComponent(ViewPagerAndroid) :
+  Animated.createAnimatedComponent(ViewPager) :
   undefined;
 
 const ScrollableTabView = createReactClass({
@@ -30,6 +32,7 @@ const ScrollableTabView = createReactClass({
     ScrollableTabBar,
   },
   scrollOnMountCalled: false,
+  tabWillChangeWithoutGesture: false,
 
   propTypes: {
     tabBarPosition: PropTypes.oneOf(['top', 'bottom', 'overlayTop', 'overlayBottom', ]),
@@ -38,7 +41,12 @@ const ScrollableTabView = createReactClass({
     onChangeTab: PropTypes.func,
     onScroll: PropTypes.func,
     renderTabBar: PropTypes.any,
-    style: ViewPropTypes.style,
+    tabBarUnderlineStyle: DeprecatedPropTypes.ViewPropTypes.style,
+    tabBarBackgroundColor: PropTypes.string,
+    tabBarActiveTextColor: PropTypes.string,
+    tabBarInactiveTextColor: PropTypes.string,
+    tabBarTextStyle: PropTypes.object,
+    style: DeprecatedPropTypes.ViewPropTypes.style,
     contentProps: PropTypes.object,
     scrollWithoutAnimation: PropTypes.bool,
     locked: PropTypes.bool,
@@ -107,13 +115,13 @@ const ScrollableTabView = createReactClass({
     };
   },
 
-  componentWillReceiveProps(props) {
-    if (props.children !== this.props.children) {
-      this.updateSceneKeys({ page: this.state.currentPage, children: props.children, });
+  componentDidUpdate(prevProps) {
+    if (this.props.children !== prevProps.children) {
+      this.updateSceneKeys({ page: this.state.currentPage, children: this.props.children, });
     }
 
-    if (props.page >= 0 && props.page !== this.state.currentPage) {
-      this.goToPage(props.page);
+    if (this.props.page >= 0 && this.props.page !== this.state.currentPage) {
+      this.goToPage(this.props.page);
     }
   },
 
@@ -130,14 +138,15 @@ const ScrollableTabView = createReactClass({
     if (Platform.OS === 'ios') {
       const offset = pageNumber * this.state.containerWidth;
       if (this.scrollView) {
-        this.scrollView.getNode().scrollTo({x: offset, y: 0, animated: !this.props.scrollWithoutAnimation, });
+        this.scrollView.scrollTo({x: offset, y: 0, animated: !this.props.scrollWithoutAnimation, });
       }
     } else {
       if (this.scrollView) {
+        this.tabWillChangeWithoutGesture = true;
         if (this.props.scrollWithoutAnimation) {
-          this.scrollView.getNode().setPageWithoutAnimation(pageNumber);
+          this.scrollView.setPageWithoutAnimation(pageNumber);
         } else {
-          this.scrollView.getNode().setPage(pageNumber);
+          this.scrollView.setPage(pageNumber);
         }
       }
     }
@@ -298,10 +307,11 @@ const ScrollableTabView = createReactClass({
     }
 
     const currentPage = this.state.currentPage;
-    this.updateSceneKeys({
+    !this.tabWillChangeWithoutGesture && this.updateSceneKeys({
       page: localNextPage,
       callback: this._onChangeTab.bind(this, currentPage, localNextPage),
     });
+    this.tabWillChangeWithoutGesture = false;
   },
 
   _onChangeTab(prevPage, currentPage) {
@@ -332,7 +342,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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-scrollable-tab-view",
-  "version": "0.8.0",
+  "version": "1.1.0",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -29,9 +29,11 @@
   },
   "homepage": "https://github.com/brentvatne/react-native-scrollable-tab-view#readme",
   "dependencies": {
-    "react-timer-mixin": "^0.13.3",
+    "@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",
-    "create-react-class": "^15.6.2"
+    "react-timer-mixin": "^0.13.3"
   },
   "devDependencies": {
     "babel-eslint": "^6.1.2",