source code of Tinder stack example crashes app because of zIndex

[joostwmd]

Describe the bug I tried to use the carousel component to build a tinder like card stack swiper as shown in this example. I used this source code as a starting point. The card stack rendered but as soon as I started swiping, the app crashed.

I suspected that something in the animationStyle was the culprit so i removed all values from this return statement:

return { transform: [ { translateY }, { translateX }, { rotateZ:${rotateZ}deg}, { scale }, ], zIndex, opacity, }; and added them back in step by step.

As soon as I added back the zIndex in the return statement the app crashes. The calculations are not the problem, because the app does not crash with the zIndex calculations present, but as soon as the calculated value is returned, it does not work anymore.

To Reproduce Steps to reproduce the behavior:

1. Start a new expo project, install the necessary dependencies and build a development client
2. Install the development client
3. Copy the source code into your app and replace any broken imports with mock data
4. Swipe on the card deck and the app crashes.

Versions (please complete the following information):

• react: v19.0.0
• react-native: v0.79.5
• react-native-reanimated: v3.17.4
• react-native-reanimated-carousel: v4.0.3
• react-native-gesture-handler: v2.24.0

Smartphone (please complete the following information):

• Device: [e.g. iPhoneX]
• OS: [e.g. iOS16.7.11]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context Add any other context about the problem here.

[dosubot[bot]]

Hi @joostwmd! I'm Dosu and I’m helping the react-native-reanimated-carousel team.

This crash happens because zIndex in React Native styles must be an integer, but the animated value is often a float. When you return a non-integer zIndex in your animated style, it triggers a 'Loss of precision during arithmetic conversion' error and crashes the app. The fix is to wrap your zIndex calculation with Math.round before returning it, like this:

return {
  transform: [
    { translateY },
    { translateX },
    { rotateZ: `${rotateZ}deg` },
    { scale },
  ],
  zIndex: Math.round(zIndex),
  opacity,
};

This workaround is confirmed to resolve the crash across iOS, Android, and Expo, and is compatible with your library versions. More details and examples are available in this GitHub issue.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}    

[joostwmd]

Okay, wow that was the issue. Thank you.

[dosubot[bot]]

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

Issue Summary:

• You reported a crash when including the zIndex property in the animationStyle of the Tinder stack example on React Native 0.79.5.
• The crash was due to zIndex being set to a float animated value, which caused a precision error.
• The recommended fix was to wrap the zIndex calculation with Math.round to ensure it is an integer.
• You confirmed that applying Math.round resolved the crash issue.

Next Steps:

• Please let me know if this issue is still relevant with the latest version of react-native-reanimated-carousel by commenting here.
• If I don’t hear back within 7 days, I will automatically close this issue.

Thanks for your understanding and contribution!