Flickering effect when swiping

[MarcLopezAvila]

There is a a logic to cause a page change when swiping beyond the middle of the current screen and when that happens there is a flickering effect I understand caused because the internal array of items and buffer are updated. Is there any solution to that? I tried many confugurations but couldn't solve this. It happens also with the most basic example provided. You can notice the flickering while the numbers are updated.

Not sure how the solution should look like but probably, some logic could be done at the end of the swipe to avoid doing it while the user is swiping, causing the flickering effect due to those internal state updates.

Any help would be very appreciated, thanks!

[terreng]

As far as I can tell this only happens on Android, I haven't seen it on iOS or on the web.

Here's a video that shows the flickering when passing over the halfway point.

The flickering might not be visible when watching this video on a 60 Hz screen, because the screen recording is 90fps. Watch the video at 0.5x speed to see it.

https://github.com/user-attachments/assets/2291b093-dd08-4453-8020-f32e6825f883

Here's a still frame from one of the flickers, showing that the left page becomes misaligned briefly.

[pehkay]

I noticed this effect too.

[MarcLopezAvila]

Does anyone have a solution to it?

[computerjazz]

What version of reanimated are you on? There are known performance issues starting in 3.9.0 that have recently been addressed: https://github.com/software-mansion/react-native-reanimated/issues/6247#issuecomment-2235977637

https://github.com/software-mansion/react-native-reanimated/pull/6218

[MarcLopezAvila]

Hi! Thank you for your quick response @computerjazz , I am using "react-native-reanimated": "3.10.1" which is the one bundled for the latest Expo version 51. I tried to use a different one, either superior or inferior to 3.9.0 but it is not possible since it is bundled with Expo.

I ended up creating a development build with the latest version of reanimated, 3.15.0 and the fickering persists

[peterjskaltsis]

@MarcLopezAvila are you using initialIndex / onPageChange props by any chance?

[MarcLopezAvila]

I am not using initialIndex but I do use onPageChange. My thoughts are that it is because onPageChange is triggered while the user is swiping and not at the end of the swipe so the setStates or anything triggered by the onPageChange is causing some rerender bottleneck and that causes the flickering. I would say that is a common usage anyway.

[pehkay]

Maybe check if the setState is setting undesired value e.g undefined?

[terreng]

I am not using onPageChange, but the flickering still happens.

[audrius-savickas]

does anyone have a solution? I'm not using neither onPageChange, nor initialIndex, but issue still happens. I tried upgrading Reanimated from 3.11.0 to 3.15.1, but no difference as far as I can tell - FPS drops heavily between the pages transition and there is a gap between slides. I'm able to get the FPS down from 60 to 30 by constantly swiping near the transition mark.