[Android]horizontal-stack animation with new architecture Enabled cause "Loss of precision during arithmetic conversion: (long) XX.X

[nazacity]

After upgrading to 0.76.5 enabled new arch
I also got Loss of precision during arithmetic conversio error too

               <Carousel
                    loop={false}
                    width={SIZES.screenWidth}
                    height={150}
                    autoPlay={false}
                    data={userCard}
                    mode="horizontal-stack"
                    modeConfig={
                        {
                            moveSize: SIZES.screenWidth - 40,
                            showLength: 3,
                            rotateZDeg: 0
                        } as ILayoutConfig
                    }
                    // panGestureHandlerProps={{
                    //     activeOffsetX: [-10, 10]
                    // }}
                    renderItem={_renderCarousel}
                />

 - react: v18.3.1  
 - react-native: v0.76.5  
 - react-native-reanimated: v3.17.0-rc.1
 - react-native-reanimated-carousel: v44.0.0-canary.17
 - react-native-gesture-handler: v2.21.2

I found out that zIndex function here cause the problem.

I replaced it with constants number it works fine I mean it can be slided.

[dosubot]

Hey @nazacity, I'm here to assist you with any bugs, questions, or becoming a contributor. Let's squash those bugs together! 🤖

I found a similar issue that was resolved. The "Loss of precision during arithmetic conversion" error in a horizontal-stack animation with the new architecture enabled in React Native version 0.76.5 can be fixed by modifying the zIndex calculation in node_modules/react-native-reanimated-carousel/src/layouts/parallax.ts. You should replace the existing zIndex calculation with:

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

This fix addresses the issue across iOS, Android, and Expo platforms with the specified versions ^[1].

To continue talking to Dosu, mention @dosu.

---

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

[joaobsantos]

Can you pls patch this with the soluction that dosubot gave, it works. But when building for store we cant do this.

Thx for your work

[ibrust]

same thing is happening with parallax, and the fix is the same.
Please take a look
Thx

[erenkulaksiz]

Hello, i am also encountering this issue. Can we get a fix about this? thanks

[sanduluca]

Here it the patch-package for

{
  "react-native-reanimated-carousel": "^4.0.0-canary.22",
}

File: react-native-reanimated-carousel+4.0.0-canary.22.patch

diff --git a/node_modules/react-native-reanimated-carousel/src/layouts/stack.ts b/node_modules/react-native-reanimated-carousel/src/layouts/stack.ts
index c8f8e06..9f64f70 100644
--- a/node_modules/react-native-reanimated-carousel/src/layouts/stack.ts
+++ b/node_modules/react-native-reanimated-carousel/src/layouts/stack.ts
@@ -301,7 +301,7 @@ function getCommonStyles(opts: {
   }
 
   return {
-    zIndex,
+    zIndex: Math.round(zIndex),
     opacity,
   };
 }