remove unnecessary unsafe componentWillReceiveProps

.npmignore

@@ -0,0 +1 @@
+Example

README.md

@@ -1,4 +1,4 @@
-[![npm version](https://badge.fury.io/js/react-native-dynamic-tab-view.svg)](https://badge.fury.io/js/react-native-dynamic-tab-view)
+a fork of https://github.com/yeswanth/react-native-dynamic-tab-view 
 
 ## Features 
 - Easy to use and easy to read code
@@ -8,10 +8,6 @@
 - Dynamic tab data that can be populated by code (typically tabs are determined by an API call) 
 - Ability to select any index (and just the zeroth index) as the default index. 
 
-## How to use
-Simply install by running `yarn add react-native-dynamic-tab-view`
-
-Use it by 
 
 ```
 import DynamicTabView from 'react-native-dynamic-tab-view';
@@ -52,34 +48,3 @@ Here `data` is of the format
 1. `cd Example`
 2. `npm install`
 3. `react-native run-android` or `react-native run-ios`
-
-
-or try expo: [Dynamic Tab View Example](https://snack.expo.io/@har2008preet/vigorous-apples)
-
-## FAQs
-
-### Why are you building another TabView library? 
-At present, there are two tabView libraries that are out there 
-* [react-native-scrollable-tab-view](https://www.google.com/search?q=react-native-scrollable-tab-view)
-* [react-native-tab-view](https://github.com/react-native-community/react-native-tab-view)
-I have used both of them and I had multitude of issues with them. 
-* `react-native-scrollable-tab-view` 
-  - Doesn't have proper maintainence. Last update was back in October. There are lot of open PRs. 
-  - Code is bloated and I tried fixing issues, but couldn't navigate my way through 
-  - Uses different code for Android and iOS and therefore I had issues like some view works with Android well and not with iOS and viceverca 
-* `react-native-tab-view`
-  - Uses different code for Android and iOS
-  - Couldn't get default page selected working with this. 
-  - Built and works well for static views (dynamic tabs doesn't work very well with Android)
-
-
-### How's react-native-dynamic-tab-view different?
-- Uses same code for Android and iOS 
-- More importantly, uses FlatList for creating the tabViews 
-- Easy to read code 
-
-### Contributors 
-* [@yeswanth](https://github.com/yeswanth)
-* [@priyathamv](https://github.com/priyathamv)
-* [@indupal](https://github.com/indupal)
-* [@har2008preet](https://github.com/har2008preet) - Expo Example

src/DynamicTabView.js

@@ -49,43 +49,60 @@ class DynamicTabView extends React.Component {
 
   onScrollBeginDrag = e => {
     var begin_offset = e.nativeEvent.contentOffset.x; //since horizontal scroll view begin
-    // console.log(begin_offset);
+    console.log("DynamicTabView == onScrollBeginDrag begin_offset ",begin_offset);
     this.setState({ begin_offset });
   };
 
   onScrollEndDrag = e => {
     var end_offset = e.nativeEvent.contentOffset.x; // since horizontal scroll view end
-    // console.log(end_offset)
+    console.log("DynamicTabView == onScrollEndDrag end offset",end_offset)
     this.setState({ end_offset });
   };
 
   // To calculate Page scroll from left->right or right->left
-  _onCalculateIndex = (begin_offset, end_offset, width) => {
-    var begin_offset = this.state.begin_offset;
-    var end_offset = this.state.end_offset;
-    var width = this.state.containerWidth;
-
-    if (begin_offset < end_offset) {
-      let index = Math.floor(begin_offset / width) + 1; // if Page scroll from left->right, index is increase by 1
-
-      if (index < this.props.data.length) {
-        this.goToPage(index);
-      }
-    } else if (begin_offset > end_offset) {
-      let index = Math.ceil(begin_offset / width) - 1; // if Page scroll from right->left, index is decrease by 1
-
-      if (index < this.props.data.length && index >= 0) {
-        this.goToPage(index);
-      }
-    }
-  };
+  // _onCalculateIndex = (begin_offset, end_offset, width) => {
+  //   var begin_offset = this.state.begin_offset;
+  //   var end_offset = this.state.end_offset;
+  //   var width = this.state.containerWidth;
+
+  //   // console.log("DynamicTabView == _onCalculateIndex end_offset ",end_offset)
+  //   // console.log("DynamicTabView == _onCalculateIndex begin_offset ",begin_offset)
+  //   // console.log("DynamicTabView == _onCalculateIndex width ",width)
+
+
+  //   console.log("DynamicTabView == _onCalculateIndex end_offset - begin_offset ", end_offset - begin_offset)
+  //   console.log("DynamicTabView == _onCalculateIndex width / 2 ", width / 2)
+
+  //   if (end_offset - begin_offset >= width/2) {
+  //     let index = Math.floor(begin_offset / width) + 1; // if Page scroll from left->right, index is increase by 1
+  //     if (index < this.props.data.length) {
+  //       this.goToPage(index);
+  //     }
+  //   } else if (begin_offset - end_offset >= width / 2) {
+  //     let index = Math.ceil(begin_offset / width) - 1; // if Page scroll from right->left, index is decrease by 1
+  //     if (index < this.props.data.length && index >= 0) {
+  //       this.goToPage(index);
+  //     }
+  //   }
+  // };
+
+  onScrollEnd = (e) => {
+    let contentOffset = e.nativeEvent.contentOffset;
+    let viewSize = e.nativeEvent.layoutMeasurement;
+    let pageNum = Math.floor(contentOffset.x / viewSize.width);
+    this.goToPage(pageNum);
+  }
 
   _onLayout = e => {
+
     const { width } = e.nativeEvent.layout;
+    console.log("DynamicTabView == _onLayout width",width)
+
     this.setState({ containerWidth: width });
   };
 
   _renderTab = ({ item, index }) => {
+    console.log("DynamicTabView == _renderTab index = ", index)
     return (
       <View
         style={[
@@ -100,6 +117,7 @@ class DynamicTabView extends React.Component {
   };
 
   _renderHeader = () => {
+    console.log("DynamicTabView _renderHeader")
     return (
       <View
         style={[
@@ -117,7 +135,6 @@ class DynamicTabView extends React.Component {
           headerBackgroundColor={this.props.headerBackgroundColor}
           headerTextStyle={this.props.headerTextStyle}
           headerUnderlayColor={this.props.headerUnderlayColor}
-          highlightStyle={this.props.highlightStyle}
         />
       </View>
     );
@@ -137,15 +154,17 @@ class DynamicTabView extends React.Component {
           ref={flatView => {
             this.flatView = flatView;
           }}
+          showsHorizontalScrollIndicator={false}
           styleCustomization={this.props.styleCustomization}
           renderItem={this._renderTab}
           scrollEventThrottle={10}
           keyboardDismissMode={"on-drag"}
           getItemLayout={this.getItemLayout}
           pagingEnabled={true}
-          onMomentumScrollBegin={this._onCalculateIndex}
-          onScrollBeginDrag={this.onScrollBeginDrag}
-          onScrollEndDrag={this.onScrollEndDrag}
+          // onMomentumScrollBegin={this._onCalculateIndex}
+          onMomentumScrollEnd={this.onScrollEnd}
+          // onScrollBeginDrag={this.onScrollBeginDrag}
+          // onScrollEndDrag={this.onScrollEndDrag}
         />
       </View>
     );

src/DynamicTabViewScrollHeader.js

@@ -5,23 +5,14 @@ class DynamicTabViewScrollHeader extends React.Component {
   constructor(props) {
     super(props);
     this.defaultStyle = DynamicdefaultStyle;
-    this.state = {
-      selected: this.props.selectedTab
-    };
   }
 
   _onPressHeader = index => {
     this.props.goToPage(index);
   };
 
-  componentWillReceiveProps(nextProps) {
-    if (nextProps.selectedTab !== this.props.selectedTab) {
-      this.setState({ selected: nextProps.selectedTab });
-    }
-  }
-
   _renderTitle = ({ item, index }) => {
-    let isTabActive = index === this.state.selected;
+    let isTabActive = index === this.props.selectedTab;
     let fontWeight = isTabActive ? "bold" : "normal";
     return (
       <TouchableHighlight
@@ -83,7 +74,6 @@ class DynamicTabViewScrollHeader extends React.Component {
         bounces={false}
         showsHorizontalScrollIndicator={false}
         data={this.props.data}
-        extraData={this.state}
         renderItem={this._renderTitle}
         style={[
           this.defaultStyle.headerStyle,

src/package.json

@@ -1,10 +1,10 @@
 {
-    "name": "react-native-dynamic-tab-view",
-    "version": "1.0.6-0",
+    "name": "react-native-top-tabs",
+    "version": "1.0.0",
     "main": "index.js",
     "repository": {
         "type": "git",
-        "url": "https://github.com/yeswanth/react-native-dynamic-tab-view",
+        "url": "https://github.com/maherzaidoune/react-native-dynamic-tab-view",
         "directory": "src/"
     },
     "peerDependencies": {