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

[adxzhang1]

trafficstars

Description

Seeing similar error to the one here https://github.com/facebook/react-native/issues/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

https://github.com/user-attachments/assets/efd10e72-fd05-4c64-9c31-9d8d73be415d

[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

[dehimer]

I've found a reason of problem locally For me crash appears when I clicked too often on button (in my implementation of digital keyboard component) My investigation led me to a reason. I did use styling of TouchableOpacity with styled component.

import styled from 'styled-components/native'

In case when I do styling in next way const ButtonHighlight = styled.TouchableOpacity` ...

I get a crash on ofter taps But all became fine when I replace it by const ButtonHighlight = styled(TouchableOpacity)` ...

Probably wrappers or inner logic of styled component TouchableOpacity lead to bug

[amitojsingh]

I got the same crash on Android 12 device. Is there any fix?

[frangeris]

Just found out this issue.

~~It happens whenever I mutate the local state of a view, just a simple setState, commenting my useState calls works just fine~~

Not using Expo

"react": "19.0.0",
"react-native": "0.79.1",

Related: https://github.com/facebook/react-native/issues/47960

Update: Not really related to state updated, also happening when moving between screen using react-navigation@6

Update 2: Just confirmed this only happens on devices with 1 core, I've tested the same code multiple times with differente emulators configuration and any time I set to use only 1 core it fails, VM Heap Size or RAM memory doesn't seems to be affecting the result, just the cores numbers, tested with API 36+

[derekvawdrey]

I have this issue as well, but only on Android.

[frangeris]

I have this issue as well, but only on Android.

Can you checkout my last comment and try if works for you? After I've upgrade the cores and the issue is gone, 2 weeks with no error, please try and report here

[Akki71]

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

I'm also facing this issue please guide if anyone get solution

[sivantha96]

Same issue with expo-router with reanimated. Only on Android. Multi-core devices help but not completely

[Tamimjabr]

same issue seems to crash because of react native reanimated

[ursnj]

Same issue facing, any solution, this is mainly happening with RN 0.79 latest code.

[mikehesse]

Same issue here. Sometimes I also get this error:

But only with router.redirect(...), if using router.push(...) no error occurs.

[lindboe]

@mikehesse I don't know of a router.redirect method. Did you mean router.replace?

[mikehesse]

Oh yeah, I meant router.replace(...)

I got confused while tinkering around with redirects to avoid this issue

[mrChernicharo]

same issue only in Android. iOS works fine.

solution (a bit unfortunate): disable newArch

// app.json

{
    "expo": {
        "newArchEnabled": false,
    }
}

[cortinico]

solution (a bit unfortunate): disable newArch

Just a heads up that this is not a solution

[Mako-L]

solution (a bit unfortunate): disable newArch

Just a heads up that this is not a solution

True.

[joaqo]

Same issue here

[ayozebarrera]

Facing this issue on Android too

Expo SDK 53 React 19