Skip to content

setTimeout() instead of InteractionManager #534

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Jan 30, 2017
Merged

setTimeout() instead of InteractionManager #534

Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
6788f5c
setTimeout() instead of InteractionManager
Dec 22, 2016
f5bcf9f
Undo automatic formatter
Jan 24, 2017
5c4ace0
Using this.setTimeout and console.log elimination
Jan 25, 2017
fc7b1c4
Using both InteractionManager and timeout
Jan 30, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
setTimeout() instead of InteractionManager 
In componentDidMount() of index.js, using a timeout resolves a problem
with scrollView.scrollTo() not working
  • Loading branch information
Gianmarco Leone committed Dec 22, 2016
commit 6788f5cf08e7ebb8947cd3cae9e7c132704f7a51
32 changes: 17 additions & 15 deletions index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,14 +21,14 @@ const ScrollableTabBar = require('./ScrollableTabBar');


const ScrollableTabView = React.createClass({
mixins: [TimerMixin, ],
mixins: [TimerMixin,],
statics: {
DefaultTabBar,
ScrollableTabBar,
},

propTypes: {
tabBarPosition: PropTypes.oneOf(['top', 'bottom', 'overlayTop', 'overlayBottom', ]),
tabBarPosition: PropTypes.oneOf(['top', 'bottom', 'overlayTop', 'overlayBottom',]),
initialPage: PropTypes.number,
page: PropTypes.number,
onChangeTab: PropTypes.func,
Expand All @@ -46,8 +46,8 @@ const ScrollableTabView = React.createClass({
tabBarPosition: 'top',
initialPage: 0,
page: -1,
onChangeTab: () => {},
onScroll: () => {},
onChangeTab: () => { },
onScroll: () => { },
contentProps: {},
scrollWithoutAnimation: false,
locked: false,
Expand All @@ -65,12 +65,14 @@ const ScrollableTabView = React.createClass({
},

componentDidMount() {
InteractionManager.runAfterInteractions(() => {
//InteractionManager.runAfterInteractions(() => {
setTimeout(() => {
Copy link
Collaborator

@skv-headless skv-headless Jan 24, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Use this.setTimeout like in documentation

if (this.scrollView && Platform.OS === 'android') {
console.log("Scrolling to " + this.props.initialPage + " with containerWidth " + this.state.containerWidth);
Copy link
Collaborator

@skv-headless skv-headless Jan 24, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please remove console.log

const x = this.props.initialPage * this.state.containerWidth;
this.scrollView.scrollTo({ x, animated: false });
}
});
}, 0);
},

componentWillReceiveProps(props) {
Expand All @@ -86,7 +88,7 @@ const ScrollableTabView = React.createClass({
goToPage(pageNumber) {
const offset = pageNumber * this.state.containerWidth;
if (this.scrollView) {
this.scrollView.scrollTo({x: offset, y: 0, animated: !this.props.scrollWithoutAnimation, });
this.scrollView.scrollTo({ x: offset, y: 0, animated: !this.props.scrollWithoutAnimation, });
}

const currentPage = this.state.currentPage;
Expand All @@ -106,9 +108,9 @@ const ScrollableTabView = React.createClass({
}
},

updateSceneKeys({ page, children = this.props.children, callback = () => {}, }) {
updateSceneKeys({ page, children = this.props.children, callback = () => { }, }) {
let newKeys = this.newSceneKeys({ previousKeys: this.state.sceneKeys, currentPage: page, children, });
this.setState({currentPage: page, sceneKeys: newKeys, }, callback);
this.setState({ currentPage: page, sceneKeys: newKeys, }, callback);
},

newSceneKeys({ previousKeys = [], currentPage = 0, children = this.props.children, }) {
Expand Down Expand Up @@ -144,11 +146,11 @@ const ScrollableTabView = React.createClass({
pagingEnabled
automaticallyAdjustContentInsets={false}
contentOffset={{ x: this.props.initialPage * this.state.containerWidth, }}
ref={(scrollView) => { this.scrollView = scrollView; }}
ref={(scrollView) => { 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}
Expand All @@ -170,9 +172,9 @@ const ScrollableTabView = React.createClass({
return <SceneComponent
key={child.key}
shouldUpdated={this._shouldRenderSceneKey(idx, this.state.currentPage)}
style={{width: this.state.containerWidth, }}
>
{this._keyExists(this.state.sceneKeys, key) ? child : <View tabLabel={child.props.tabLabel}/>}
style={{ width: this.state.containerWidth, }}
>
{this._keyExists(this.state.sceneKeys, key) ? child : <View tabLabel={child.props.tabLabel} />}
</SceneComponent>;
});
},
Expand Down Expand Up @@ -260,7 +262,7 @@ const ScrollableTabView = React.createClass({
};
}

return <View style={[styles.container, this.props.style, ]} onLayout={this._handleLayout}>
return <View style={[styles.container, this.props.style,]} onLayout={this._handleLayout}>
{this.props.tabBarPosition === 'top' && this.renderTabBar(tabBarProps)}
{this.renderScrollableContent()}
{(this.props.tabBarPosition === 'bottom' || overlayTabs) && this.renderTabBar(tabBarProps)}
Expand Down