Use `Pagination Custom`，Causing the carousel to get stuck and unable to switch

[Wgga]

Use Pagination Custom，Causing the carousel to get stuck and unable to switch

[dosubot]

Hey @Wgga! I'm here to help you with any issues or questions you have. I can assist with bug troubleshooting, answer technical queries, and guide you on how to contribute. Let's tackle this together!

The carousel getting stuck when using Pagination Custom could be due to several factors:

1. windowSize: If the windowSize is set too high, it can lead to performance issues. Try reducing this number to improve performance.

2. maxScrollDistancePerSwipe and minScrollDistancePerSwipe: Ensure these values are configured properly. If maxScrollDistancePerSwipe is too low or minScrollDistancePerSwipe is too high, it might prevent the carousel from scrolling as expected.

3. enabled: Check if the enabled property is set to true. If it's false, the carousel won't respond to gestures.

4. Size and Style Configuration: Make sure that size, dotStyle.width, dotStyle.height, activeDotStyle.width, and activeDotStyle.height are numbers, not strings. Incorrect types can cause errors.

5. Custom Reanimated Style: Review the logic in customReanimatedStyle. Incorrect interpolation or transformation logic can lead to unexpected behavior.

Adjusting these configurations should help resolve the issue with the carousel getting stuck ^[1][2].

To continue talking to Dosu, mention @dosu.

---

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Bug Report | Other}

[Wgga]

The carousel can not switch normally, but the pagination can switch normally, which should be due to gesture reasons

[Wgga]

@dohooo

[Wgga]

Hey @Wgga! I'm here to help you with any issues or questions you have. I can assist with bug troubleshooting, answer technical queries, and guide you on how to contribute. Let's tackle this together!

The carousel getting stuck when using could be due to several factors:Pagination Custom

1. windowSize: If the is set too high, it can lead to performance issues. Try reducing this number to improve performance.windowSize
2. maxScrollDistancePerSwipe and minScrollDistancePerSwipe: Ensure these values are configured properly. If is too low or is too high, it might prevent the carousel from scrolling as expected.maxScrollDistancePerSwipe``minScrollDistancePerSwipe
3. enabled: Check if the property is set to . If it's , the carousel won't respond to gestures.enabled``true``false
4. Size and Style Configuration: Make sure that , , , , and are numbers, not strings. Incorrect types can cause errors.size``dotStyle.width``dotStyle.height``activeDotStyle.width``activeDotStyle.height
5. Custom Reanimated Style: Review the logic in . Incorrect interpolation or transformation logic can lead to unexpected behavior.customReanimatedStyle

Adjusting these configurations should help resolve the issue with the carousel getting stuck [1][2].

To continue talking to Dosu, mention @dosu.

Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Bug Report | Other

The carousel can not switch normally, but the pagination can switch normally, which should be due to gesture reasons

[omarabualhija]

I'm facing the same issue in the basic implementation: horizontal swiping gets stuck on iOS, while it works perfectly fine on Android.

Here's my code

import * as React from 'react';
import { Dimensions, Text, View } from 'react-native';
import { useSharedValue } from 'react-native-reanimated';
import CarouselL, { ICarouselInstance, Pagination } from 'react-native-reanimated-carousel';

const data = [...new Array(6).keys()];
const width = Dimensions.get('screen').width;

function Carousel() {
  const ref = React.useRef<ICarouselInstance>(null);
  const progress = useSharedValue<number>(0);

  const onPressPagination = (index: number) => {
    ref.current?.scrollTo({
      /**
       * Calculate the difference between the current index and the target index
       * to ensure that the carousel scrolls to the nearest index
       */
      count: index - progress.value,
      animated: true,
    });
  };

  return (
    <View style={{ flex: 1, paddingTop: 100 }}>
      <CarouselL
        ref={ref}
        width={width}
        height={width / 2}
        data={data}
        onProgressChange={progress}
        renderItem={({ index }) => (
          <View
            style={{
              flex: 1,
              borderWidth: 1,
              justifyContent: 'center',
            }}
          >
            <Text style={{ textAlign: 'center', fontSize: 30 }}>{index}</Text>
          </View>
        )}
      />

      <Pagination.Basic
        progress={progress}
        data={data}
        dotStyle={{ backgroundColor: 'rgba(0,0,0,0.2)', borderRadius: 50 }}
        containerStyle={{ gap: 5, marginTop: 10 }}
        onPress={onPressPagination}
      />
    </View>
  );
}

export default Carousel;

"react-native-reanimated": "^3.17.4",
"react-native-reanimated-carousel": "4.0.0",
"react": "18.3.1",
"react-native": "^0.76.3",

Note the lib working fine when downgrade the version to "4.0.0-canary.18",

[dosubot]

Hi, @Wgga. I'm Dosu, and I'm helping the react-native-reanimated-carousel team manage their backlog and am marking this issue as stale.

Issue Summary:

• You reported an issue with the Pagination Custom feature causing the carousel to become stuck, likely due to gesture-related problems.
• I suggested checking configurations like windowSize, maxScrollDistancePerSwipe, and enabled properties.
• You confirmed that pagination works normally, indicating a gesture issue.
• Another user, omarabualhija, reported a similar issue with horizontal swiping on iOS, which works fine on Android, and found that downgrading to version 4.0.0-canary.18 resolves the issue.

Next Steps:

• Please let me know if this issue is still relevant to the latest version of the react-native-reanimated-carousel repository. If it is, you can keep the discussion open by commenting on the issue.
• Otherwise, this issue will be automatically closed in 7 days.

Thank you for your understanding and contribution!