Wrong card rendered on Android + Flickering (Android & iOS)

[Tring-Priyadharshini]

Description
There are two issues happening with react-native-deck-swiper:

• Android → Wrong card is rendered after swiping
• Android & iOS → Flickering occurs during swipe transitions (iOS flickers only, Android flickers + renders wrong card)

Behavior:

Dataset example:
Card A, Card B, Card C, Card D, Card E

Expected behavior:

• Swipe A → B should appear
• Swipe B → C
• … continues sequentially

Actual behavior:
Android:

• While swiping Card A → Card B appears temporarily (preview)
• After completing the swipe → Card C appears instead of Card B
• If I try to swipe the wrongly shown card (Card C) → Card B appears, which is incorrect
• Internal index from onSwiped is always correct, UI is one card ahead
• Flickering occurs during card transitions

iOS:

• Correct card order is shown
• But flickering still happens during swipe transitions

📌 Key Findings

• onSwiped callback always reports the correct next index
• UI rendering gets out of sync only on Android, always +1 card ahead
• Flickering occurs on both platforms (Android + iOS)
• Issue makes the swiper unreliable on Android for sequential card flows

🧪 Environment

React Native: 0.82:1
react-native-deck-swiper: ^2.0.18
Android: OnePlus, Samsung, Oppo
iOS: Stable but flickers

🔧 Tried (No improvement)

• Tried removing the explicitly passed cardIndex to let the swiper handle it internally, but there was no improvement.
• Changing stackSize as 3(even tried with 2), stackSeparation as 12, secondCardZoom as 0.97
• Adding explicit keys
• Forcing re-render
• Wrapping card component with React.memo
• Removing additional transforms/animations
• No change in behavior

Questions

Could you please confirm whether this is a known issue on Android?
Is there any existing workaround for the incorrect card rendering or flickering?
If not, is it possible for this to be addressed in an upcoming patch?

I would really appreciate any suggestions, workarounds, or changes I can apply on my end to help resolve the wrong-card rendering issue on Android and reduce the flickering happening on both platforms.

[corymchambers]

I started noticing this too after upgrading a React Native app. Also on Android and more noticeable as the internet connection gets slower.

[Tring-Priyadharshini]

Thanks for the response. I tested this with a high-speed, stable internet connection, but the issue still persists on Android.

Please let me know if there are any additional configurations, props, or code-level changes I should apply to avoid this incorrect card rendering and flickering issue.

[corymchambers]

I'm still facing this issue as well. I can even reproduce it when using the example code. This did not occur until I recently upgraded the React Native version.

[Tring-Priyadharshini]

@webraptor We’re getting close to our production release deadline, so I wanted to check if there are any patches available or if an upcoming version is planned that includes a fix for this issue.

Any update on timelines would really help us plan our deployment.

[Tring-Priyadharshini]

Does anyone know the solution to this? It would be great if we could find a workaround or patch.

[webraptor]

@Tring-Priyadharshini unless there’s a PR opened and ready for review the issue is not going to get solved.

[AbdulSami16k]

Hey everyone,

The reason this "wrong card index" and heavy flickering happens (especially on Android) is due to the asynchronous nature of the legacy React Native bridge. When you swipe quickly, the PanResponder updates the JS state slower than the native UI thread expects, causing the layout engine to lag, drop frames, and mismatch the current index key during re-renders.

Since the legacy architecture struggles to keep up with Fabric/New Architecture synchronization, I built a drop-in replacement completely from scratch using Reanimated v3 and Gesture Handler.

Because all gesture tracking and card index updates drive synchronously on the Native UI thread, it completely solves both issues:

• Zero Flickering: It integrates perfectly with the modern Fabric engine.
• Accurate Card Ordering: Indices don't mismatch or skip cards because state changes run synchronously via UI worklets.

If you are stuck on this issue in production, feel free to drop this in:
👉 NPM: https://www.npmjs.com/package/react-native-reanimated-deck-swiper

It's fully open-source and ready for production apps on the New Architecture. Let me know if it helps resolve the issue for you!