Element inspector on causes the app to crash when a wrapper is provided trough AppRegistry and a component has negative zIndex

[zglapa]

Description

I have an app with a wrapper containing a view rendered at the top with non-zero height provided by AppRegistry.setWrapperComponent in index.js. Using a component with a zIndex: -1 and turning on the element inspector from the developer menu causes the app to crash instantly. This does not happen when the wrapper is not provided or does not take any extra space at the top.

I found this error happening during the crash in Android Studio Logcat:

2023-10-09 16:55:24.701  2158-4323  ReactNativeJNI          com.reproducerapp                    E  StubView: ASSERT FAILURE: REMOVE mutation assertion failure: oldChildShadowView does not match oldStubView: [10] stub hash: ##15806944667130804052 old mutation hash: ##652601411395075939
2023-10-09 16:55:24.701  2158-4323  ReactNativeJNI          com.reproducerapp                    E  ChildStubView: surfaceId=1 tag=10 traits=  <Node/> componentName=View props=0xb400007647652a98(shared) eventEmitter=0xb40000759762e298(shared) layoutMetrics=  <LayoutMetrics frame={x:-20,y:-20,width:200,height:100} contentInsets={top:0,right:0,bottom:0,left:0} borderWidth={top:0,right:0,bottom:0,left:0} overflowInset={top:0,right:-0,bottom:-0,left:0} displayType=Flex layoutDirection=LeftToRight pointScaleFactor=3.5/> state=null(shared)
2023-10-09 16:55:24.701  2158-4323  ReactNativeJNI          com.reproducerapp                    E  OldChildShadowView: surfaceId=1 tag=10 traits=  <Node/> componentName=View props=0xb400007647652a98(shared) eventEmitter=0xb40000759762e298(shared) layoutMetrics=  <LayoutMetrics frame={x:-20,y:4,width:200,height:100} contentInsets={top:0,right:0,bottom:0,left:0} borderWidth={top:0,right:0,bottom:0,left:0} overflowInset={top:0,right:-0,bottom:-0,left:0} displayType=Flex layoutDirection=LeftToRight pointScaleFactor=3.5/> state=null(shared)
2023-10-09 16:55:24.702  2158-4323  ReactNative             com.reproducerapp                    E  /root/react-native/packages/react-native/ReactCommon/react/renderer/mounting/StubViewTree.cpp:174: function mutate: assertion failed ((ShadowView)(*childStubView) == mutation.oldChildShadowView)
2023-10-09 16:55:24.702  2158-4323  ReactNative             com.reproducerapp                    A  /root/react-native/packages/react-native/ReactCommon/react/renderer/mounting/StubViewTree.cpp:174: function mutate: assertion failed ((ShadowView)(*childStubView) == mutation.oldChildShadowView)

React Native Version

0.72.5

Output of npx react-native info

System:
OS: macOS 13.5.2
CPU: (8) arm64 Apple M1 Pro
Memory: 69.45 MB / 16.00 GB
Shell:
version: "5.9"
path: /bin/zsh
Binaries:
Node:
version: 20.8.0
path: /opt/homebrew/bin/node
Yarn: Not Found
npm:
version: 10.1.0
path: /opt/homebrew/bin/npm
Watchman:
version: 2023.09.25.00
path: /opt/homebrew/bin/watchman
Managers:
CocoaPods: Not Found
SDKs:
iOS SDK:
Platforms:
- DriverKit 23.0
- iOS 17.0
- macOS 14.0
- tvOS 17.0
- watchOS 10.0
Android SDK: Not Found
IDEs:
Android Studio: 2022.3 AI-223.8836.35.2231.10406996
Xcode:
version: 15.0/15A240d
path: /usr/bin/xcodebuild
Languages:
Java:
version: 17.0.6
path: /usr/bin/javac
Ruby:
version: 2.6.10
path: /usr/bin/ruby
npmPackages:
"@react-native-community/cli": Not Found
react:
installed: 18.2.0
wanted: 18.2.0
react-native:
installed: 0.72.5
wanted: 0.72.5
react-native-macos: Not Found
npmGlobalPackages:
"react-native": Not Found
Android:
hermesEnabled: true
newArchEnabled: true
iOS:
hermesEnabled: Not found
newArchEnabled: Not found

Steps to reproduce

• create the following wrapper component through AppRegistry.setWrapperComponentProvider

AppRegistry.setWrapperComponentProvider(appParams => {
  return ({children, ...otherProps}) => (
    <InitialParamsContext.Provider value={otherProps.initialProps}>
      <View style={{width: '100%', height: '100%'}} {...otherProps}>
        <View style={{width: '100%', height: 24}}>
          <Text
            style={{
              width: '100%',
              height: '100%',
              fontSize: 10,
              color: 'white',
            }}>
            TEXT
          </Text>
        </View>
        {children}
      </View>
    </InitialParamsContext.Provider>
  );
});

• add a component with zIndex: -1 to the app
• turn on element inspector

Snack, code example, screenshot, or link to a repository

https://github.com/zglapa/reproducer