react-native-snap-carousel: Infinite loop is not working using loop={true} enableSnap ={true} in android

Infinite loop is not working using loop={true} , enableSnap ={true} list is not scrolling infinte mode in android

Actual Behavior

i m displaying the list in card and the card is not scrolling in the infinite mode it get strucked in middle in android

Expected Behavior

Card should be scroll in the infinite mode while scrolling

Code

 <Carousel
          ref={c => {
            this._carousel = c;
          }}
          carouselRef={this.props._slider1Ref}
          data={this.props.data}
          renderItem={this._renderItem}
          sliderWidth={this.props.sliderWidth}
          itemWidth={this.props.itemWidth}
          loop={true}
          loopClonesPerSide={this.props.loopClonesPerSide}
          firstItem={this.props.firstItem}
          onSnapToItem={index => this.onSnap(index)}
          layout={this.props.layout}
          layoutCardOffset={this.props.layoutCardOffset}
          showSpinner={this.props.showSpinner}
          activeSlideAlignment="start"
          useScrollView={false}
          activeSlideOffset={this.props.activeSlideOffset}
          lockScrollWhileSnapping={true}
          enableSnap={true}
          enableMomentum={false}
          activeSlideOffset={this.props.activeSlideOffset}
          decelerationRate="fast"
         // removeClippedSubviews={true}
          removeClippedSubviews={false}
        />

Environment

“react-native”: “0.61.1”, “react-native-snap-carousel”: “^3.8.1”

About this issue

Original URL
State: open
Created 5 years ago
Reactions: 2
Comments: 45 (1 by maintainers)

Most upvoted comments

Hi all, I have solved that issue in my app. sliderWidth and itemWidth must be integers.

<Carousel loop={true} data={products} renderItem={renderItem} inactiveSlideScale={1} inactiveSlideOpacity={1} sliderWidth={Math.round(deviceWidth)} itemWidth={Math.round(deviceWidth * 0.37)} />

+18

alextyshchenko on Dec 24, 2021

useScrollView={true}
firstItem={data.length}
initialScrollIndex={data.length}
getItemLayout={(data, index) => (
          {length: width, offset: width * index, index}
)}
horizontal={true}
loop={true}
loopClonesPerSide={data.length}
data={data.banners}

This worked for me

+14

har2008preet on Nov 1, 2019

@JoaoCEAlmeida In line number ~820 in Carousel.js file, we have this code -

if (nextActiveItem === this._itemToSnapTo && scrollOffset === this._scrollOffsetRef) { this._repositionScroll(nextActiveItem); }

So scrollOffset and this._scrollOffsetRef didn’t have same numbers after the decimal. Not sure what causes this. But truncating the decimal part of it before checking equality fixed this issue for me - Math.trunc(scrollOffset) === Math.trunc(this._scrollOffsetRef).

Hope this helps !

+12

Tejaswini-PD on Aug 25, 2020

大家好，我已经在我的应用程序中解决了这个问题。 sliderWidth 和 itemWidth 必须是整数。

<Carousel loop={true} data={products} renderItem={renderItem} inactiveSlideScale={1} inactiveSlideOpacity={1} sliderWidth={Math.round(deviceWidth)} itemWidth={Math.round(deviceWidth * 0.37)} />

quick swipe will not work

linxianxi on Apr 18, 2022

I have created a video showing the inconsistency in loop behavior:

Inconsistent Looping

ThatMate on Jul 24, 2020

@ThatMate I am facing the same issue where the scroll stops to the right at 3rd slide during second loop. When we scroll to left, infinite scroll is working properly. Have you found any fix for it ?

Tejaswini-PD on Aug 6, 2020

comment out this line under Crousel.js return this._carouselRef && this._carouselRef.getNode && this._carouselRef.getNode();

Thanks me later!

Saad9624 on May 17, 2021

I think I might be overreacting, it maybe just the standard issue in emulator as mentioned here: https://github.com/archriss/react-native-snap-carousel#important-note-regarding-android

I will have a check. Sorry for the noise.

ThatMate on Jul 24, 2020