Android - App is crashing when performing multiple navigations after upgrading RN to 0.76

[NJ-2020]

Description

When tapping the link inside the chat, the android app is crashing/exits, here's the error log:

SurfaceMountingManager: Unhandled SoftException

SurfaceMountingManager: java.lang.IllegalStateException: addViewAt: cannot insert view [3620] into parent [3622]: View already has a parent: [3626]  Parent: Screen View: ReactViewGroup

SurfaceMountingManager: 	at com.facebook.react.fabric.mounting.SurfaceMountingManager.addViewAt(SourceFile:139)

SurfaceMountingManager: 	at com.facebook.react.fabric.mounting.mountitems.IntBufferBatchMountItem.execute(SourceFile:248)

SurfaceMountingManager: 	at com.facebook.react.fabric.mounting.MountItemDispatcher.executeOrEnqueue(SourceFile:54)

SurfaceMountingManager: 	at com.facebook.react.fabric.mounting.MountItemDispatcher.dispatchMountItems(SourceFile:46)

SurfaceMountingManager: 	at com.facebook.react.fabric.mounting.MountItemDispatcher.tryDispatchMountItems(SourceFile:35)

SurfaceMountingManager: 	at com.facebook.react.fabric.FabricUIManager$DispatchUIFrameCallback.doFrameGuarded(SourceFile:95)

SurfaceMountingManager: 	at com.facebook.react.fabric.GuardedFrameCallback.doFrame(SourceFile:1)

SurfaceMountingManager: 	at com.facebook.react.modules.core.ReactChoreographer.frameCallback$lambda$1(SourceFile:37)

SurfaceMountingManager: 	at com.facebook.react.modules.core.ReactChoreographer.a(SourceFile:1)

SurfaceMountingManager: 	at com.facebook.react.modules.core.a.doFrame(SourceFile:26)

SurfaceMountingManager: 	at android.view.Choreographer$CallbackRecord.run(Choreographer.java:1229)

SurfaceMountingManager: 	at android.view.Choreographer$CallbackRecord.run(Choreographer.java:1239)

SurfaceMountingManager: 	at android.view.Choreographer.doCallbacks(Choreographer.java:899)

SurfaceMountingManager: 	at android.view.Choreographer.doFrame(Choreographer.java:827)

SurfaceMountingManager: 	at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:1214)

SurfaceMountingManager: 	at android.os.Handler.handleCallback(Handler.java:942)

SurfaceMountingManager: 	at android.os.Handler.dispatchMessage(Handler.java:99)

SurfaceMountingManager: 	at android.os.Looper.loopOnce(Looper.java:201)

SurfaceMountingManager: 	at android.os.Looper.loop(Looper.java:288)

SurfaceMountingManager: 	at android.app.ActivityThread.main(ActivityThread.java:7924)

SurfaceMountingManager: 	at java.lang.reflect.Method.invoke(Native Method)

SurfaceMountingManager: 	at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:548)

SurfaceMountingManager: 	at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:936)

Steps to reproduce

1. Clone the repo app
2. Install the packages using npm install, note: only use NPM instead of bun/yarn/pnpm, because using other package-manager may cause the installation process to failed
3. Setup the mapbox by running this command npm run configure-mapbox and when asked for mapbox token, use this token: sk.eyJ1IjoiaGF5YXRhIiwiYSI6ImNsbG11NjRqcDI5aDUzZnFsemQ1bzJ6a2sifQ.0w52KN5Ak4AMiwiW-MnWHg
4. Run the android application by running this command npm run android
5. Once the app is successfully running, login/create new account
6. Create workspace/ or start dm with any people
7. Open any chat
8. Paste this link to the input https://dev.new.expensify.com:8082/settings/workspaces/D14467B7F87F1292/[email protected]
9. Tap on the link
10. The app is crashing/exits

https://private-user-images.githubusercontent.com/102230002/402872111-20bf2f84-e3d3-4467-8101-398929f355fb.mp4?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzczNTk3MzQsIm5iZiI6MTczNzM1OTQzNCwicGF0aCI6Ii8xMDIyMzAwMDIvNDAyODcyMTExLTIwYmYyZjg0LWUzZDMtNDQ2Ny04MTAxLTM5ODkyOWYzNTVmYi5tcDQ_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjUwMTIwJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI1MDEyMFQwNzUwMzRaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT05YTIzNTk0OTk0NjUwZjFlZjc5MmVkMjM2MTc0MzM0OGIzZTg2NTZmZmMzMzFiZDVjOWZmNWNlYWVmM2I0MWEwJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.iuaKh1Ne0oODaFcgTWj1xXMXfmY-NyxEWrrENxQgC_s

Snack or a link to a repository

https://github.com/NJ-2020/Expensify/

Screens version

3.35.0

React Native version

0.76.3

Platforms

Android

JavaScript runtime

Hermes

Workflow

Expo managed workflow

Architecture

Fabric (New Architecture)

Build type

Debug mode

Device

Android emulator

Device model

Emulator Pixel 8 API 35

Acknowledgements

Yes

[kkafar]

Hey, while you posted an reproduction, the Expensify app is nowhere near minimal reproducible example (MRE). There are tons of custom code & dependencies which might affect the app behaviour. Would you be able to provide me with something more bare bone and closer to MRE that might actually indicate in more convincing way that the issue is related to react-native-screens?

[NJ-2020]

@kkafar Hi, sure, can I share the new error logs:

SurfaceMountingManager: Unhandled SoftException

SurfaceMountingManager: java.lang.IllegalStateException: addViewAt: cannot insert view [3620] into parent [3622]: View already has a parent: [3626]  Parent: Screen View: ReactViewGroup

SurfaceMountingManager: 	at com.facebook.react.fabric.mounting.SurfaceMountingManager.addViewAt(SourceFile:139)

SurfaceMountingManager: 	at com.facebook.react.fabric.mounting.mountitems.IntBufferBatchMountItem.execute(SourceFile:248)

SurfaceMountingManager: 	at com.facebook.react.fabric.mounting.MountItemDispatcher.executeOrEnqueue(SourceFile:54)

SurfaceMountingManager: 	at com.facebook.react.fabric.mounting.MountItemDispatcher.dispatchMountItems(SourceFile:46)

SurfaceMountingManager: 	at com.facebook.react.fabric.mounting.MountItemDispatcher.tryDispatchMountItems(SourceFile:35)


SurfaceMountingManager: 	at com.facebook.react.fabric.FabricUIManager$DispatchUIFrameCallback.doFrameGuarded(SourceFile:95)

SurfaceMountingManager: 	at com.facebook.react.fabric.GuardedFrameCallback.doFrame(SourceFile:1)

SurfaceMountingManager: 	at com.facebook.react.modules.core.ReactChoreographer.frameCallback$lambda$1(SourceFile:37)

SurfaceMountingManager: 	at com.facebook.react.modules.core.ReactChoreographer.a(SourceFile:1)

SurfaceMountingManager: 	at com.facebook.react.modules.core.a.doFrame(SourceFile:26)

SurfaceMountingManager: 	at android.view.Choreographer$CallbackRecord.run(Choreographer.java:1229)

SurfaceMountingManager: 	at android.view.Choreographer$CallbackRecord.run(Choreographer.java:1239)

SurfaceMountingManager: 	at android.view.Choreographer.doCallbacks(Choreographer.java:899)

SurfaceMountingManager: 	at android.view.Choreographer.doFrame(Choreographer.java:827)

SurfaceMountingManager: 	at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:1214)


SurfaceMountingManager: 	at android.os.Handler.handleCallback(Handler.java:942)

SurfaceMountingManager: 	at android.os.Handler.dispatchMessage(Handler.java:99)

SurfaceMountingManager: 	at android.os.Looper.loopOnce(Looper.java:201)

SurfaceMountingManager: 	at android.os.Looper.loop(Looper.java:288)

SurfaceMountingManager: 	at android.app.ActivityThread.main(ActivityThread.java:7924)

SurfaceMountingManager: 	at java.lang.reflect.Method.invoke(Native Method)

SurfaceMountingManager: 	at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:548)

SurfaceMountingManager: 	at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:936)

I think based on error logs we're trying to insert view into a parent view that already has a parent but I am not sure which file is causing this issue

And also I've tried to upgrade to the latest versions of react-native-screens and the error still occurs

[NJ-2020]

And also this issue is not occurring before we upgrade to RN 0.76 for more details here's the PR

And the issue only occurs if we perform multiple navigations only in Android native and if I remove the navigation function the error is gone

[kkafar]

@NJ-2020 but why do you believe this is related to react-native-screens?

The stack trace seems kinda similar to the issue this PR is related to (see the related PRs & the issue they solve), however this is a guess.

[NJ-2020]

@kkafar Okay thanks for this PR, I will try to check again and let you know

[kkafar]

@NJ-2020, note that the #2596 requires 0.77 to run as described in the PR description, otherwise you'll get surely other crashes. #2596 works under assumption that these patches are present in react-native:

• https://github.com/facebook/react-native/pull/47634
• https://github.com/facebook/react-native/pull/48329

[NJ-2020]

@kkafar Okay then, I think it's better if we hold on this issue, because on this issue we're planning to upgrade to RN 0.77

[radko93]

I had an identical stack trace on 0.77 and it turned out to be some other issue causing this (I was accessing an undefined value on BackHandler) and it only happened on unmount useEffect. So if you have any unmount calls it could be triggered there and it's not even related to RN screens.

[NJ-2020]

The issue seems not coming from react-native-screens, the issue is coming from @expensify/react-native-live-markdown, sorry

Thank you for your help @kkafar

[Onedayago]

问题不在 react native screen，在 react native 处理 Zindex 的问题，在react navigation 中处理 bottomTabView 那里 style={[StyleSheet.absoluteFill, { zIndex: isFocused ? 0 : -1 }]} 有通过 Zindex 去修改视图的层级，导致的问题

[rinarakaki]

@NJ-2020 This issue seems to reproduce without using @expensify/react-native-live-markdown, so better to reopen it.

[rinarakaki]

Translation of @Onedayago's comment:

The problem is not in react native screen, but in react native's handling of Zindex. In react navigation, style={[StyleSheet.absoluteFill, { zIndex: isFocused ? 0 : -1 }]} in bottomTabView modifies the view hierarchy through Zindex, which causes the problem.

[rinarakaki]

Related to https://github.com/react-navigation/react-navigation/issues/11165?

[NJ-2020]

This issue seems to reproduce without using @expensify/react-native-live-markdown, so better to reopen it.

@rinarakaki In my case, the crash issue was caused by @expensify/react-native-live-markdown which has an assertion failure in the cpp code

If you do experience similar crash in your side, I think it would be better if you create your own issue with more aligned logs, stack, code example

[ferretwithaberet]

I have an app with Expo SDK 53 and [email protected], I am still running into this issue. Issue seems to stem from a <Redirect /> returned from the screen inside of a stack of a tab. I can provide more information if needed, feel free to ask anything.

[NJ-2020]

Reopening this issue because seems other people experiencing this bug as well

[NJ-2020]

@ferretwithaberet Feel free to share your logs and other additional informations. Thannks

[ferretwithaberet]

@ferretwithaberet Feel free to share your logs and other additional informations. Thannks

Can you point me towards how to collect logs? I tried react-native log-android but only (maybe) relevant log is:

[12:41:07] I | ReactNative ▶︎ [GESTURE HANDLER] Tearing down gesture handler registered for root view com.facebook.react.runtime.ReactSurfaceView{1e90e83 V.E...... ........ 0,0-1280,2856 #b}

Everything else is in the screenshots above. I will try to make a repro of the issue and post it here.

Edit: ~~Apparently, it seems to work on my real device with a production build. I only get the crash in development. Not sure if this is the rule or the exception to the rule, maybe for other users it would crash.~~ Made another build, it crashes too.

Edit 2: At the moment I am using this to fix the redirect, crash does not happen anymore or at least it will happen less, setting the timeout to 100ms still crashes frequently but not everytime.

  // TODO: Find a proper fix
  const redirectRanRef = useRef(false);
  useFocusEffect(
    useCallback(() => {
      if (redirectRanRef.current) return;
      if ("message" in data) return;
      if (classId && subject) return;

      redirectRanRef.current = true;
      const timeout = setTimeout(() => {
        router.replace({
          pathname: "/root-redirect",
          params: {
            href: "/[tenantId]/[role]/[child]/classbook" satisfies HrefPathname,
            tenantId,
            role,
            child,
            classId: data.class_book_id,
            subject: data.subject_id,
          },
        });
      }, 200);

      return () => {
        clearTimeout(timeout);
        redirectRanRef.current = false;
      };
    }, [router, data, tenantId, role, child, classId, subject])
  );

Edit 3: So, I started investigating why I had blank screens for like 1 second between navigations on iOS, and I replaced <Stack /> with <Slot /> in expo's root _layout.tsx and it fixed both the 1 second blank screen and the crash.

[ferretwithaberet]

@NJ-2020 see "Edit 3" in the above message.

[leejunhui]

问题不在 react native screen，在 react native 处理 Zindex 的问题，在react navigation 中处理 bottomTabView 那里 style={[StyleSheet.absoluteFill, { zIndex: isFocused ? 0 : -1 }]} 有通过 Zindex 去修改视图的层级，导致的问题

老哥，你最后解决了这个问题了吗