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

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. If the current page navigation bar is hidden, there will be no problem, or if customheader is used

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 tAlways callback

Snack or a link to a repository

https://github.com/renyufei8023/RNTest

Screens version

3.32.0

React Native version

0.74.5

Platforms

iOS

JavaScript runtime

Hermes

Workflow

React Native (without Expo)

Architecture

Fabric (New Architecture)

Build type

Debug mode

Device

Real device

Device model

No response

Acknowledgements

Yes

[renyufei8023]

I think it's an issue with useAnimatedStyle. If I delete the code related to useAnimatedStyle, there won't be this problem

[kkafar]

@renyufei8023 thank you for reporting! Would you consider transferring the issue to react-native-reanimated then?

It would be useful you define what the actual problem here is? viewDidLayoutSubviews is a system method that's get called really often under various circumstances.

If you think this is react-native-screens issue please let me know, otherwise I'll close this issue in few hours.

[renyufei8023]

@renyufei8023 thank you for reporting! Would you consider transferring the issue to react-native-reanimated then?

It would be useful you define what the actual problem here is? viewDidLayoutSubviews is a system method that's get called really often under various circumstances.

If you think this is react-native-screens issue please let me know, otherwise I'll close this issue in few hours.

The impact of the current problem is that if a ScrollView or FlatList has a lot of content that exceeds the screen and is dragged to the bottom of the view, the view will automatically bounce back to the top of the page

[renyufei8023]

@kkafar I'm not sure if it's a problem with React Native screens or React Native Reanimated at the moment. If I set headerShown to true, there will be no problem at this point

[kkafar]

If I set headerShown to true, there will be no problem at this point

heaerShown: false you mean, right?

[renyufei8023]

If I set headerShown to true, there will be no problem at this point

heaerShown: false you mean, right?

yes

[renyufei8023]

May I ask if you have reproduced it and if it is already being processed?

[renyufei8023]

@kkafar @mfazekas Is there any progress on this issue now

[kkafar]

I haven't yet looked at it

[maciekstosio]

@renyufei8023 Hi, I tried to build your repo, but it failed. I bumped the RN to 0.76, and it worked, but the repo doesn't seem to have a structure that matches the steps you provided. One interesting thing is that you add the tab navigation as an arrow method, which may cause rerenders - there is actually a warning about that:

Looks like you're passing an inline function for 'component' prop for the screen 'tabbar' (e.g. component={() => <SomeComponent />}). Passing an inline function will cause the component state to be lost on re-render and cause perf issues since it's re-created every render. You can pass the function as children to 'Screen' instead to achieve the desired behaviour. [Component Stack]

If changing that won't help, please provide a minimal repo showing your problem, and I'll look at it again.