Dynamically updating data count

[Toyjo]

I am trying to use the carousel in a situation where the number of elements in the data might be reduced dynamically while the carousel is being rendered. By using the scrollTo method, I forced the list to get back to start when this happen. However, this does not prevent the user from scrolling back to the same index leaving a blank page. I could not find an answer in the issues in this project : is It possible to dynamically remove elements from the data without leaving blank pages at the end of the carousel ?

Versions:

react: v18.0.0 react-native: v0.69.3 react-native-reanimated: v2.9.1 react-native-reanimated-carousel: v3.0.5 react-native-gesture-handler: v2.5.0

[oleksandr-dziuban]

Hello @Toyjo , we are experiencing same situation in our project. When we change carousel items count and then set index via scrollTo - it navigates to wrong item..

Could someone take a look?

Thanks in advance

[oleksandr-dziuban]

Hello @dohooo, just adding a bit more context for our issue:

• We have an issue when using loop carousel and for example have 3 items in carousel.
• Then we do 1 swipe from 1st item to last (3rd) (left direction) and add dynamically 4th item in data array.
• When we add 4th item into data array - we need to navigate to this newly created item in our app according to business logic.
• When we navigate to it with carouselRef.current?.scrollTo({ count, animated: true }); with count navigation - we navigated to wrong item as carousel seems we still have 3 items in data array.

P.S. if on step 2 we are swiping right - just to any other next item - everything is OK. So the issue is only exist for negative count swipes.

[dohooo]

Hello @dohooo, just adding a bit more context for our issue:

• We have an issue when using loop carousel and for example have 3 items in carousel.
• Then we do 1 swipe from 1st item to last (3rd) (left direction) and add dynamically 4th item in data array.
• When we add 4th item into data array - we need to navigate to this newly created item in our app according to business logic.
• When we navigate to it with carouselRef.current?.scrollTo({ count, animated: true }); with count navigation - we navigated to wrong item as carousel seems we still have 3 items in data array.

P.S. if on step 2 we are swiping right - just to any other next item - everything is OK. So the issue is only exist for negative count swipes.

Thanks for your detailed info. I'll check it.

[oleksandr-dziuban]

Thanks a lot for you help @dohooo

[talentomobilegbf]

Hi, we are facing the same issue. Is there a solution?

Thanks.

[RobertMrowiec]

@talentomobilegbf Unfortunately, I'm facing it too 😔

[hssdiv]

I have sort of similar problem and temporary workaround for me was <Carousel key={data.length} data={data} />

found it here https://github.com/dohooo/react-native-reanimated-carousel/issues/276#issuecomment-1272439284