Unable to find viewState for tag 418. Surface stopped: false

[Aikenwu]

What happened?

We upgraded RNN to 8.3.2 and RN to meet Android's 16kb requirement, and therefore released it on the Google Play Store on November 1st. In the last two days, we've encountered many errors like the following: Fatal Exception: com.facebook.react.bridge.RetryableMountingLayerException: Unable to find viewState for tag 418. Surface stopped: false. I've spent a day investigating this error, and I can't seem to resolve it locally. I found the following related issues: https://github.com/facebook/react-native/issues/49077, https://github.com/software-mansion/react-native-reanimated/issues/7493

I'm not sure if this issue is related to RNN, but I have a few questions:

1. RNN 7.40.0 does not depend on reanimated-color-picker, and therefore does not depend on react-native-reanimated; why does RNN 8.3.2 require reanimated-color-picker? My project currently does not have react-native-reanimated installed. To fix this error, I installed and applied the patch according to this issue: https://github.com/software-mansion/react-native-reanimated/issues/8344

2. What is the relationship between RNN and react-native-reanimated? Can my project do without react-native-reanimated? You can also set Animations: https://wix.github.io/react-native-navigation/docs/style-animations

3. I found a related bug on iOS: https://github.com/wix/react-native-navigation/issues/8121, but not on Android. Has no one else encountered this?

What was the expected behaviour?

I would be extremely grateful if someone could answer my question.

Was it tested on latest react-native-navigation?

• [x] I have tested this issue on the latest react-native-navigation release and it still reproduces.

Help us reproduce this issue!

N/A

In what environment did this happen?

React Native Navigation version: 8.3.2 React Native version: 0.77.3 Has Fabric (React Native's new rendering system) enabled: (yes/no) yes Node version: v20.19.4 Device model: ? Android version: Android 15/16

[levepic]

I have posted one possible way to trigger this crash 100% at https://github.com/software-mansion/react-native-reanimated/issues/7493 & also some hints how i worked my crash rate from 98% to 99.8% . (Moving to JS navigators, switching off animatons & playing with detachinactive and such didnt help for me, it seemed it might not be related to navigation altough enableFreeze(false); seemed to help which i'll investigate later)

[Aikenwu]

I have posted one possible way to trigger this crash 100% at software-mansion/react-native-reanimated#7493 & also some hints how i worked my crash rate from 98% to 99.8% . (Moving to JS navigators, switching off animatons & playing with detachinactive and such didnt help for me, it seemed it might not be related to navigation altough enableFreeze(false); seemed to help which i'll investigate later)

Thanks, I saw your latest comment. So, your final solution is to add collapsable={false} to the topmost view of each component? This would avoid the problems caused by Android redrawing?

Also, are you using React-Native-Navigation? (Not React-Navigation) That means you need to add this for many components.

[levepic]

Thanks, I saw your latest comment. So, your final solution is to add collapsable={false} to the topmost view of each component? This would avoid the problems caused by Android redrawing?

Also, are you using React-Native-Navigation? (Not React-Navigation) That means you need to add this for many components.

Im using RN 0.81.5 & reanamited 4 & "@react-navigation/bottom-tabs": "7.4.9", "@react-navigation/elements": "2.6.5", "@react-navigation/native": "7.1.18", "@react-navigation/native-stack": "7.3.28", "@react-navigation/stack": "7.4.10", but I assume the problem is similar, Im not sure if collapsable really helps, I guess the main issue is when the styles change on the ROOT view of the screens so it helped when I removed safeareinset padding or safeareaview as the root view and added these dynamic styles to an inner view to stabilize the root view. Safeareinsets are not constants (for example device rotation). There is another thread at https://github.com/facebook/react-native/issues/49077 where they also reported dynamic styles on the root view of screens causing the crash. Its very hard for me to test this in production so I cant test small modifications like removing collapsable if it raises crash numbers again.

[gosha212]

Hi, @Aikenwu! Thanks for your report. I will try to answer your questions:

1. There was a bug in dependencies. This library was used in the test app but not in the library itself. Please try the latest version 8.5.0. The project now uses yarn mono repo and it will help us to insure that no more issues like this will happen again.
2. RNN Uses multiple surfaces and it affects the way React Native Reanimated works. To make the long story short: there was some issues with reanimated and multisurface support but we are working hard with Software Mansion (Reanimated) to fix the issues.
3. We now see the same bug in our projects too. But the crash rate is very low. We are investigating the issue on Android. On iOS the issue should be resolved in the near feature

[Aikenwu]

In conclusion, I'm currently using RN 0.78.3, RNN 8.4.2, and reanimated 3.19.4. Honestly, I upgraded these libraries, modified the homepage view, and made many changes to enhance animation components and recycling. I don't know exactly how these changes worked. The crash rate finally dropped to 0.6%, which is finally under control.

[gosha212]

@Aikenwu Did it solve this crash for you or it just dropped the rate?

[Aikenwu]

@Aikenwu Did it solve this crash for you or it just dropped the rate?

Just dropped the rate. From 3% to 0.6%.

[levepic]

Although im using React Navigation, not RNN & not sure whats the difference with enablefreeze, when i switched back to enableFreeze(true); my crash rate immediately grow back from 0.2% to about 1% or more so one thing that definitely works for me (even after the modifications to eliminate the crash) is to have enableFreeze(false);