Index incorrect when data length changed.

[nightness]

Demo to reproduce:
https://github.com/nightness/carousel-bug

Existing Behaviour:
When swiping left to right on the 0th (initial) item, loads more but changes currentIndex to the end of the list after data updates.

Desired Behaviour:
When I add to the length of data, the current Index doesn't change. I don't want to see that jump to the end of the list of data.

[dohooo]

Re #191, #181

Some known problems are logical issues, such as this
#181 (comment)

[dohooo]

Do you have any good ideas about controlling the index when dynamic modifying the data length? I think setting it manually is the safe way because I don't know what the user wants the index to do.
And if the data set changed, I don't know which item is the prevent item. 😵‍💫

[nightness]

I had a chance to take a good look at the code today, and yes, I've some ideas. Give me a day or two to work on it. I also plan to implement onEndReachedThreshold and onEndReached (like FlatList uses) to keep the scrolling smooth.

[RGDEV2022]

@dohooo is there anyway to get an onIndexChanged or similar prop so that we can set the pagination dot to the next index without needing the item to snap first?

If I want to set a scrollAnimationDuration of 1000 for example, and use onSnapToItem to set the index of the dot, it takes 1sec to update.

Is there a workaround we could use for now?

Edit: Same issue using onProgressChanged as well. There is a lag in the index change

[dohooo]

Can it help you for pagination? @RGDEV2022

[RGDEV2022]

@dohooo I'm confused. Even using that example the index is only changed when the item has actually snapped and it's not immediate on swipe. Here's my code

<Carousel
        ref={carouselRef}
        pagingEnabled
        loop={false}
        mode='vertical-stack'
        snapEnabled
        modeConfig={{
          snapDirection: 'left',
          stackInterval: 15,
          rotateZDeg: 0,
          showLength: 2
        }}
        data={data}
        width={width}
        height={100}
        renderItem={renderItem}
        onProgressChange={(_, absoluteProgress) =>
          setActiveIndex(absoluteProgress)
        }
/>

[dohooo]

@dohooo I'm confused. Even using that example the index is only changed when the item has actually snapped and it's not immediate on swipe. Here's my code

<Carousel
        ref={carouselRef}
        pagingEnabled
        loop={false}
        mode='vertical-stack'
        snapEnabled
        modeConfig={{
          snapDirection: 'left',
          stackInterval: 15,
          rotateZDeg: 0,
          showLength: 2
        }}
        data={data}
        width={width}
        height={100}
        renderItem={renderItem}
        onProgressChange={(_, absoluteProgress) =>
          setActiveIndex(absoluteProgress)
        }
/>

This is the wrong usage. The usage of onProgressChange should refer to this.

And about reanimated value.

[RGDEV2022]

@dohooo I'm not fully understanding why we need to use a usesharedvalue to make this work and being in reanimated. IMO having a setIndex and the index passed in should be enough. Like how the snap-carousel library pagination works.
I'll look into this though thanks.

[dohooo]

@dohooo I'm not fully understanding why we need to use a usesharedvalue to make this work and being in reanimated. IMO having a setIndex and the index passed in should be enough. Like how the snap-carousel library pagination works.
I'll look into this though thanks.

#284

[dohooo]

Hey everyone, This problem was resolved in 3.1.1. Try it!~

Most case are in here.

[nightness]

Hey everyone, This problem was resolved in 3.1.1. Try it!~

Most case are in here.

Thank You!!! :)