ViewPagerAndroid and dynamic swiper content

[vvusts]

I use swiper datasource that can be dynamic.

When I load swiper with 5 items and reduce it to 2 items and then increase to 3 items only two items are rendered 3rd it blank screen.

This scenario works perfect on ios. This happens only on android.

I dig a bit and found that ViewPagerAndroid component is actually problem here. I discovered that if I put key={Math.random()} fix the issue but then I loose animation between items. I tried to put key={this.children.length}and this doesn't work.

Do you have some suggestion on how to fix this on android to work and to have animations? I am in trouble as main part of the app is based on this component.

One more thing. Swiper is part of modal component. When issue occurs and I dismiss modal view and bring it back again it load 3 items correctly. I don't know what happen there but seems like some restart of swiper. Maybe I can restart swiper somehow but don't know how to do it.

Thanks

[vvusts]

Actually I am in hell of dead line so I made one change that actually fix this. But I need some of authors to confirm me that this will not cause some other issues.

• function scrollBy()

  //if (Platform.OS !== 'ios') {
  //  this.scrollView && this.scrollView[animated ? 'setPage' : 'setPageWithoutAnimation'](diff)
  //} else {
    this.scrollView && this.scrollView.scrollTo({ x, y, animated })
  //}

• function renderScrollView()

  renderScrollView = pages => {
    return (
      <ScrollView ref={this.refScrollView}
        {...this.props}
        {...this.scrollViewPropOverrides()}
        contentContainerStyle={[styles.wrapperIOS, this.props.style]}
        contentOffset={this.state.offset}
        onScrollBeginDrag={this.onScrollBegin}
        onMomentumScrollEnd={this.onScrollEnd}
        onScrollEndDrag={this.onScrollEndDrag}
        style={this.props.scrollViewStyle}>
        {pages}
      </ScrollView>
     )

  } As you can see I removed some android related code with idea to use ScrollView for both. And it works, no animation issue no dynamic item changes problem.

What do you think is this valid solution?

[appielife]

Only one constant image is getting loaded . Any idea on how to change that

[SSTPIERRE2]

Rule of thumb for rendering dynamic content:

• I'd imagine you're looping through the data to render, so make sure you set a key prop in the top element and make sure to use a unique key, don't use the index

Long form answer: My team and I at work are using this package for something similar, rendering a dynamic number of views form some survey question data. This first issue we ran into was giving each view a unique key as we mapped through the data (simple array map function call in render method of the swiper component), so make sure you don't just use the index here (we used the unique question names).

Note on ViewPagerAndroid and swiper "restarting"

• It sounds like you may have run into a similar issue as we recently ran into where:
  • your swiper component state gets updated so that more or less items will be rendered i.e. new views are added, or some are removed, or both
  • this would cause the DOM nodes to be torn down, deleting the state of all child components rendered by the swiper, essentially "restarting" it (that's just how I interpreted your comment, feel free to correct me 😄 )

What I did to fix that last bullet point

• ViewPagerAndroid was the issue for us, I don't know why just yet, but changing the platform specific code in renderScrollView() of this package as well as the platform specific code in _scrollBy() to just use the iOS version made this work
  • With this change we're able to update the state of the swiper parent component from child components and not cause the entire state tree to be torn down