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

[adxzhang1]

Description

Seeing similar error to the one here #38743 but have a reproducible example.

Use case is to change some styles of a tab bar when going to a new stack screen. Then when user goes back to the tab screen with tab bar there will be some styling update ex. fade in.

I am seeing these two parts are necessary to trigger the error:
https://github.com/adxzhang1/react-native/blob/2cce5a5b8a5b7c608c0b030bd45e6a40aa11fca4/App.tsx#L83
https://github.com/adxzhang1/react-native/blob/2cce5a5b8a5b7c608c0b030bd45e6a40aa11fca4/App.tsx#L136

Steps to reproduce

1. Sample here https://github.com/adxzhang1/react-native/tree/view-state-issue
2. Click Push Stack Screen -> Push Stack Screen -> Back -> Back

React Native Version

0.76.6

Affected Platforms

Runtime - Android

Output of npx react-native info

System:
 OS: macOS 15.2
 CPU: (8) arm64 Apple M1
 Memory: 105.91 MB / 16.00 GB
 Shell:
 version: "5.9"
 path: /bin/zsh
Binaries:
 Node:
 version: 20.18.0
 path: ~/.nvm/versions/node/v20.18.0/bin/node
 Yarn:
 version: 1.22.22
 path: ~/.nvm/versions/node/v20.18.0/bin/yarn
 npm:
 version: 10.8.2
 path: ~/.nvm/versions/node/v20.18.0/bin/npm
 Watchman:
 version: 2024.09.23.00
 path: /opt/homebrew/bin/watchman
Managers:
 CocoaPods:
 version: 1.15.2
 path: /Users/alex/.rbenv/shims/pod
SDKs:
 iOS SDK:
 Platforms:
 - DriverKit 24.2
 - iOS 18.2
 - macOS 15.2
 - tvOS 18.2
 - visionOS 2.2
 - watchOS 11.2
 Android SDK:
 API Levels:
 - "28"
 - "30"
 - "32"
 - "33"
 - "34"
 - "35"
 Build Tools:
 - 29.0.2
 - 30.0.2
 - 30.0.3
 - 31.0.0
 - 33.0.0
 - 33.0.1
 - 34.0.0
 - 35.0.0
 - 35.0.0
 System Images:
 - android-34 | Google APIs ARM 64 v8a
 - android-34 | Google Play ARM 64 v8a
 Android NDK: Not Found
IDEs:
 Android Studio: 2024.2 AI-242.23726.103.2422.12816248
 Xcode:
 version: 16.2/16C5032a
 path: /usr/bin/xcodebuild
Languages:
 Java:
 version: 17.0.12
 path: /Users/alex/.jenv/shims/javac
 Ruby:
 version: 3.2.4
 path: /Users/alex/.rbenv/shims/ruby
npmPackages:
 "@react-native-community/cli":
 installed: 15.0.1
 wanted: 15.0.1
 react:
 installed: 18.3.1
 wanted: 18.3.1
 react-native:
 installed: 0.76.6
 wanted: 0.76.6
 react-native-macos: Not Found
npmGlobalPackages:
 "*react-native*": Not Found
Android:
 hermesEnabled: true
 newArchEnabled: true
iOS:
 hermesEnabled: true
 newArchEnabled: true

Stacktrace or Logs

Exception in native call
com.facebook.react.bridge.RetryableMountingLayerException: Unable to find viewState for tag 56. Surface stopped: false
	at com.facebook.react.fabric.mounting.SurfaceMountingManager.getViewState(SurfaceMountingManager.java:1111)
	at com.facebook.react.fabric.mounting.SurfaceMountingManager.updateLayout(SurfaceMountingManager.java:843)
	at com.facebook.react.fabric.mounting.mountitems.IntBufferBatchMountItem.execute(IntBufferBatchMountItem.java:140)
	at com.facebook.react.fabric.mounting.MountItemDispatcher.executeOrEnqueue(MountItemDispatcher.java:387)
	at com.facebook.react.fabric.mounting.MountItemDispatcher.dispatchMountItems(MountItemDispatcher.java:293)
	at com.facebook.react.fabric.mounting.MountItemDispatcher.tryDispatchMountItems(MountItemDispatcher.java:126)
	at com.facebook.react.fabric.FabricUIManager$DispatchUIFrameCallback.doFrameGuarded(FabricUIManager.java:1394)
	at com.facebook.react.fabric.GuardedFrameCallback.doFrame(GuardedFrameCallback.kt:22)
	at com.facebook.react.modules.core.ReactChoreographer.frameCallback$lambda$1(ReactChoreographer.kt:60)
	at com.facebook.react.modules.core.ReactChoreographer.$r8$lambda$nSkFhrr5T7rop_XKwzlLov4NLLw(Unknown Source:0)
	at com.facebook.react.modules.core.ReactChoreographer$$ExternalSyntheticLambda0.doFrame(D8$$SyntheticClass:0)
	at android.view.Choreographer$CallbackRecord.run(Choreographer.java:1337)
	at android.view.Choreographer$CallbackRecord.run(Choreographer.java:1348)
	at android.view.Choreographer.doCallbacks(Choreographer.java:952)
	at android.view.Choreographer.doFrame(Choreographer.java:878)
	at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:1322)
	at android.os.Handler.handleCallback(Handler.java:958)
	at android.os.Handler.dispatchMessage(Handler.java:99)
	at android.os.Looper.loopOnce(Looper.java:205)
	at android.os.Looper.loop(Looper.java:294)
	at android.app.ActivityThread.main(ActivityThread.java:8177)
	at java.lang.reflect.Method.invoke(Native Method)
	at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:552)
	at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:971)

Reproducer

https://github.com/adxzhang1/react-native/tree/view-state-issue

Screenshots and Videos

Screen.Recording.2025-01-31.at.1.03.32.AM.mov

[sarthak-d11]

Hey @adxzhang1, I was able to reproduce this issue. It appears to be valid on the new architecture but works fine on the old architecture.
Since this issue is heavily reliant on @react-navigation, it might be best to raise it with @react-navigation first.

What do you think, @cortinico?

[MarcStdt]

We are facing the same issue. We are running the New Architecture in Production an see ~1% of crashes from the PlayStore Insights most related to this issue.

[theisgroenbech]

I have the same issue. Also running New Arch with 1.25% crash-percentage reported by Play Console. It seems to be primarily Android 14 devices

[StichelMan]

I encountered an issue caused by the Moti package, which I was using for skeleton visuals while loading a chat session. Specifically, the error thrown was:
Unable to find viewState for tag 192. Surface stopped: false

After investigating, I found that replacing Moti with a custom component completely resolved the issue. It seems that Moti may have been interfering with the rendering lifecycle, leading to this error.

If anyone else has experienced similar issues with Moti, particularly in the context of animations or skeleton loaders, I'd be interested to hear your insights.

[YasserAtmani]

Facing the same issue, any hints that can help resolve this ? Almost a bare Expo project, and it happens whenever I press 2 times on a protected route that calls Redirect from Expo

[SurendraSp]

Same here
Facing this issue on production in few devices
One is on android 12

Android:
 hermesEnabled: true
 newArchEnabled: true
 react-native: 0.76.7

here are logs

Fatal Exception: com.facebook.react.bridge.RetryableMountingLayerException: Unable to find viewState for tag 13228. Surface stopped: false
 at com.facebook.react.fabric.mounting.SurfaceMountingManager.getViewState(SurfaceMountingManager.java:1111)
 at com.facebook.react.fabric.mounting.SurfaceMountingManager.addViewAt(SurfaceMountingManager.java:347)
 at com.facebook.react.fabric.mounting.mountitems.IntBufferBatchMountItem.execute(IntBufferBatchMountItem.java:119)
 at com.facebook.react.fabric.mounting.MountItemDispatcher.executeOrEnqueue(MountItemDispatcher.java:387)
 at com.facebook.react.fabric.mounting.MountItemDispatcher.dispatchMountItems(MountItemDispatcher.java:293)
 at com.facebook.react.fabric.mounting.MountItemDispatcher.tryDispatchMountItems(MountItemDispatcher.java:126)
 at com.facebook.react.fabric.FabricUIManager$DispatchUIFrameCallback.doFrameGuarded(FabricUIManager.java:1394)
 at com.facebook.react.fabric.GuardedFrameCallback.doFrame(GuardedFrameCallback.kt:22)
 at com.facebook.react.modules.core.ReactChoreographer.frameCallback$lambda$1(ReactChoreographer.java:60)
 at android.view.Choreographer$CallbackRecord.run(Choreographer.java:1226)
 at android.view.Choreographer.doCallbacks(Choreographer.java:1012)
 at android.view.Choreographer.doFrame(Choreographer.java:917)
 at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:1213)
 at android.os.Handler.handleCallback(Handler.java:938)
 at android.os.Handler.dispatchMessage(Handler.java:99)
 at android.os.Looper.loopOnce(Looper.java:233)
 at android.os.Looper.loop(Looper.java:334)
 at android.app.ActivityThread.main(ActivityThread.java:8517)
 at java.lang.reflect.Method.invoke(Method.java)
 at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:582)
 at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1068)

Fatal Exception: com.facebook.react.bridge.RetryableMountingLayerException: Unable to find viewState for tag 1414. Surface stopped: false
 at com.facebook.react.fabric.mounting.SurfaceMountingManager.getViewState(SurfaceMountingManager.java:1111)
 at com.facebook.react.fabric.mounting.SurfaceMountingManager.addViewAt(SurfaceMountingManager.java:360)
 at com.facebook.react.fabric.mounting.mountitems.IntBufferBatchMountItem.execute(IntBufferBatchMountItem.java:119)
 at com.facebook.react.fabric.mounting.MountItemDispatcher.executeOrEnqueue(MountItemDispatcher.java:387)
 at com.facebook.react.fabric.mounting.MountItemDispatcher.dispatchMountItems(MountItemDispatcher.java:293)
 at com.facebook.react.fabric.mounting.MountItemDispatcher.tryDispatchMountItems(MountItemDispatcher.java:126)
 at com.facebook.react.fabric.FabricUIManager$DispatchUIFrameCallback.doFrameGuarded(FabricUIManager.java:1394)
 at com.facebook.react.fabric.GuardedFrameCallback.doFrame(GuardedFrameCallback.kt:22)
 at com.facebook.react.modules.core.ReactChoreographer.frameCallback$lambda$1(ReactChoreographer.java:60)
 at android.view.Choreographer$CallbackRecord.run(Choreographer.java:1226)
 at android.view.Choreographer.doCallbacks(Choreographer.java:1012)
 at android.view.Choreographer.doFrame(Choreographer.java:917)
 at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:1213)
 at android.os.Handler.handleCallback(Handler.java:938)
 at android.os.Handler.dispatchMessage(Handler.java:99)
 at android.os.Looper.loopOnce(Looper.java:233)
 at android.os.Looper.loop(Looper.java:334)
 at android.app.ActivityThread.main(ActivityThread.java:8517)

[sanjaydev02]

@YasserAtmani is there any way to handle this ?

[dehimer]

Did catch of same bug

[Bruneljohnson]

not sure this is of any help, but could point you in the right direction.
I had the problem with the initial load of my home screen, it was redirecting (using Redirect element from expo router) to my select user profile screen. my Home screen was using animations from react-native-reanimated

I found out that the reason for the crash was that redirect fires too quickly and leads to animations firing and searching for a view that was no longer present / before the ui has properly mounted. It also causes a race condition. Despite navigating to the profile select screen - the home screen state was left in the missing view state.

my fix for this was to use the useFocusEffect hook, and use useRouter and router.replace() instead. then id add a loading screen that didn't have any animations just a simple spinner. to prevent any animations firing incorrectly.

const [isChecking, setIsChecking] = useState(true);
const router = useRouter();

useFocusEffect(
 useCallback(() => {
 let timeoutId: NodeJS.Timeout;

 if (!subscription.isSubscribed) {
 timeoutId = setTimeout(() => {
 router.replace("/payments");
 }, 500);
 } else if (!savedProfile?.id) {
 timeoutId = setTimeout(() => {
 router.replace("/profile-selection");
 }, 500);
 } else {
 setIsChecking(false);
 }

 return () => {
 if (timeoutId) {
 clearTimeout(timeoutId);
 }
 };
 }, [subscription.isSubscribed, savedProfile?.id])
 );

if (isChecking) {
 return (
 <AppSafeViewNoScroll
 isLoading={false}
 width="w-full h-full"
 color="bg-neutral-100"
 isHome={true}
 >
 <Spinner
 size={40}
 color={colors.stone[400]}
 className="flex items-center justify-center"
 />
 </AppSafeViewNoScroll>
 );
 }

[zarv1k]

I've experiencing the same issue. And it is not related to navigation in my case, the app just crashes with the same error randomly while I scroll up and down in fast some screen with long (@shopify/flash-list) list.

Sentry stacktrace screenshot:

[santhosh-umapathi-wikifolio]

+1

[flessard]

+1 I've experiencing the same issue. And it is not related to navigation in my case. The app crashes sith te same error when add or remove items on rnmapbox

[itsRares]

+1 Using expo-router as the navigation system