Fix: ViewPager does not scroll after props.data changed
Reproduce step First, init the viewpager with only 1 item:
const { items } = this.state; // items = [{...}]; // only one element
<ViewPager
ref={c => window.ViewPagerInstance = c}
data={items}
/>
Then, after fetching items from API, bind new items:
this.setState({ items: newItemsFromAPI })
Actual result Can not swipe between pages.
Expected result Can swipe.
Debuging As I can see:
ViewPagerInstance.pageCount === 1; // still eq 1 after bind `data={list of 20 items}`
So, _getScrollEnabled function will return false
As a result, ScrollView > scrollEnabled was disabled:
<ScrollView
...
scrollEnabled={this._getScrollEnabled()}
...
Coverage decreased (-0.3%) to 53.412% when pulling 7867aa9fa0aa8b994c2b855ac7969ec1d84f823a on luatnd:master into 4eadd62a2b300e87a9753371eb8b806bc2f1d541 on meinto:master.
Hi, thanks for your pull request.
I tried to reproduce the case, but i didn't get it work like explained. When i initialize a dataSource and then update it, the Viewpager can be scrolled as expected:
// what i tried:
export default class PseudoComponent extends PureComponent {
constructor() {
this.state = {
dataSource: [{ ... }]
}
}
update = () => {
this.setState({
dataSource: [{...}, {...}, {...}]
}
}
render() {
return (
<ViewPager
...
data={this.state.dataSource}
/>
)
}
}
What other properties do you provide to the ViewPager Component?
Could be that there is an unwanted interaction between single properties.