Parallax animation with new architecture Enabled cause "Loss of precision during arithmetic conversion: (long) XX.XXXX"

[thibaultcapelli]

Describe the bug

If I use the parallax mode with new architecture enabled it cause the following issue while animation is playing.

To Reproduce Steps to reproduce the behavior:

1. Enable new architecture (See the doc)
2. Go to example expo app
3. Click on the parallax demo
4. Enable autoplay
5. Wait and see

Expected behavior

The demo should run without error

Versions (please complete the following information):

• "react": "18.2.0",
• "react-native": "0.74.5",
• "react-native-reanimated": "~3.10.1",
• "react-native-reanimated-carousel": "4.0.0-canary.17",
• "react-native-gesture-handler": "~2.16.1",

Smartphone (please complete the following information):

• Device: Pixel 7a
• OS: Android 14

References: Related to #712

[dosubot[bot]]

Hello, @thibaultcapelli! I'm here to help you with any bugs, questions, or contributions. Let's work together to solve the issue you're experiencing.

A similar issue was discussed in a closed thread regarding the "Loss of precision during arithmetic conversion" error when using parallax animation with the new architecture enabled ^[1]. To resolve this, ensure that all numeric values used in the interpolate function and other calculations are explicitly defined as floating-point numbers. This can be done by appending a decimal point to integer literals or using floating-point literals directly. Here's an example of how you can adjust your code:

const translateY = interpolate(
  value,
  [-1, 0, 1],
  [-size + parallaxScrollingOffset, 0, size - parallaxScrollingOffset],
);

const translateX = interpolate(
  value,
  [-1, 0, 1, 2],
  [-size * 0.2, 0, 0, -size * 0.2],
);

const zIndex = interpolate(
  value,
  [-1, 0, 1, 2],
  [0, size, size, 0],
  Extrapolation.CLAMP,
);

const scale = interpolate(
  value,
  [-1, 0, 1, 2],
  [
    parallaxAdjacentItemScale,
    parallaxScrollingScale,
    parallaxScrollingScale,
    parallaxAdjacentItemScale,
  ],
  Extrapolation.CLAMP,
);

const transform = {
  transform: [
    { translateY },
    { translateX },
    { perspective: 200.0 }, // Ensure this is a floating-point number
    {
      rotateY: `${interpolate(
        value,
        [-1, 0, 1, 2],
        [20.0, 0.0, 0.0, 20.0], // Use floating-point numbers
        Extrapolation.CLAMP,
      )}deg`,
    },
    {
      rotateZ: `${interpolate(
        value,
        [-1, 0, 1, 2],
        [-20.0, 0.0, 0.0, -20.0], // Use floating-point numbers
        Extrapolation.CLAMP,
      )}deg`,
    },
    { scale },
  ],
};

By ensuring that all numbers are treated as floating-point, you can avoid precision loss during arithmetic conversions ^[2].

To continue talking to Dosu, mention @dosu.

[Bekaxp]

We can link them, as it looks like the same issue => #712 , thanks.

[thibaultcapelli]

We can link them, as it looks like the same issue => #712 , thanks.

Thanks, I missed your issue. Take a look to the PR. I'm using yarn patch for now

[Bekaxp]

I applied the patch. I can confirm that it works. Thanks for a quick solution and your lib. 👍

[usmanabid94]

@Bekaxp @dohooo @thibaultcapelli @rdewolff @berdyshev I have updated to the below mentioned version and still face the same issue "react-native-reanimated": "^3.16.1", "react-native-reanimated-carousel": "4.0.0-canary.17",