RN 0.68 Support

[nmongiya]

When I am trying version 1.0.0 with React-Native 0.68 I am getting the below error WARN Possible Unhandled Promise Rejection (id: 0): TypeError: null is not an object (evaluating 'BabylonModule.initialize') ensureInitialized$@http://localhost:8081/src/index.tsx.bundle?platform=android&dev=true&minify=false&app=XXX.XX.XX&modulesOnly=false&runModule=true:642083:60

Here is my package.json "@babylonjs/core": "5.0.0", "@babylonjs/loaders": "5.0.0-alpha.60", "@babylonjs/materials": "5.0.0-alpha.60", "@babylonjs/react-native": "^1.0.1",

Expected behavior React-Native announced version 0.68 with same breaking changes https://reactnative.dev/blog/2022/03/30/version-068#breaking-changes-and-version-bumps and upgrade Gradle to 7.3 is one of them> could that be the isssue?

Other

• Platform: [Android]

[ryantrem]

1. Make sure your first three Babylon.js packages are all the same version (5.0.0).
2. You need to install https://www.npmjs.com/package/@babylonjs/react-native-iosandroid-0-65 as well. Did you get a react error telling you to install this package?
3. We haven’t tested Babylon React Native 0.68 yet, so I’m not sure if it will work even with the above changes, but if not you should at least get a different error.

[nmongiya]

1. Updated to make sure all three Babylon.js packages are all the same version (5.0.0).

"@babylonjs/core": "5.0.0", "@babylonjs/loaders": "5.0.0", "@babylonjs/materials": "5.0.0", "@babylonjs/react-native": "^1.0.1", But still the same error.

2. It didn't report any error to install @babylonjs/react-native-iosandroid-0-65 but when I install it, it started to give me different errors.

 1: Task failed with an exception.
 Where:
Build file 'XXXX\node_modules\@babylonjs\react-native-iosandroid-0-65\android\build.gradle' line: 27
What went wrong:
A problem occurred evaluating project ':babylonjs_react-native-iosandroid-0-65'.
> Plugin with id 'maven' not found.

I believe that is because node_modules@babylonjs\react-native-iosandroid-0-65\android\build.gradle is pointing to maven maven { // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm url "$rootDir/../node_modules/react-native/android" } while it has been removed from gradle 7onwards and RN 0.68 is using gradle 7+

[ryantrem]

If you remove that maven reference locally (for testing purposes) does it resolve the error?

[nmongiya]

Before removing the maven reference:

`1: Task failed with an exception.

• Where: Build file 'XXXXnode_modules@babylonjs\react-native-iosandroid-0-65\android\build.gradle' line: 27

• What went wrong: A problem occurred evaluating project ':babylonjs_react-native-iosandroid-0-65'.

Plugin with id 'maven' not found.

• Try:

Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights. ==============================================================================

2: Task failed with an exception.

• What went wrong: A problem occurred configuring project ':babylonjs_react-native-iosandroid-0-65'.

compileSdkVersion is not specified. Please add it to build.gradle

• Try:

Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights. ==============================================================================

• Get more help at https://help.gradle.org`

After removing the maven reference

`Where: Build file 'XXX\node_modules@babylonjs\react-native-iosandroid-0-65\android\build.gradle' line: 129

• What went wrong: A problem occurred configuring project ':babylonjs_react-native-iosandroid-0-65'.

Configuration with name 'compile' not found.` and looks like that is not a bug https://docs.gradle.org/current/userguide/upgrading_version_6.html#sec:configuration_removal

[nmongiya]

But if I comment out the local reference for maven and whole afterEvaluate function from node_modules@babylonjs\react-native-iosandroid-0-65\android\build.gradle, I can at least compile the app. Although that does not show anything and shows the below error in Metro ERROR Error: Exception in HostFunction: Exception in HostFunction: Error parsing URL scheme: Cannot parse a URI without a scheme

[gomes042]

Any updates?

[bghgary]

Sorry, not yet. Now that Babylon.js 5.0 is announced, we will get back to this in the next few weeks hopefully.

[jonklein]

FYI, with the above workarounds in place (remove Maven plugin and afterEvaluate block), Babylon is working correctly for me with React Native 0.68.

[bghgary]

Related: #410

[pingumen96]

I confirm that the workarounds work on RN 0.68.

[nmongiya]

@jonklein @pingumen96 Can you guys please confirm if you are using RN 0.68 with newArchEnabled=true in gradle.properties It worked for me when the flag is set as false otherwise it shows the error 'EngineView' is not Fabric compatible yet.

[pingumen96]

@jonklein @pingumen96 Can you guys please confirm if you are using RN 0.68 with newArchEnabled=true in gradle.properties It worked for me when the flag is set as false otherwise it shows the error 'EngineView' is not Fabric compatible yet.

I did not use newArchEnabled = true because of the incompatibility with other libraries.

[theonetheycallneo]

Does anyone have a workaround for RN 0.68 with BabylonJs for iOS?

2022-08-02 11:55:30.626774-0400 Wallet[68917:2936056] [javascript] Possible Unhandled Promise Rejection (id: 0):
TypeError: Cannot read property 'initialize' of null
TypeError: Cannot read property 'initialize' of null
    at ensureInitialized$ (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=com.vatomcorp.viewer:653325:71)
    at call (native)
    at tryCatch (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=com.vatomcorp.viewer:24153:23)
    at anonymous (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=com.vatomcorp.viewer:24133:34)
    at anonymous (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=com.vatomcorp.viewer:24184:30)
    at call (native)
    at tryCatch (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=com.vatomcorp.viewer:24153:23)
    at invoke (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=com.vatomcorp.viewer:24191:30)
    at anonymous (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=com.vatomcorp.viewer:24215:19)
    at tryCallTwo (/Users/distiller/hermes/build_iphonesimulator/lib/InternalBytecode/InternalBytecode.js:61:9)
    at doResolve (/Users/distiller/hermes/build_iphonesimulator/lib/InternalBytecode/InternalBytecode.js:216:25)
    at Promise (/Users/distiller/hermes/build_iphonesimulator/lib/InternalBytecode/InternalBytecode.js:82:14)
    at callInvokeWithMethodAndArg (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=com.vatomcorp.viewer:24214:33)
    at anonymous (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=com.vatomcorp.viewer:24219:157)
    at anonymous (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=com.vatomcorp.viewer:24184:30)
    at anonymous (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=com.vatomcorp.viewer:24305:69)
    at ensureInitialized (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=com.vatomcorp.viewer:653312:38)
    at tryCreateAsync$ (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=com.vatomcorp.viewer:654279:123)
    at call (native)

package.json:

"@babylonjs/core": "5.17.1",
"@babylonjs/loaders": "5.17.1",
"@babylonjs/react-native": "1.2.0",
"@babylonjs/react-native-iosandroid-0-65": "1.2.0",
...

Or do we have to downgrade to RN 0.65?

[kerryaustin]

@theonetheycallneo I am using 0.68.x and I have no issue on iOS, on Android (even with 1.3.0-preview) it crashes as soon as a call to useEngine is made

Could be you're not waiting for the engine to be initialized before you're using it? Hard to tell without knowing what you're code looks like

[theonetheycallneo]

@kerryaustin Anything I'm doing wrong?

export default function Face(props: FaceProps) {

const engine = useEngine()
  const [camera, setCamera] = useState<Camera>()
  const [xrSession, setXrSession] = useState<WebXRSessionManager | undefined>(undefined)
  const [trackingState, setTrackingState] = useState<WebXRTrackingState>()
  const [scene, setScene] = useState<Scene>()

  const onToggleXr = useCallback(async () => {
    log('onToggleXr')
    log('onToggleXr xrSession exists?', !!xrSession)
    log('onToggleXr scene exists?', !!scene)
    if (xrSession) {
      log('onToggleXr exit')
      await xrSession.exitXRAsync()
    } else {
      if (scene !== undefined) {
        log('onToggleXr setup')
        const xr = await scene.createDefaultXRExperienceAsync({
          disableDefaultUI: true,
          disableTeleportation: true
        })
        const session = await xr.baseExperience.enterXRAsync(
          'immersive-ar',
          'unbounded',
          xr.renderTarget
        )
        setXrSession(session)
        session.onXRSessionEnded.add(() => {
          setXrSession(undefined)
          setTrackingState(undefined)
        })
        setTrackingState(xr.baseExperience.camera.trackingState)
        xr.baseExperience.camera.onTrackingStateChanged.add(newTrackingState => {
          setTrackingState(newTrackingState)
        })
      }
    }
  }, [scene, xrSession])

  useEffect(() => {
    const setupEngine = async () => {
      log('setupEngine')
      const url =
        'https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/BoxAnimated/glTF/BoxAnimated.gltf'
      const scene = await SceneLoader.LoadAsync(url, undefined, engine)
      log('setupEngine scene!', !!scene)
      setScene(scene)
      scene.createDefaultCameraOrLight(true, undefined, true)
      ;(scene.activeCamera as ArcRotateCamera).alpha += Math.PI
      ;(scene.activeCamera as ArcRotateCamera).radius = 10
      setCamera(scene.activeCamera!)
    }
    log('useEffect')
    if (engine) {
      try {
        setupEngine()
      } catch (error) {
        logError(error)
      }
    }
  }, [engine])

  return (
    <View style={[props.style, { flex: 1 }]}>
      <Button title={xrSession ? 'Stop XR' : 'Start XR'} onPress={onToggleXr} />
      <View style={{ flex: 1 }}>
        {/* https://github.com/BabylonJS/BabylonReactNative/blob/master/Modules/%40babylonjs/react-native/README.md#engineview */}
        <EngineView
          camera={camera}
          displayFrameRate={true}
          isTransparent={true}
          style={{ flex: 1 }}
        />
      </View>
    </View>
  )

This is taken from the sample in the repo

[theonetheycallneo]

@theonetheycallneo I am using 0.68.x and I have no issue on iOS, on Android (even with 1.3.0-preview) it crashes as soon as a call to useEngine is made

Could be you're not waiting for the engine to be initialized before you're using it? Hard to tell without knowing what you're code looks like

How are you getting it to work on iOS?

[kerryaustin]

@theonetheycallneo Creating a repo to give you a minimum example of it working along with the crash on android (for a future bug report), I'll send it to you soon

[kerryaustin]

@theonetheycallneo here you go: https://github.com/kerryaustin/RNBabylon68 This uses the 1.3.0-preview packages but should work exactly the same with 1.2.0

[ryantrem]

It seems like @runtothedoor hit the same TypeError: Cannot read property 'initialize' of null error because I saw a PR that was opened and then closed while I was out of the office: https://github.com/BabylonJS/BabylonReactNative/pull/432/files

I'm not sure how NativeModules.BabylonModule would be null though... it should be registered as part of React Native's classic module initialization before any JS code executes.

[gomes042]

It seems like @runtothedoor hit the same TypeError: Cannot read property 'initialize' of null error because I saw a PR that was opened and then closed while I was out of the office: https://github.com/BabylonJS/BabylonReactNative/pull/432/files

I'm not sure how NativeModules.BabylonModule would be null though... it should be registered as part of React Native's classic module initialization before any JS code executes.

PR closed because it was my mistake, I was using a wrong version of react-native

[theonetheycallneo]

Right, it's odd that the NativeModule is just undefined.

[XiongMeng1992]

@jonklein @pingumen96伙计们，请确认你们是否在gradle.properties中使用RN 0.68和newArchEnabled=true。当标志设置为false时，它对我有用，否则它会显示错误“EngineView”与Fabric兼容。

我没有使用newArchEnabled = true，因为与其他库不兼容。

@pingumen96 How do you solve the problem of not loading on Android without setting newArchEnabled = true? I used "@babylonjs/ react-nate-iosandroid-0-65 ": "1.3.0-preview"

[thomlucc]

Does anybody still have problems with this?

[thomlucc]

Closing. Feel free to re-open if it is still an issue

[thomlucc]

Closing. Feel free to re-open if it is still an issue