[Solved] React Native Reanimated Carousel ScrollTo event not working – Carousel

The Problem:

In React Native Reanimated Carousel, the scrollTo event is not working when trying to scroll to a specific image on tap. Other events like .next() and .prev() function properly, but scrollTo(index) does not trigger the desired scrolling behavior.

The Solutions:

Solution 1: Passing an object with index in scrollTo

To fix the issue, the scrollTo function expects an object with the index as a key. The correct syntax for scrollTo in this case is:

carouselRef.current.scrollTo({index: index})

Solution 2: Triggering Paging Manually

To enable paging manually using the Carousel component, try adding the following properties:

pagingEnabled={true}
scrollEnabled={false}

These properties will disable automatic scrolling and allow you to control paging manually using the .prev() and .next() methods of the Carousel.

Here’s an example:

<Carousel
  ref={carouselRef}
  loop
  width={width}
  height={height}
  pagingEnabled={true}
  scrollEnabled={false}
  data={carTypes}
  mode="parallax"
  defaultIndex={1}
  scrollAnimationDuration={1000}
  onSlideToItem={index => setActiveIndex(index)}
  renderItem={({ item, index }) => (
    <Pressable
      key={index}
      onPress={() => carouselRef.current.scrollTo(index)}
      activeOpacity={0.1}
      style={{
        backgroundColor: activeIndex !== index ? carouselActiveColor(index) : "black",
        borderWidth: 1,
        justifyContent: "center",
        transform: [{ rotate: "32deg" }],
        borderRadius: 32,
        width: 50
      }}
    />
  )}
/>

This will allow you to manually control paging by clicking on the images in the carousel.

Video Explanation:

The following video, titled "React Native FlatList Animations - YouTube", provides additional insights and in-depth exploration related to the topics discussed in this post.

Original solution: https://www.youtube.com/watch?v=i2HRRFEmmqI Wanna learn the fundamentals of declarative Gestures and Animations?