parallax mode, loss of precision during arethmatic conversion

[icarus-00]

Describe the bug
currently i am using expo sdk52 after bumping up my project from 51 to 52 and using the new architecture the error "Loss of precision during arithmetic conversion" kept occurring i traced the issue to a component using the carousel with parallax mode

import React, { useState, useEffect } from "react";
import { View, Image, StyleSheet, Dimensions } from "react-native";
import Animated, { useSharedValue } from "react-native-reanimated";
import Carousel from "react-native-reanimated-carousel";

const { width, height } = Dimensions.get("window");

const AdCarousel = () => {
  const images = [
    require("@/assets/defaulBannerAd/banner 45 ad 1.png"),
    require("@/assets/defaulBannerAd/banner 45 ad 2.png"),
    require("@/assets/defaulBannerAd/banner 45 ad 3.png"),
  ];

  const [activeIndex, setActiveIndex] = useState(0);
  const progress = useSharedValue(0);

  const carouselWidth = width;
  const carouselHeight = width / 2;

  return (
    <View style={styles.container}>
      <Carousel
        mode="parallax"
        loop
        width={carouselWidth}
        height={carouselHeight}
        autoPlay={true}
        data={images}
        scrollAnimationDuration={1000}
        onProgressChange={(_, absoluteProgress) => {
          progress.value = absoluteProgress;
        }}
        autoPlayInterval={5000}
        renderItem={({ item }) => (
          <View style={styles.imageContainer}>
            <Image
              source={item}
              style={[
                styles.image,
                {
                  width: carouselWidth,
                  height: carouselHeight,
                },
              ]}
              resizeMode="cover"
            />
          </View>
        )}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    width: "100%",
    alignItems: "center",
    justifyContent: "center",
  },
  imageContainer: {
    width: "100%",
    alignItems: "center",
    justifyContent: "center",
  },
  image: {
    borderRadius: 10,
  },
});

export default AdCarousel;

//excuse my horrible looking code

To Reproduce

1. initialize new expo project with the latest sdk and new arch enabled
2. install react-native-carousel using npx expo install react-native-carousel
3. make two components, one with parallax mode and one without

Expected behavior
using the carousel component in normal mode doesn't cause any issue, and in expo51 using any mode didn't cause any issues
i didn't test turning off the new arch, but i'll try that and comment on the issue

Screenshots

that's the only screenshot i can provide, the other one is of my app with the carousel having no parallax effect

Versions (please complete the following information):

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

Smartphone (please complete the following information):

• Device: using xiaomi redmi note 10 and iphone 11 pro
• OS: android 13 and iOS 18

Additional context
Add any other context about the problem here.

[dosubot]

Hey there, @icarus-00! I'm here to help you out with any bugs, questions, or contributions you might have. Let's tackle this together!

There is a similar issue that was reported and resolved regarding the "Loss of precision during arithmetic conversion" error when using the parallax mode in the react-native-reanimated-carousel component. The issue was closed by a pull request that addressed the problem with the parallax layout when the new architecture was enabled. You can find more details about the issue and the solution in this closed issue and the corresponding pull request.

To resolve the error, you can ensure that any arithmetic operations involving floating-point numbers are correctly handled before casting to a long. In JavaScript, using Math.round can help avoid precision loss. Additionally, make sure your babel.config.js includes the react-native-reanimated/plugin to ensure proper configuration with Expo ^[1].

To continue talking to Dosu, mention @dosu.

---

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

[icarus-00]

using v4.0.0-canary.22 that had the did indeed fix the issue