Skip to content
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

Jump to bottom

Don’t use getItemLayout #47

Closed
wants to merge 2 commits into from
Closed

Don’t use getItemLayout #47

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e1eebc0
Don’t use getItemLayout
infostreams Jan 7, 2018
cc04050
Work around a bug in FlatList
infostreams Jan 7, 2018
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
23 changes: 21 additions & 2 deletions src/libraries/ViewPager/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,6 +108,14 @@ export default class ViewPager extends PureComponent {

const finalX = this.getScrollOffsetOfPage(page);
this.scroller.startScroll(this.scroller.getCurrX(), 0, finalX - this.scroller.getCurrX(), 0, 0);

requestAnimationFrame(() => {
// this is here to work around a bug in FlatList, as discussed here
// https://github.com/facebook/react-native/issues/1831
// (and solved here https://github.com/facebook/react-native/commit/03ae65bc ?)
this.scrollByOffset(1);
this.scrollByOffset(-1);
});
}

componentDidUpdate (prevProps) {
Expand Down Expand Up @@ -237,6 +245,13 @@ export default class ViewPager extends PureComponent {
}

getItemLayout (data, index) {
// this method is called 'getItemLayout', but it is not actually used
// as the 'getItemLayout' function for the FlatList. We use it within
// the code on this page though. The reason for this is that working
// with 'getItemLayout' for FlatList is buggy. You might end up with
// unrendered / missing content. Therefore we work around it, as
// described here
// https://github.com/facebook/react-native/issues/15734#issuecomment-330616697
return {
length: this.state.width + this.props.pageMargin,
offset: (this.state.width + this.props.pageMargin) * index,
Expand Down Expand Up @@ -310,8 +325,12 @@ export default class ViewPager extends PureComponent {
data={pageDataArray}
renderItem={this.renderRow}
onLayout={this.onLayout}
getItemLayout={this.getItemLayout}
initialScrollIndex={(this.props.initialPage || undefined)}

// use contentOffset instead of initialScrollIndex so that we don't have
// to use the buggy 'getItemLayout' prop. See
// https://github.com/facebook/react-native/issues/15734#issuecomment-330616697 and
// https://github.com/facebook/react-native/issues/14945#issuecomment-354651271
contentOffset = {{x: this.getScrollOffsetOfPage(parseInt(this.props.initialPage)), y:0}}
/>
</View>
);
Expand Down