<Carousel /> with customAnimation crashes on Expo SDK 52 with new arch enabled

[carter-0]

Describe the bug

Using <Carousel /> with customAnimation on Expo SDK 52 with new arch enabled will instantly crash the app on iOS, untested on Android.

To Reproduce
Steps to reproduce the behavior:

import * as React from "react";
import { Dimensions, View } from "react-native";
import { interpolate } from "react-native-reanimated";
import Carousel, { TAnimationStyle } from "react-native-reanimated-carousel";

const scale = 0.9
const PAGE_WIDTH = Dimensions.get("window").width * scale
const PAGE_HEIGHT = 140 * scale

function Index() {
    const animationStyle: TAnimationStyle = React.useCallback(
        (value: number) => {
            "worklet"

            const zIndex = interpolate(value, [-1, 0, 1], [10, 20, 30])
            const scale = interpolate(value, [-1, 0, 1], [1.25, 1, 0.25])

            const rotateZ = `${interpolate(
                value,
                [-1, 0, 1],
                [-45, 0, 45],
            )}deg`

            const translateX = interpolate(
                value,
                [-1, 0, 1],
                [-PAGE_WIDTH, 0, PAGE_WIDTH],
            )

            const opacity = interpolate(value, [-0.75, 0, 1], [0, 1, 0])

            return {
                transform: [{ scale }, { rotateZ }, { translateX }],
                zIndex,
                opacity,
            }
        },
        [],
    )

    return (
        <View style={{ flex: 1 }}>
            <Carousel
                loop
                style={{
                    width: Dimensions.get("window").width,
                    height: 140,
                    justifyContent: "center",
                    alignItems: "center",
                }}
                width={PAGE_WIDTH}
                height={PAGE_HEIGHT}
                data={[...new Array(4).keys()]}
                renderItem={({ index }) => {
                    return <View key={index} style={{ width: PAGE_WIDTH, height: PAGE_HEIGHT, backgroundColor: "red" }} />
                }}
                autoPlay={true}
                autoPlayInterval={5000}
                customAnimation={animationStyle}
            />
        </View>
    );
}

export default Index

The app will crash once the autoPlayInterval has elapsed. This replicates with other customAnimations from https://rn-carousel.dev/custom-animations.

Versions (please complete the following information):

• react: v18.3.1
• react-native: v0.76.6
• react-native-reanimated: v3.16.6
• react-native-reanimated-carousel: v4.0.0-canary.22
• react-native-gesture-handler: v2.20.2

Smartphone (please complete the following information):

• Device: iPhone
• OS: iOS 18

[dosubot]

Hey @carter-0! I'm here to help you with any bugs, questions, or contributions you have. Let's work together to solve this issue!

The crash you're experiencing on iOS when using <Carousel /> with customAnimation on Expo SDK 52 with the new architecture enabled is due to a precision error in the zIndex calculation. To fix this, you can modify the zIndex calculation in your animationStyle function by adding Math.round() to the zIndex interpolation:

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

This adjustment should resolve the 'Loss of precision during arithmetic conversion' error. Additionally, ensure that you are using the latest version of react-native-reanimated-carousel, as a patch has been released to address this issue with the new architecture enabled ^[1].

To continue talking to Dosu, mention @dosu.

---

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

[carter-0]

This can be fixed by changing

const zIndex = interpolate(value, [-1, 0, 1], [10, 20, 30])
to
const zIndex = Math.round(interpolate(value, [-1, 0, 1], [10, 20, 30]))

Taken from #712 (comment)

edit: apparently @dosubot beat me to it