Initial styles are not always applied on first render RN 0.76.0+

[nick-lvov-dev]

Description

I'm using a custom input that has labels that are transforming based on the input focus and if it has value. After upgrading my RN version the labels are not transformed correctly on first render anymore, but if you focus the input and then remove the focus they are transformed correctly. My repo has RN 0.77 and the issue is only reproducible on iOS, but I was able to reproduce it in Expo Snack on RN 0.76 on both iOS and Android.

Steps to reproduce

1. Apply styles to an Animated.Text element using useSharedValue and useAnimatedStyle

Expected result: styles are applied immediately
Actual result: styles are not applied on first render

Snack or a link to a repository

https://snack.expo.dev/@nicklvovdev/c44d9a

Reanimated version

4.1.1

Worklets version

0.5.1

React Native version

0.81.4

Platforms

iOS

JavaScript runtime

None

Workflow

Expo Go

Architecture

New Architecture (Fabric renderer)

Build type

No response

Device

Real device

Host machine

macOS

Device model

No response

Acknowledgements

Yes

[nick-lvov-dev]

I've created a similar issue before and it was closed because the snack didn't have repro code according to the maintainer #7263
I went a rechecked the snack and the code is correct there. What you see is 2 inputs that have an animated placeholder. On first render the label is supposed to be in the middle of the input, you can see how it behaves if you click on an input and then remove focus from it. But instead the labels are styled incorrectly.

[patrycjakalinska]

hi @nick-lvov-dev, I've tested you app on Reanimated 4.1.3 and RN 0.82 on both physical, simulator and expo (iOS) - and everything seems to work

Could you check on your side on the latest versions?

expo.mov

ios.mov

[ammarahm-ed]

I am also facing a similar issue. The initialValue set on useSharedValue is not applied on the Animated.View sometimes. It is random. Sometimes it will work, sometimes it will not apply the style. This only happens on first render.