[Android] Slow screen opening after react-native update

[OrlovMaks]

Hey, everybody!
After updating react-native (and all libraries) from version 0.70.11 to 0.72.6, I got a problem that screens with SafeAreaView open slowly and without animation.
I couldn't find absolutely no information on how to fix it.

In the video the first screen "Security" is in SafeAreaView, the second screen "Your rank" is just View.
https://github.com/th3rdwave/react-native-safe-area-context/assets/93343100/45623a6f-a038-4372-837a-abfa7466b8e8

My App component is wrapped with (I tried with and without the initialMetrics parameter).

My package.json
{ "react": "18.2.0",
"react-native": "0.72.6",
"react-native-safe-area-context": "4.7.4",
"react-native-screens": "3.27.0",
"react-native-reanimated": "3.5.4",
"@react-navigation/bottom-tabs": "6.5.11",
"@react-navigation/native": "6.1.9",
"@react-navigation/stack": "6.3.20",

[efstathiosntonas]

Maybe a long shot but, do you by any chance have reduce motion enabled on the device/simulator?

[17Amir17]

I see this as-well something like a 500ms delay on rendering whatever is inside safe view
RN 0.72.4 looks like only on Android - and Reduce Motion is not enabled
My other App on RN 0.71.6 works fine

[jacobp100]

There's not really anything to go off here. If you manage to make a minimal reproduction - or better yet, find the actual issue - let us know.

[OrlovMaks]

@jacobp100
Tomorrow I will make a copy of the application to the public repository and provide a link to it.
Unfortunately, I myself could not solve this problem.

[OrlovMaks]

@jacobp100 @17Amir17
I prepared a repository with the project from which I removed everything except the structure of my navigation:
https://github.com/OrlovMaks/sample_safeAreaView_issue

While I was preparing this project I found a problem (check the screenshot):
I have detachInactiveScreens={false} everywhere and I make navigation from WalletStackNavigator to general StackNavigator if I remove detachInactiveScreens from this general stack everything works.
https://github.com/th3rdwave/react-native-safe-area-context/assets/93343100/4225fb1f-275d-4252-aefc-ac4d0ad50316

[jacobp100]

Right so is it a problem with this library or another?

[17Amir17]

I have this issue with BottomSheetModal. I created https://github.com/17Amir17/SafeAreaContext to reproduce. From the comments in my codebase the reason we have a SafeArea in the modal is because of a rare cutoff of some android device.

Screen.Recording.2023-10-28.at.20.37.46.mov

I'm not really sure how to debug this further but would love to help @jacobp100 if you have any directions

[mgerdes]

@jacobp100 I'm seeing this issue too. It seems like it's because is we are hitting this timeout in SafeAreaView and that freezes the UI for 500ms

https://github.com/th3rdwave/react-native-safe-area-context/blob/b086b0ef5043836b72c6430cca1641641694fbce/android/src/main/java/com/th3rdwave/safeareacontext/SafeAreaView.kt#L97-L99

I debugged a little bit and it seems like the code in runOnNativeModulesQueueThread below is never able to acquire the lock, because the lock is being held the entire time we are waiting in the while loop right below, so it doesn't complete until the timeout ends.

https://github.com/th3rdwave/react-native-safe-area-context/blob/b086b0ef5043836b72c6430cca1641641694fbce/android/src/main/java/com/th3rdwave/safeareacontext/SafeAreaView.kt#L77-L95

I'm not sure what the best fix here is though.

[jacobp100]

Good catch on that. If you're able to get some flame graph and figure out what exactly is blocking the main thread, that would be helpful. Is this something that shows up only in development - or production too?

[mgerdes]

Good catch on that. If you're able to get some flame graph and figure out what exactly is blocking the main thread, that would be helpful. Is this something that shows up only in development - or production too?

I think the waitForReactLayout in SafeAreaView.kt is what's blocking the main thread. I added these log statements to try to see what's happening

and this was the result:

2023-11-01 13:03:54.865 runOnNativeModulesQueueThread 0
2023-11-01 13:03:54.865 main thread 0
2023-11-01 13:03:54.866 awaitNanos 0
2023-11-01 13:03:55.367 awaitNanos 1
2023-11-01 13:03:55.367 main thread 1
2023-11-01 13:03:55.367 Timed out waiting for layout.
2023-11-01 13:03:55.377 native thread 0
2023-11-01 13:03:55.377 native thread 1

So if I'm looking at this right it seems like the code in runOnNativeModulesQueueThread that's supposed to run on the native thread isn't run while the main thread is blocked and that makes waitForReactLayout block the main thread the entire time.

[jacobp100]

If you increase the max time nanos to something much longer (say 10s), does it finish before? Or do we have a deadlock?

[mgerdes]

If you increase the max time nanos to something much longer (say 10s), does it finish before? Or do we have a deadlock?

Yea, I just upped it to 10s and the whole app freezes for those 10 seconds it's waiting.

This is what I was logging:

2023-11-01 14:22:29.130  runOnNativeModulesQueueThread 0
2023-11-01 14:22:29.130  main thread 0
2023-11-01 14:22:29.130  awaitNanos 0
2023-11-01 14:22:39.131  awaitNanos 1
2023-11-01 14:22:39.131  main thread 1
2023-11-01 14:22:39.131  Timed out waiting for layout.
2023-11-01 14:22:39.140  native thread 0
2023-11-01 14:22:39.140  native thread 1

So yea, it looks like something isn't letting the code on the native thread run until the main thread times out waiting.

[jacobp100]

What’s your setup? Version of react native? Are you using fabric?

Also could you check the value of getReactContext(this).isOnNativeModulesQueueThread() (at the start of the function - outside the runOnNativeModulesQueueThread)