meinto / react-native-viewpager-carousel

a flexible viewpager library with carousel functionality
MIT License
39 stars 17 forks source link

Fix: ViewPager does not scroll after props.data changed #29

Open luatnd opened 5 years ago

luatnd commented 5 years ago

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()}
          ...
coveralls commented 5 years ago

Coverage Status

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

meinto commented 5 years ago

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.