react-native-viewpager-carousel icon indicating copy to clipboard operation
react-native-viewpager-carousel copied to clipboard

Fix: ViewPager does not scroll after props.data changed

Open luatnd opened this issue 6 years ago • 2 comments

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()}
          ...

luatnd avatar Mar 28 '19 04:03 luatnd

Coverage Status

Coverage decreased (-0.3%) to 53.412% when pulling 7867aa9fa0aa8b994c2b855ac7969ec1d84f823a on luatnd:master into 4eadd62a2b300e87a9753371eb8b806bc2f1d541 on meinto:master.

coveralls avatar Mar 28 '19 04:03 coveralls

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.

meinto avatar Mar 29 '19 14:03 meinto