Carousel horizontal swiping doesn't work when react-native-reanimated is on V 3.15.4

[JordanHe]

I was using react-native-reanimated@3.3.0 and my app worked fine for the code below

<Carousel
        loop={false}
        snapEnabled={true}
        panGestureHandlerProps={{
          activeOffsetX: [-10, 10],
        }}
        modeConfig={{
          parallaxScrollingScale: 0.9,
          parallaxScrollingOffset: 50,
        }}
        onSnapToItem={(index) => handleSelect(index)}
        ref={swiperRef}
        style={{
          width: screenWidth,
          justifyContent: "center",
          alignItems: "center",
          alignSelf: "center",
        }}
        width={screenWidth}
        data={[...new Array(items.length).keys()]}
        renderItem={({ index, animationValue }) => (
          <Item
            key={index}
            index={index}
            groups={groups}
            currentGroupIndex={
              parseInt(currentGroupIndex) ? parseInt(currentGroupIndex) : 0
            }
            animationValue={animationValue}
            unitPreference={unitPreference}
          />
        )}
      />

I then upgraded to react-native-reanimated@3.15.4

which caused the above carousel to stop swiping horizontally. I also believe the .scrollTo() function doesn't work either.

I have downgraded back to react-native-reanimated@3.3.0 and its working again.

[dosubot[bot]]

Hey @JordanHe! 👋 I'm here to help you with any bugs, questions, or contributions you have while waiting for a human maintainer.

There is a known issue related to the .scrollTo() function in the react-native-reanimated-carousel repository, which was fixed in version 3.0.4. However, your issue seems to be related to compatibility with react-native-reanimated version 3.15.4, which might have introduced changes affecting the carousel's functionality ^[1].

While I couldn't find specific documentation or examples demonstrating compatibility with react-native-reanimated version 3.15.4, you might want to ensure that all dependencies are correctly set up. The peer dependencies for react-native-reanimated-carousel include react-native-reanimated version 3.0.0 or higher, so version 3.15.4 should be compatible ^[2].

Additionally, there are troubleshooting steps for swiping or gesture handling issues. You can configure the activeOffsetX of the gesture handler to ensure smooth swiping:

<Carousel
  {...}
  onConfigurePanGesture={gestureChain => (
    gestureChain.activeOffsetX([-10, 10])
  )}
/>

This configuration might help resolve the swiping issue ^[3]. If the problem persists, consider checking for any updates or patches in the react-native-reanimated-carousel repository that might address compatibility with the latest react-native-reanimated versions.

To continue talking to Dosu, mention @dosu.