Carousel Scroll Interference with Layout Scroll on Android

I am experiencing an issue with the carousel scroll interfering with the layout scroll exclusively on Android devices. When attempting to scroll through the carousel, the transition is not smooth and often stops midway. In some cases, there is no transition at all.

Steps to Reproduce:

Run the application on an Android device. Add a carousel component inside a scrollable layout. Attempt to scroll through the carousel. Expected Behavior:

The carousel should scroll smoothly without interfering with the layout scroll, and transitions should complete as expected.

Actual Behavior:

The carousel scroll interferes with the layout scroll. Transitions are not smooth and often stop midway. Sometimes, no transition occurs. Environment:

React Native version: 0.74.1 react-native-reanimated-carousel: 3.5.1

Additional Information:

This issue does not occur on iOS devices. I have tested with multiple Android devices and the problem persists. Any guidance or fixes would be greatly appreciated.

Videos: https://github.com/dohooo/react-native-reanimated-carousel/assets/53793722/70888d4e-e343-4a35-9c37-2c22fd0ff6aa

Hi @esantana21! I'm here to help you with any bugs or questions you have while waiting for a human maintainer. Let's work together to solve this issue.

To resolve the issue where the carousel scroll interferes with the layout scroll on Android devices, causing transitions to be not smooth or to stop midway, you can try the following steps:

Update to the Latest Version: Ensure you are using the latest version of react-native-reanimated-carousel. The changelog indicates several bug fixes related to scrolling and animation issues. Updating to the latest version might resolve your issue.

Check for Known Issues and Fixes: The changelog mentions a specific fix for scrolling on Android in version 0.4.2:

## [0.4.2](https://github.com/dohooo/react-native-reanimated-carousel/compare/v1.1.0...v1.2.0-beta.3) (2021-09-09)

### Bug Fixes

-   fixed scrolling on Android ([d253b3c](https://github.com/dohooo/react-native-reanimated-carousel/commit/d253b3cc30538a2702dceeb2be37c99fb2ee2d67))

Use the pagingEnabled Prop: Ensure that the pagingEnabled prop is set correctly. This prop can help in making the scroll transitions smoother.
Optimize Carousel Settings: Adjust the carousel settings such as loop, autoplay, and snapToInterval to see if they improve the scroll behavior.
Configure Pan Gesture: When using the carousel inside a ScrollView or FlatList, ensure that the unused axis does not impede the scroll of the list. You can change the activeOffsetX of the gesture handler to achieve this:
```
<Carousel
  {...}
  onConfigurePanGesture={gestureChain => (
    gestureChain.activeOffsetX([-10, 10])
  )}
/>
```

Here is an example of how you might configure the carousel:

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

const MyCarousel = () => {
  return (
    <Carousel
      data={[...Array(10).keys()]}
      renderItem={({ item }) => (
        <View>
          <Text>{item}</Text>
        </View>
      )}
      width={300}
      height={200}
      loop={true}
      autoplay={true}
      pagingEnabled={true}
      onConfigurePanGesture={gestureChain => (
        gestureChain.activeOffsetX([-10, 10])
      )}
    />
  );
};

export default MyCarousel;

If the issue persists after trying these steps, it might be beneficial to check the GitHub issues page for any similar reported issues and potential workarounds ^[1]^[2].

To continue talking to Dosu, mention @dosu.

dohooo / react-native-reanimated-carousel

Carousel Scroll Interference with Layout Scroll on Android #641