Switching items Carousel still stores last view index problem

[MariuzM]

Describe the bug
Carousel is storing last view index in its memory, even if i pass new items to it that memory is not cleared. I have issue when i pass more items like 6 then scroll to its last index and then when i pass 2 items to carousel it still stays ad that 6th index.

Expected behavior
When passing new items to carousel the memory of its last index view should clear and always start from 0

Video example

Screen.Recording.2023-10-13.at.10.13.58.mov

Versions (please complete the following information):
"react": "18.2.0",
"react-native": "0.72.5",
"react-native-reanimated": "~3.3.0",
"react-native-reanimated-carousel": "^3.5.1",
"react-native-gesture-handler": "~2.12.0",

Repo: https://github.com/MariuzM/bun-and-expo/tree/carousel

[MariuzM]

Partly i was able to solve this by

  const ref = useRef<ICarouselInstance>(null);

  useEffect(() => {
    ref.current?.scrollTo({ index: 0 });
  }, [p.items]);

But if i still scroll to index 3 and then chose items with only 2 index it will show blank, again memory issue that its not resenting the index between switching

[MariuzM]

Setting Loop to true solves above but then i end up with using loop which i dont want

[iamdanylo]

Same problem

[YannickLanteri]

@MariuzM @iamdanylo
Instead of passing the prop directly to the Carousel, you can go through a state to trigger the update of the data and then perform the scrollTo.
It works with loop={false}.

  const [data, setData] = useState(dataProps);

  useEffect(() => {
    setData(dataProps)

    carouselRef.current?.scrollTo({ index: 0 });
  }, [dataProps]);