Cryptic issues with RN versions ≥ 0.72.x when using React UI libraries(MUI) inside Webview App

[JJSLIoT]

Describe the bug The react-native-react-bridge library used to work just fine on RN versions < 0.72.0. For older RN versions, I have to use 0.11.2 version of the rnrb library. After upgrading from RN 71 to RN 72, I started facing very cryptic errors, but the errors seem to originate from @mui/material library that is used inside the React app running in Webview. The issue might not be limited to @mui/material library but may occur on other vast React libraries. Here is the exact error that I get when I use any MUI component in the provided DemoApp:

 ERROR  ReferenceError: Property 'zh' doesn't exist, js engine: hermes 
    at ContextNavigator (http://192.168.1.3:8081/node_modules/expo-router/entry.bundle//&platform=ios&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.bytecode=true&transform.routerRoot=app:143683:24)
    at ExpoRoot (http://192.168.1.3:8081/node_modules/expo-router/entry.bundle//&platform=ios&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.bytecode=true&transform.routerRoot=app:143639:28)
    at App
    at ErrorToastContainer (http://192.168.1.3:8081/node_modules/expo-router/entry.bundle//&platform=ios&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.bytecode=true&transform.routerRoot=app:187845:24)
    at ErrorOverlay
    at withDevTools(ErrorOverlay) (http://192.168.1.3:8081/node_modules/expo-router/entry.bundle//&platform=ios&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.bytecode=true&transform.routerRoot=app:187348:27)
    at RCTView
    at View (http://192.168.1.3:8081/node_modules/expo-router/entry.bundle//&platform=ios&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.bytecode=true&transform.routerRoot=app:40757:43)
    at RCTView
    at View (http://192.168.1.3:8081/node_modules/expo-router/entry.bundle//&platform=ios&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.bytecode=true&transform.routerRoot=app:40757:43)
    at AppContainer (http://192.168.1.3:8081/node_modules/expo-router/entry.bundle//&platform=ios&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.bytecode=true&transform.routerRoot=app:40600:25)
    at main(RootComponent) (http://192.168.1.3:8081/node_modules/expo-router/entry.bundle//&platform=ios&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.bytecode=true&transform.routerRoot=app:118930:28)

Screenshot

-

To Reproduce To reproduce this issue I was able to create a minimum reproducible app. Here are the links to the public repos:

• Old RN version (working): https://github.com/JJSLIoT/rnrb-old-rn-demo
• New RN version (not working): https://github.com/JJSLIoT/rnrb-new-rn-demo

Both these repos have the same code just the versions of RN, expo and react-native-react-bridge are different.

Expected behavior The library should work fine like it used to work before - using older RN versions and react-native-react-bridge version < 0.12.0.

Platform:

• Version of [react-native, expo]: react-native ≥ 0.72.0, expo ≥ 49
• Version of this package: 0.12.0
• OS: iOS and Android both
• Running on: Device and Simulator both
• JavaScript engine: Hermes

Additional context The new version app works fine if we comment out MUI components from the code. For this, I have added a comment in WebApp/index.jsx file:

{/* FIXME: None of the components from @mui/material work when used inside
the Webview React app. When this Box is removed, the app works just fine.
This issue started popping after React Native 0.72.x. Earlier to this version
the react-native-react-bridge had no issues rendering any component from 
@mui/material */}

[hichemfantar]

I also get this with three.js and expo-gl

[hichemfantar]

Did you create a custom build for the Old RN version project? Because eas build fails to create a custom build and expo go sdk48 apk isn't working for me.