Removing last item requires manual swipe to view previous item

[garrettreed]

Describe the bug
Removing the last item in a non-looping carousel remains empty. Any swipe gesture is required to snap the carousel back to the previous item. Other items in the carousel correctly display the next available item when removed.

To Reproduce
Below is a minimum reproducible example. Scrolling to the third item and pressing "Delete Me" shows the behavior.

function Example() {
  const windowWidth = useWindowDimensions().width;
  const [data, setData] = React.useState([1, 2, 3]);

  return (
    <Carousel
      width={windowWidth}
      loop={false}
      data={data}
      renderItem={({ item }) => (
        <View style={{ borderWidth: 1, flex: 1 }}>
          <Text>Item {item}</Text>
          <Pressable
            onPress={() => {
              setData(prev => prev.filter(i => i !== item));
            }}
          >
            <Text>Delete Me</Text>
          </Pressable>
        </View>
      )}
    />
  );
}

Expected behavior
When the last item in the carousel is removed, it should show the new last item.

Screenshots
https://github.com/dohooo/react-native-reanimated-carousel/assets/4079858/66910188-1d83-4ed2-bad3-3a6236e0e275

Versions (please complete the following information):

• react: v18.2.0
• react-native: v0.73.4
• react-native-reanimated: v3.6.2
• react-native-reanimated-carousel: v3.5.1
• react-native-gesture-handler: v2.14.0

Smartphone (please complete the following information):

• Device: iPhone 15 simulator
• OS: iOS 17.2

[Vladislava9009]

Have the same

[hughsoup]

I have this issue too - any known workarounds?

[hughsoup]

Current workaround for me is to use a ref to the carousel: https://rn-carousel.dev/props#ref

Pretty hacky at the moment but hope it can help someone...this is a snippet from the function to delete the image at the current index.

      const currentIndex = carouselRef.current?.getCurrentIndex();
      if (currentIndex === undefined) return;

      // Figure out the new index after deletion
      const newIndex = Math.min(currentIndex, images.length - 2);
      // Delete the currently displayed image
      const newImages = images.filter((_, index) => index !== currentIndex);
      // Update the images - this is tied to the carousel data.
      setImages(newImages);
      // Calling scrollTo seems to redraw the image and make it visible.
      carouselRef.current?.scrollTo({ index: newIndex });