Animated styles are not properly reactive in V3, but an extra touch triggers rerendering

[bglgwyng]

Description

Animated styles from useAnimatedStyle is not applied immediately when it is recomputed. I don't mean that there are few frames passed. It's just not applied until there comes an extra touch on the screen.

Expected behavior:

Screen_Recording_20230420_173413_Reanimated3Sandbox.mp4

You can see the red rectangle and the green rectangle appears at once when the button gets pressed.

Actual behavior:

Screen_Recording_20230420_172426_Reanimated3Sandbox.mp4

You can see the green rectangle doesn't appear the first time. But after the extra touch comes, then it does.

I tested on iPhone 13, Galaxy S10, and Galaxy S20 and an Android emulator. The behaviors were the same.
One more strange behavior is that when I tested it via Expo Snack here, it worked properly.

More context

Once I posted this on Discussions.
After that, I saw a PR titled Add setImmediate implementation to the UI runtime and expected that they are relevant. So I tested the same code with Reanimated V3 and observed the behavior described here.

Steps to reproduce

1. Clone the repo below
2. Press 'Press me' button.
3. See the green rectangle not visible
4. Touch anywhere on the screen and the green rectangle shows up

Snack or a link to a repository

https://github.com/bglgwyng/Reanimated3Sandbox/tree/animated-style-test

Reanimated version

3.0.2

React Native version

0.71.6

Platforms

Android

JavaScript runtime

Hermes

Workflow

React Native (without Expo)

Architecture

Paper (Old Architecture)

Build type

Debug mode

Device

Real device

Device model

Samsung Galaxy S10

Acknowledgements

Yes

[tomekzaw]

Should be fixed with #4329 which will be released in 3.1.0 today.