diff --git a/.npmignore b/.npmignore new file mode 100644 index 0000000..0c3c67e --- /dev/null +++ b/.npmignore @@ -0,0 +1 @@ +Example \ No newline at end of file diff --git a/README.md b/README.md index cb8096b..41f9c24 100644 --- a/README.md +++ b/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 diff --git a/src/DynamicTabView.js b/src/DynamicTabView.js index 92cfea9..ccc5c9d 100644 --- a/src/DynamicTabView.js +++ b/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 ( { + console.log("DynamicTabView _renderHeader") return ( ); @@ -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} /> ); diff --git a/src/DynamicTabViewScrollHeader.js b/src/DynamicTabViewScrollHeader.js index dc18f06..bbddba0 100644 --- a/src/DynamicTabViewScrollHeader.js +++ b/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 (