Infinite loop is not working using loop={true} enableSnap ={true} in android

[srichallamalla935]

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"

[alexaung]

Same thing happening for me. It is swipe first and last item.

[srichallamalla935]

Did u got any solution for infinte loop in android ?? it important for me to work it on android

[har2008preet]

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

[bd-arc]

@har2008preet ⚠️ I strongly advise against that because you're basically rendering thrice your data set. Meaning if you have 10 items in your data prop, you're now rendering 30 items all at once!

[har2008preet]

@bd-arc noted. Will look for other option.

[Ericky14]

@har2008preet Have you found another option for infinite loop?

[TomJKlug]

Loop does not work in android. It either gets stuck or does some really odd index hopping resulting in some insane visuals.

[Yaolegol]

same issue

[qiaoyixuan]

same issue

[har2008preet]

initialScrollIndex={this.props.store.banners.length-3}
                    firstItem={this.props.store.banners.length-3}
                    data={this.props.store.banners}

Working for me, without any overhead. How's this for a hack? @bd-arc 😄

[qiaoyixuan]

what does the number 3 mean？

发自我的iPhone

在 2020年2月10日，16:23，Harpreet Singh [email protected] 写道：

 initialScrollIndex={this.props.store.banners.length-3} firstItem={this.props.store.banners.length-3} data={this.props.store.banners} Working for me, without any overhead. How's this for a hack? @bd-arc 😄

— You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe.

[har2008preet]

3 is the default loopClonePerSide value

[alessandrofc]

Same problem in Android

[Leehee1on]

Same problem in Android

[ghost]

Same problem in Android

[ThatMate]

I have similar experience. Loop works inconsistently.

1. It stops at the end of the last item
2. When you scroll back in the reverse direction after reaching to last item as in step # 1, the loop looks like working in both the direction

I think we need some attention to this issue.

[ThatMate]

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

Inconsistent Looping

[ThatMate]

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.

[har2008preet]

@ThatMate it might fix in the future release #678

[Tejaswini-PD]

@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 ?

[JoaoCEAlmeida]

@Tejaswini-PD I'm having the same problem as you. Did you find any work around?

Thanks in advance.

[Tejaswini-PD]

@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 !

[JoaoCEAlmeida]

@Tejaswini-PD still doesn't work, the behavior is the same. But thanks for the help.

Can you share the props that you're passing to your carousel?

[Tejaswini-PD]

@JoaoCEAlmeida These are the optional props I am using. Data, renderItem, etc are anyways needed. layout={‘default’} sliderWidth={SCREEN_WIDTH} itemWidth={SCREEN_WIDTH} loop autoplay inactiveSlideOpacity={1} inactiveSlideScale={1}

[JoaoCEAlmeida]

@Tejaswini-PD what version are you currently using?

[Tejaswini-PD]

@JoaoCEAlmeida I am using version 3.9.1

[JoaoCEAlmeida]

@Tejaswini-PD Can't make it work, but thanks for the help.

[JoaoCEAlmeida]

+1

[JoaoCEAlmeida]

@ThatMate Did it work for you? I've tested in a real device and still does not work.

Thanks in advance.

[JoaoCEAlmeida]

@Tejaswini-PD how many items are you showing on the screen? I'm showing 4. Can you test your version with 4 items? You just need to divide "itemWidth" prop by 4.