Android manual swiping is not working

[jpmazza]

Describe the bug
Carousel does not swipe or animate on Android. It works fine on iOS. The carousel renders and looks correct, but swipe gestures are ignored and no animation happens. This happens even in a minimal setup. I’m using the latest recommended versions.

To Reproduce

• The root component is wrapped with GestureHandlerRootView.
• Minimal Carousel component:

import Carousel from 'react-native-reanimated-carousel';
import {Dimensions, View, Text} from 'react-native';

const data = [0, 1, 2, 3, 4];
const width = Dimensions.get('window').width;

export default function Demo() {
  return (
    <Carousel
      width={width}
      height={width / 2}
      data={data}
      renderItem={({index}) => (
        <View style={{flex: 1, justifyContent: 'center', borderWidth: 1}}>
          <Text style={{textAlign: 'center', fontSize: 30}}>{index}</Text>
        </View>
      )}
    />
  );
}

Expected behavior
Carousel should respond to swipe gestures and scroll through items smoothly.

Screenshots
If applicable, add screenshots to help explain your problem.

Versions (please complete the following information):

• react: v19.0.0
• react-native: v0.79.2
• react-native-reanimated: v3.17.5
• react-native-reanimated-carousel: v4.0.2
• react-native-gesture-handler: v2.25.0

Smartphone (please complete the following information):

• Device: Pixel 8 API 35
• OS: Android

Additional context
I verified:

• The root is wrapped in GestureHandlerRootView.
• I've tried wrapping Carousel with GestureHandlerRootView.
• Hermes is enabled, remote debugging off.
• No console errors or warnings on Android.
• Carousel works fine on iOS and is only broken on Android.

[dosubot]

Hi @jpmazza! I'm Dosu and I’m helping the react-native-reanimated-carousel team.

This issue has been reported by others and is related to gesture handling changes in recent versions of react-native-reanimated-carousel. Here are the key steps to resolve manual swiping not working on Android:

1. Make sure your entire App.tsx is wrapped with GestureHandlerRootView, not just the carousel or a subtree. Wrapping only the carousel is not sufficient for gesture handling on Android in some cases. Example:

   // App.tsx
   import { GestureHandlerRootView } from 'react-native-gesture-handler';
   
   export default function App() {
     return (
       <GestureHandlerRootView style={{ flex: 1 }}>
         {/* Your app content */}
       </GestureHandlerRootView>
     );
   }

   Reference

2. With v4.x, the library migrated to a new gesture handler API. You may need to explicitly configure the pan gesture. Add the onConfigurePanGesture prop to your Carousel:

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

   Reference

3. If you previously used panGestureHandlerProps, update your code to use onConfigurePanGesture instead, as per the v4 migration guide. Reference

These steps should resolve swipe gestures not working on Android. If you have already wrapped your root with GestureHandlerRootView and still see the issue, try adding the onConfigurePanGesture prop as shown above.

To reply, just mention my name @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}   

[jpmazza]

@dosu @dohooo I've already tried what you said and still not working. Actually my implementation is the following:

const CarouselComponent = memo(
  ({
    segments,
    maxHeight,
    onHeightChange,
  }: {
    segments: SegmentType[] | undefined;
    maxHeight: number;
    onHeightChange: (height: number) => void;
  }) => {
    const dispatch = useDispatch();
    const defaultHeight = windowWidth * 0.71 + windowHeight * 0.26;
    const imageHeight = windowWidth * 0.71;
    const heightAnim = useRef(new Animated.Value(defaultHeight)).current;

    useEffect(() => {
      if (!maxHeight) return;

      Animated.timing(heightAnim, {
        toValue: maxHeight + imageHeight,
        duration: 300,
        useNativeDriver: false,
        easing: Easing.linear,
      }).start();
    }, [maxHeight]);

    return (
      <>
        <Steps length={segments?.length || 0} />
        <View style={{ height: 400 }}>
          <Carousel
            loop={false}
            width={windowWidth}
            vertical={false}
            modeConfig={{
              parallaxScrollingScale: 1,
              parallaxAdjacentItemScale: 1,
            }}
            onConfigurePanGesture={(gesture) => {
              'worklet';

              gesture.activeOffsetX([-10, 10]);
            }}
            data={segments || []}
            mode="parallax"
            onProgressChange={(_, absoluteProgress) => {
              if (
                Math.abs(
                  store.getState().dailyFlowManager.progressValue -
                    absoluteProgress,
                ) > (Platform.OS === 'ios' ? 0.05 : 0.1)
              ) {
                dispatch(updateProgressValue(absoluteProgress));
              }
            }}
            windowSize={2}
            scrollAnimationDuration={250}
            renderItem={({ item, index }) => (
              <SegmentCards
                index={index}
                segment={item}
                key={item.id}
                onHeightChange={onHeightChange}
              />
            )}
          />
        </View>
      </>
    );
  },
);

[dosubot]

Thanks for sharing your implementation. Based on everything you've tried and the research into the library and related issues, there are no known conflicts with Redux or Animated.Value/timing animations that would directly block gestures on Android. The gesture handling code in the library is designed to integrate user-defined gesture callbacks and should not interfere with standard React Native animations or Redux dispatches.

Since you've already wrapped your app with GestureHandlerRootView and set up onConfigurePanGesture as recommended, here are a few targeted troubleshooting steps:

1. Try commenting out the Animated.Value and Animated.timing logic to see if the carousel responds to swipes without any custom animations. This will help rule out any interference from the native Animated API.
2. Temporarily remove Redux-related logic (such as useDispatch and onProgressChange) to isolate the carousel. If gestures start working, reintroduce features one by one to identify the conflict.
3. Double-check that there are no parent components (such as ScrollView, FlatList, or custom gesture handlers) that might be capturing or blocking gestures before they reach the carousel. The FAQ notes that gesture suppression can occur if the carousel is nested inside other scrollable views.
4. Ensure that your Android build is fully clean (clear build cache, uninstall the app, and reinstall) to rule out any stale native code issues.

If none of these steps resolve the issue, it may be specific to your environment or a subtle interaction with another part of your app. There are currently no open issues or documentation indicating a general Android gesture handling bug in the latest versions of the library.

Let me know if isolating the carousel in this way changes the behavior, or if you discover any new clues!

To reply, just mention my name @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}   

[jpmazza]

I've tried everything you mention. The only think that I can add is that this component is inside a ScrollView.
Anyway, I think we need @dohooo input here.

[jpmazza]

It seems is not working because the carousel is on Tab.Screen of @react-navigation/material-top-tabs ^7.2.13.

swipeEnabled is false but still not working.

If I move the carousel out of this navigator works well.