Performance regression or race condition between UI and JS threads

[yolpsoftware]

trafficstars

Description

We had a long-standing problem when we migrated from Reanimated 1.x to the new API of 2.x/3.x. This problem was eventually isolated in #4978 and then resolved.

When we migrated from Expo 50 to 51, the issue regressed. This might be connected to #5816.

At the moment, this blocks our upgrade to Expo 51, since our animations are not usable in that state.

Steps to reproduce

1. Clone the repository https://github.com/yolpsoftware/rea-3-bugrepro-838. We are interested in the branches expo-50 and expo-51.
2. Run it somehow on a simulator or device. Since Expo Go does not allow older versions of Expo anymore, you might have to create a Expo Development Client for the expo-50 branch. I created two Development Clients, one for expo-50 and one for expo-51.
3. If you run the project on the expo-50 branch, you will see green tiles with numbers. These tiles can be swiped down by a pan gesture. The transition will be smooth. The number at the bottom goes off screen, and at the top, the next number appears.

https://github.com/software-mansion/react-native-reanimated/assets/1302357/9c2b2e21-eeaa-494d-8154-7dc32297f74c

4. On the expo-51 branch however, at the end of the pan gesture, you will see the current number flicker for a short time:

https://github.com/software-mansion/react-native-reanimated/assets/1302357/17c935f9-70a9-4aa3-8d98-f657b6c35134

Snack or a link to a repository

https://github.com/yolpsoftware/rea-3-bugrepro-838

Reanimated version

3.10.1

React Native version

0.74.1

Platforms

iOS

JavaScript runtime

Hermes

Workflow

Expo Dev Client

Architecture

None

Build type

None

Device

Real device

Device model

iPhone 13

Acknowledgements

Yes