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

Question

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!

Massey

If you use the inspector to choose a visual element on the screen, is the carousel selectable or is there something over it? Shake device -> Show inspector – Turntable

@Turntable I cant detect if there is anything but it doesnt seem like. I click on the opened photo and it selects the photo frame so I guess there is nothing in front – Massey

@Massey which device are you using? I get manual swiping working on the web and iPhone, but not the android. – Slipperwort

@Slipperwort I use android – Massey

Answer 1

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>;
}

Nedry

Now if I wrap this with Modal from the react-native-modal, it doesn't allow the modal to swipe down and close. – Massey

If someone encounter issue with not firing events or full blank screen, Try this out <GestureHandlerRootView style={{ flex: 1 }}> – Wharf

Answer 2

for ios you should add this props into your carousel

 <Carousel
....
      panGestureHandlerProps={{
        activeOffsetX: [-10, 10],
      }} />

Journey