React-native-snap-carousel: Autoplay doesn't work after scrolling one loop with vertical property

[LeviDeng]

Environment

React: 16.0.0-alpha.12
React native: 0.54.4
react-native-snap-carousel: 3.7.2

Target Platform:

Android (7.0)
iOS (10.3)

Steps to Reproduce

<Carousel
  loop={true}
  autoplay={true}
  vertical={true}
  sliderWidth={36}
  itemHeight={36}
  data={/*just two item*/}
  ...
/>

Actual Behavior

Autoplay doesn't work after scrolling one loop

[bd-arc]

Hi @MelonDeng,

Could you please share a simple Snack example that reproduces the issue?

[LeviDeng]

@bd-arc sure, here it is:
https://snack.expo.io/rkgnecBmQ
You'll see the Carousel can't loop back after scrolling at the last one.
Thanks!

[Ding95]

same issue

[bd-arc]

@MelonDeng @Ding95 Just a quick update: I'm currently working on replacing the FlatList component with another one. My hope is to make this kind of irritating bug disappear completely.

I'll keep you posted!

[StephentTom]

same issue

[MiRinZhang]

same issue

[CrazyStoneJy]

Have you solved it?

[pandrawla]

same issue

[Xaber20110202]

Same issue, I tried many props, cost almost 6 hours.

Then I found this:

Set sliderHeight, itemHeight to 41 (50, or larger), it works.

And if styles must need to be 36, you can set a wrapper View to wrap Carousel component, then set the wrapper View's height to 36, and adjust the styles.

Like this

render = () => {
    const height = 46
    return <View style={{ height: 24 }}>
      <Carousel
        containerCustomStyle={{ position: 'relative', top: (46 - 24) / 2 }}
        ref={(c) => { this._carousel = c }}
        data={[ xxx, xxx, xxx ]}
        renderItem={this.renderItem}
        inactiveSlideScale={1}
        inactiveSlideOpacity={1}
        sliderHeight={height}
        itemHeight={height}
        inverted
        vertical
        loop
        useNativeDriver
        autoplay={true}
        autoplayDelay={3000}
        autoplayInterval={3000}
    />
    </View>
  }

[wxsms]

@Xaber20110202 life saver. thank you very much.