reactjs - How do I fix this images flicker issue on swiping? - Stack Overflow

I've built a card stack ui which shows multiple images as a stack and we can remove them by swiping. But when i swipe left to remove image it flickers once at its original place. i haven't been able to fix it. can some one please let me know what i am doing wrong

Code: gist

screen recording: video

I've tried using claude to figure it out but couldn't

Edit: reproducealbe issue in expo snack

I've built a card stack ui which shows multiple images as a stack and we can remove them by swiping. But when i swipe left to remove image it flickers once at its original place. i haven't been able to fix it. can some one please let me know what i am doing wrong

Code: gist

screen recording: video

I've tried using claude to figure it out but couldn't

Edit: reproducealbe issue in expo snack

• reactjs
• react-native
• expo

Share Improve this question Follow edited Feb 5 at 17:08 muaz azhar asked Feb 3 at 12:27 muaz azharmuaz azhar 133 bronze badges 1

• Please provide enough code so others can better understand or reproduce the problem. – Community Bot Commented Feb 3 at 22:12

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

For better engagement with your question, please fix the link in your question header. I had to copy and paste the URL to see your code, which isn't ideal for those trying to help. A properly formatted link makes it much easier for everyone to understand the context.

The flickering you're seeing with your image is likely due to the asynchronous nature of setState. Because setState doesn't update the state immediately, your animation completes before the slide change actually happens. In your current code, you likely have several asynchronous operations happening in sequence, compounding the issue. The animation finishes, then the state updates, causing the image to "flicker" as it catches up.

Here's a revised approach that addresses this (is an example to help you not the solution):

if (dx < 0 && activeIndex < slides.length - 1) {
          setActiveIndex((prev) => prev +  1)
          swipeX.value = () => {
            swipeX.value = 0;
            belowCardRotation.value = 7;
          };
         
        }