iOS crash when starting to drag

[rousseau634]

I got this crash

libc++abi: terminating due to uncaught exception of type folly::ConversionError: Loss of precision during arithmetic conversion: (long long) 99.46

    <Carousel
      data={data}
      height={100}
      pagingEnabled={true}
      snapEnabled={true}
      width={Constants.DeviceWidth - 2 * 24}
      style={{
        marginTop: 24,
        alignItems: 'center',
        justifyContent: 'center',
        width: '100%',
        height: 160
      }}
      mode={'vertical-stack'}
      modeConfig={{
        snapDirection: 'left',
        stackInterval: 10
      }}
      customConfig={() => ({ type: 'positive', viewCount: 1 })}
      renderItem={InsightCarouselCell}
    />

Versions (please complete the following information):

• react: 18.3.1

• react-native: 0.76.0

• react-native-reanimated: 3.16.1

• react-native-reanimated-carousel: 4.0.0-canary.22

• react-native-gesture-handler: 2.21.2

• Device: iPhone16 Pro

• OS: iOS18.1

[dosubot[bot]]

Hey @rousseau634, I'm here to help you with your bug! I'm a bot designed to assist with bug fixes, answer questions, and guide you on your journey to becoming a contributor. Let's tackle this issue together!

The crash you're experiencing is due to a folly::ConversionError, which indicates a loss of precision during an arithmetic conversion. This type of error can occur when a value is being converted to a type that cannot accurately represent it, such as converting a floating-point number to an integer.

In the context of react-native-reanimated-carousel, this might be related to how drag events are handled, particularly in the arithmetic operations that calculate translations and velocities during gestures. The onGestureUpdate and onGestureEnd functions in the ScrollViewGesture component perform several arithmetic operations that could potentially lead to precision issues if not handled correctly ^[1].

To address this issue, you might want to:

1. Check if there are any recent updates or patches for the react-native-reanimated-carousel that address precision issues, especially in the version you are using (4.0.0-canary.22).
2. Review the code handling drag events to ensure that all arithmetic operations involving conversions are correctly managed, possibly by using functions that handle precision more robustly.
3. Consider logging the values involved in these operations to identify where the precision loss might be occurring.

If the issue persists, you may need to look into the specific arithmetic operations in your implementation or the library's code to ensure they are not causing precision errors.

To continue talking to Dosu, mention @dosu.

---

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

[satnamSandhu2001]

Same issue in android also

"react-native-reanimated" : "^3.16.6" "react-native-reanimated-carousel" : "^3.5.1"

[chinhfyb12]

same issue in expo also. I realized this bug was related to updating panOffset value in onGestureStart function which is implemented in ScrollViewGesture.tsx.

"react-native-reanimated": "~3.16.1" "react-native-reanimated-carousel": "4.0.0-canary.19"

[satnamSandhu2001]

Only happens when using "mode"

[luimont]

Same issue with:

• "react": "18.3.1",
• "react-native": "0.76.5",
• "react-native-reanimated": "^3.16.1",
• "react-native-reanimated-carousel": "^3.5.1",
• "react-native-gesture-handler": "~2.20.2",

I was solve the issue with the next changes:

Replace the zIndex variable in node_modules/react-native-reanimated-carousel/src/layouts/parallax.ts with this:

const zIndex = Math.round(interpolate(value, [-1, 0, 1], [0, size, 0]));

REFERENCE: https://github.com/dohooo/react-native-reanimated-carousel/issues/712#issuecomment-2497342697

[mustafasenturk]

Loss of precision during arithmetic conversion: (long long)

works, thanks

[nazacity]

Same issue with:

• "react": "18.3.1",
• "react-native": "0.76.5",
• "react-native-reanimated": "^3.16.1",
• "react-native-reanimated-carousel": "^3.5.1",
• "react-native-gesture-handler": "~2.20.2",

I was solve the issue with the next changes:

Replace the zIndex variable in node_modules/react-native-reanimated-carousel/src/layouts/parallax.ts with this:

const zIndex = Math.round(interpolate(value, [-1, 0, 1], [0, size, 0]));

REFERENCE: #712 (comment)

I think I'm facing with stack.ts not parallax.ts

[ibrust]

This same issue is popping up in many different places related to the use of "mode". A fix seems to be the most urgent need at the moment.

[rlomeli158]

still broken, but changing node_modules works

[minotogna]

I'm facing the same problem on the new react native architecture 0.78

Is there any plan to address this issue ?

Thank you 🙏

[dosubot[bot]]

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

Issue Summary:

• The issue involves a crash on iOS when dragging a carousel component due to precision loss during arithmetic conversion.
• It affects both iOS and Android platforms, as noted by multiple users.
• A temporary workaround involves modifying the zIndex variable in the library's code.
• The issue is particularly related to the use of the "mode" feature.
• There is a call for a more permanent fix to address the underlying problem.

Next Steps:

• Please let me know if this issue is still relevant to the latest version of the react-native-reanimated-carousel repository by commenting on this issue.
• If there is no further activity, the issue will be automatically closed in 7 days.

Thank you for your understanding and contribution!