When Farbic is turned on, if the previous page used react native reanimated useAnimatedStyle, it will cause RNSScreen. m's viewDidLayoutSubviews to be called multiple times

[renyufei8023]

Description

If I don't use useAnimatedStyle, it's normal. onLayout will only be called once

Steps to reproduce

1.Page A using the AusAnimatedStyle of React Native Reanimated
2.push to page B,this page headerShow is true
3.Page B onLayou Always callback

Snack or a link to a repository

https://github.com/renyufei8023/RNTest

Reanimated version

3.16.1

React Native version

0.74.5

Platforms

iOS

JavaScript runtime

Hermes

Workflow

React Native

Architecture

Fabric (New Architecture)

Build type

Debug app & dev bundle

Device

None

Device model

No response

Acknowledgements

Yes

[renyufei8023]

If I use React Native [email protected] Normal in debug mode, but abnormal in release mode

[renyufei8023]

wix/react-native-ui-lib#3315

[DrZoidberg09]

Same issue here with Expo 52, rn 0.76.1, newest rn-reanimated and rn-screens and react-navigation 7

[renyufei8023]

@odogono @javascripter @notjosh Can you take a look at this question?

[renyufei8023]

@

Same issue here with Expo 52, rn 0.76.1, newest rn-reanimated and rn-screens and react-navigation 7

Try it out [email protected] Whether it can be or not?

[sldone]

I can still confirm the issue.
used versions

    "@react-navigation/native": "^7.0.0",
    "expo": "~52.0.7",
    "react-native": "0.76.2",
    "react-native-reanimated": "~3.16.1",
    "react-native-screens": "~4.1.0",

The interesting part is if we remove the native header it's not reproducible anymore.

Is there any update on this?
@bartlomiejbloniarz
@odogono
@javascripter
@notjosh

[pakerwreah]

I can confirm this, and also that headerShown: false on the pushed screen "fixes" the issue.

"@react-navigation/native": "^7.0.0",
"expo": "^52.0.11",
"react-native": "^0.76.3",
"react-native-reanimated": "^3.16.1",
"react-native-screens": "^4.0.0",

In my case, that's causing my FlatList to jump/scroll every time I tap a button, because it recalculates the layout twice on every tap/click. The first time it prints the wrong (bigger) value in onLayout, and then a second time with the correct value.

onLayout={(e) => console.log('screen height', e.nativeEvent.layout.height)}

Interestingly, if I tap a button that doesn't have opacity animation, like <Pressable>, it doesn't trigger the issue.

[jwoodmansey]

Can confirm this is specifically a Fabric issue. Setting newArchEnabled=false in android/gradle.properties makes the issue go away.

We are seeing bizarre behaviour related to this where we can see the tab bar below pushed stack screens etc, I assume because the screen container can not calculate its height correctly.

[renyufei8023]

@tjzel How to solve this?