Search code examples
react-nativereact-native-reanimated

Why react-native-reanimated-carousel does not allow manual swiping?


I am using react-native-reanimated-carousel ^2.5.0 and it does show photos as it should but when I try to swipe left or right it does not do anything, it does not scroll nor shows any errors.

Here are dependencies related to it:

"react-native-reanimated": "^2.4.1",
"react-native-reanimated-carousel": "^2.5.0",
"react-native-gesture-handler": "^2.4.2",

and here is the Carousel code:

<Carousel
  width={windowWidth * 1.1}
  data={newImgArr}
  windowSize={10}
  loop={true}
  mode={'parallax'}
  autoPlay={false}
  renderItem={({ item }, index) => {
     return (
        <FastImage
           source={{
              uri: item,
              priority: FastImage.priority.high,
              cache: FastImage.cacheControl.immutable,
           }}
           style={{ flex: 1 }}
           resizeMode={FastImage.resizeMode.cover}
        />
     );
  }}
/>

I would really appreciate some help here!


Solution

  • This problem was already mentioned in a resolved issue.

    You just have to wrap your Carousel in GestureHandlerRootView.

    export default function App() {
      return <GestureHandlerRootView>{/* content */}</GestureHandlerRootView>;
    }