From 5d8aeb1f8cc13cdfbb1bf75ea12866548f872edd Mon Sep 17 00:00:00 2001 From: Sokovikov Date: Sun, 9 Oct 2016 21:22:44 +0400 Subject: [PATCH 1/4] use ScrollView instead of ViewPager --- index.js | 84 ++++++++++++++++++-------------------------------------- 1 file changed, 26 insertions(+), 58 deletions(-) diff --git a/index.js b/index.js index 165937e9..c3afc6fb 100644 --- a/index.js +++ b/index.js @@ -9,9 +9,7 @@ const { View, Animated, ScrollView, - Platform, StyleSheet, - ViewPagerAndroid, InteractionManager, } = ReactNative; const TimerMixin = require('react-timer-mixin'); @@ -76,19 +74,9 @@ const ScrollableTabView = React.createClass({ }, goToPage(pageNumber) { - if (Platform.OS === 'ios') { - const offset = pageNumber * this.state.containerWidth; - if (this.scrollView) { - this.scrollView.scrollTo({x: offset, y: 0, animated: !this.props.scrollWithoutAnimation, }); - } - } else { - if (this.scrollView) { - if (this.props.scrollWithoutAnimation) { - this.scrollView.setPageWithoutAnimation(pageNumber); - } else { - this.scrollView.setPage(pageNumber); - } - } + const offset = pageNumber * this.state.containerWidth; + if (this.scrollView) { + this.scrollView.scrollTo({x: offset, y: 0, animated: !this.props.scrollWithoutAnimation, }); } const currentPage = this.state.currentPage; @@ -140,50 +128,30 @@ const ScrollableTabView = React.createClass({ }, renderScrollableContent() { - if (Platform.OS === 'ios') { - const scenes = this._composeScenes(); - return { this.scrollView = scrollView; }} - onScroll={(e) => { - const offsetX = e.nativeEvent.contentOffset.x; - this._updateScrollValue(offsetX / this.state.containerWidth); - }} - onMomentumScrollBegin={this._onMomentumScrollBeginAndEnd} - onMomentumScrollEnd={this._onMomentumScrollBeginAndEnd} - scrollEventThrottle={16} - scrollsToTop={false} - showsHorizontalScrollIndicator={false} - scrollEnabled={!this.props.locked} - directionalLockEnabled - alwaysBounceVertical={false} - keyboardDismissMode="on-drag" - {...this.props.contentProps} + const scenes = this._composeScenes(); + return { this.scrollView = scrollView; }} + onScroll={(e) => { + const offsetX = e.nativeEvent.contentOffset.x; + this._updateScrollValue(offsetX / this.state.containerWidth); + }} + onMomentumScrollBegin={this._onMomentumScrollBeginAndEnd} + onMomentumScrollEnd={this._onMomentumScrollBeginAndEnd} + scrollEventThrottle={16} + scrollsToTop={false} + showsHorizontalScrollIndicator={false} + scrollEnabled={!this.props.locked} + directionalLockEnabled + alwaysBounceVertical={false} + keyboardDismissMode="on-drag" + {...this.props.contentProps} > - {scenes} - ; - } else { - const scenes = this._composeScenes(); - return { - const { offset, position, } = e.nativeEvent; - this._updateScrollValue(position + offset); - }} - ref={(scrollView) => { this.scrollView = scrollView; }} - {...this.props.contentProps} - > - {scenes} - ; - } + {scenes} + ; }, _composeScenes() { From 3f0c01579e998c754f3b0165be2f1470dc96a61b Mon Sep 17 00:00:00 2001 From: Evgeniy Sokovikov Date: Sun, 9 Oct 2016 21:33:51 +0400 Subject: [PATCH 2/4] Create CHANGELOG.md --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) create mode 100644 CHANGELOG.md diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 00000000..8b137891 --- /dev/null +++ b/CHANGELOG.md @@ -0,0 +1 @@ + From 3fd6828809621c5dc0b5bcd4fbc23d4d23848526 Mon Sep 17 00:00:00 2001 From: Evgeniy Sokovikov Date: Fri, 21 Oct 2016 12:03:26 +0400 Subject: [PATCH 3/4] Create LICENSE.md --- LICENSE.md | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) create mode 100644 LICENSE.md diff --git a/LICENSE.md b/LICENSE.md new file mode 100644 index 00000000..a1ad9ca8 --- /dev/null +++ b/LICENSE.md @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2016 Evgeniy Sokovikov + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. From aa39788cf38de60e7359c879f70d43fda49b9cd4 Mon Sep 17 00:00:00 2001 From: alexstroukov Date: Wed, 9 Nov 2016 14:35:39 +0000 Subject: [PATCH 4/4] fix(ScrollableTabBar): ScrollView automaticallyAdjustContentInsets={false} This fixes vertical scrolling of the ScrollableTabBar row behind the View container when its not placed at the top of the page but inside a navigator for instance on ios ScrollView made assumptions about where it was placed and tried to to adjust its container. setting automaticallyAdjustContentInsets={false} gives the styling power back to the container --- ScrollableTabBar.js | 1 + 1 file changed, 1 insertion(+) diff --git a/ScrollableTabBar.js b/ScrollableTabBar.js index e9d41bee..22013a0c 100644 --- a/ScrollableTabBar.js +++ b/ScrollableTabBar.js @@ -166,6 +166,7 @@ const ScrollableTabBar = React.createClass({ onLayout={this.onContainerLayout} > { this._scrollView = scrollView; }} horizontal={true} showsHorizontalScrollIndicator={false}