React-native-snap-carousel: carousel stop when i swiper to right, it can't loop

Created on 18 Jul 2018  路  7Comments  路  Source: meliorence/react-native-snap-carousel

screen shot 2018-07-04 at 11 57 17 am
my code:

<Carousel
                    layout={'default'}
                    data={this.state.entries}
                    renderItem={this._renderItem.bind(this)}
                    sliderWidth={viewportWidth}
                    itemWidth={viewportWidth*0.575}
                    loop={true}
                    firstItem={2}
                    loopClonesPerSide={10}
                    //enableMomentum={true}
                    enableSnap={true}
                    inactiveSlideScale={0.95}
                    inactiveSlideOpacity={0.8}
                    onSnapToItem={(index) => this.setState({currentSwiperFilm:index}) }
/>

example when i swiper end of right, slider not loop
68747470733a2f2f692e696d6775722e636f6d2f574e4f4259666c2e676966

contribution? reproduction?

Most helpful comment

I had this exact problem on iOS yesterday and fixed it by stopping the render of hidden slides:

_renderItem ({item, index}) {
    // Fix for carousel stopping tap event after the second slide
    if (Platform.OS === 'android' || (this.state.slideIndex - 1) <= index) {
      return (<MyItem />)
}

My guess is that the 'hidden' slides are actually sitting on top of the carousel, thus preventing tap/slide events on the shown slide.

Note this does not fix the root issue, but is a (dirty) work around. I didn't have time yesterday to write a full bug report.. and now you have posted one for me :)

Edit: My Carousel setup (using Stack layout)

<Carousel
            ref={(c) => {
              this._carousel = c;
            }}
            layout={'stack'}
            layoutCardOffset={10}
            data={this.state.data}
            firstItem={this.state.slideIndex}
            renderItem={this._renderItem}
            sliderWidth={Dimensions.get('window').width}
            itemWidth={Dimensions.get('window').width * 0.85}
            onSnapToItem={(slideIndex) => {
              LayoutAnimation.configureNext(LayoutAnimation.Presets.linear)
              this.setState({slideIndex})
            }}
          />

All 7 comments

I had this exact problem on iOS yesterday and fixed it by stopping the render of hidden slides:

_renderItem ({item, index}) {
    // Fix for carousel stopping tap event after the second slide
    if (Platform.OS === 'android' || (this.state.slideIndex - 1) <= index) {
      return (<MyItem />)
}

My guess is that the 'hidden' slides are actually sitting on top of the carousel, thus preventing tap/slide events on the shown slide.

Note this does not fix the root issue, but is a (dirty) work around. I didn't have time yesterday to write a full bug report.. and now you have posted one for me :)

Edit: My Carousel setup (using Stack layout)

<Carousel
            ref={(c) => {
              this._carousel = c;
            }}
            layout={'stack'}
            layoutCardOffset={10}
            data={this.state.data}
            firstItem={this.state.slideIndex}
            renderItem={this._renderItem}
            sliderWidth={Dimensions.get('window').width}
            itemWidth={Dimensions.get('window').width * 0.85}
            onSnapToItem={(slideIndex) => {
              LayoutAnimation.configureNext(LayoutAnimation.Presets.linear)
              this.setState({slideIndex})
            }}
          />

鈿狅笍 You did not follow the contributing guidelines!

As stated in these:

You need to fill out the issue template. This step is mandatory! Not doing so will result in your issue getting closed. Don't take this personally if this happens, and feel free to open a new issue once you've gathered all the information required by the template.


@nguyenvanphuc2203 Please provide a Snack example that reproduces the issue, otherwise we won't be able to help you and the thread will be closed. You've already been asked to do so in #347.

@se1exin Your issue is not the same since it has to do with custom layouts and a pesky zIndex issue. But your guess is definitely right ;-) Please see #262 for more info and to find out some workarounds.

i had add gif image demo my issue, please help me :(

screen shot 2018-07-19 at 11 56 30 am
i see in docs props , Number of clones to append to each side of the original items, but it not append to end of right

@nguyenvanphuc2203 Ok, so you not only don't care about what's asked of you in order to assist you (e.g. reading and filling the issue template, providing a snack example), you also downvote the very people who are devoting their spare time to maintain/improve the plugin and help others.

This behavior is not popular around here and is not going to get you anywhere. Good luck figuring things out on your own!

@bd-arc Hello, I am so sorry on how you get treated sometimes. I strongly believe open source project maintainers are extremely underrated.

I have made a snack showing the issue, but there is something weird going on, it works on expo's web simulator but not on device.

The issue again, is the it loops to the left but not to the right.

If you have the time, please test the snack on a real iOS device using the Expo App

Hi @LuisRodriguezLD,

I'll soon be working on an update that, hopefully, will fix a lot of issues like this one. Fingers crossed though, because it will still rely on ScrollView and FlatList which have a long history of not being that reliable...

Was this page helpful?
0 / 5 - 0 ratings