Build error after adding BabylonReactNative to default ReactNative project (Android)

Bugs
1

Hi!
I’m trying to add BabylonReactNative to a fresh ReactNative project. I’ve tried the following:

npx react-native init Playground --version 0.65.0 --template react-native-template-typescript
npx react-native run-android

The demo launched properly on the emulator. Next step is adding BabylonReactNative.

npm i @babylonjs/react-native
npx react-native run-android

Which gave me this output:

See https://docs.gradle.org/7.2/userguide/command_line_interface.html#sec:command_line_warnings

FAILURE: Build completed with 2 failures.

1: Task failed with an exception.
-----------
* Where:
Build file 'C:\Users\Olivier\Documents\dev\systemic\babylon\Playground\node_modules\@babylonjs\react-native\android\build.gradle' line: 27

* What went wrong:
A problem occurred evaluating project ':babylonjs_react-native'.
> 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'.
> com.android.builder.errors.EvalIssueException: compileSdkVersion is not specified. Please add it to build.gradle

I’ve also tried using the latest version of ReactNative instead of 0.65.
I’m running on Win10 21H2.

Any help will be appreciated, thanks!

2

Just realized that installing v65 of the typescript template for ReactNative doesn’t work.

After running:

npx react-native init Playground --version 0.65.0 --template react-native-template-typescript

The package.json file has this:

  "dependencies": {
    "react": "17.0.2",
    "react-native": "0.67.3"
  },

Note: this the command line that is mentioned in the BabylonReactNative doc.

3

Just found the bug report for --version not working with typescript template.

4

cc @bghgary and @ryantrem

5

cc @Cedric

6

React Native in package.json should be 0.65. We’ve not tested with react native 0.65.
Maybe the script to generate the project is not good on Windows. I’ve generated the app for iOS/Android on a Mac.

7

Yea the React Native CLI seems broken. I think for now you have to create a new React Native app without the TypeScript template arg (which will allow you to select the right version of RN), then update your project to use TypeScript. :frowning:

1 Like
8

Thanks for your help!

Indeed it builds on Windows when not using the typescript template.

For anyone reading this, be sure to request version 0.65 so to get the latest 0.65 patch. If you use 0.65.0 with the trailing 0 you will get a package dependency error on install.

Apologies for bugging you again, but I now have a runtime error:

Error: Protocol version mismatch: 2 (Native) !== 3 (JS)

This looks like a Babylon error from here:
Babylon.js => src/Engines/nativeEngine.ts

To get there I did the following:

npx react-native init Playground --version 0.65
npm i @babylonjs/react-native @babylonjs/loaders @react-native-community/slider

Copied ts.config and App.tsx from BabylonReactNative Playground app 0.65 and removed App.js.

Note: the project works fine if I replace App.tsx with the default one from the react native typescript template.

9

This means the Babylon React Native package is incompatible with the Babylon.js package. What versions are you using?

10

From package.json:

"dependencies": {
    "@babylonjs/loaders": "^4.2.1",
    "@babylonjs/react-native": "^0.65.0-alpha.47",
    "@react-native-community/slider": "^4.2.0",
    "react": "17.0.2",
    "react-native": "0.65.2"
  },
11

This can’t be right. There is no @babylonjs/core here. Also, @babylonjs/loaders on 4.2.1 shouldn’t work since you have to be at least on 5.0.0 for this to work.

12

@babylonjs/loaders has a dependency on @babylonjs/core, so the app will transitively have a dependency on @babylonjs/core (it doesn’t need to be listed explicitly). Try to install @babylonjs/loaders@5.0.0-alpha.65.

Also, you should see an error in the metro console window telling you the minimum Babylon.js version you need to use.

2 Likes
13

Thank you both for your help!

I’ve updated loaders and I’m still getting the same error unfortunately.

npm i @babylonjs/loaders@5.0.0-alpha.65

To be safe I stopped everything and run gradlew clean before building for Android (note, I’m on Windows, using the emulator).

I don’t see any information about the version to use in metro though (for reference I’m attaching the metro’s output).

Looking at package-lock.json, it seems that I’m on version 5 rc0 for core.

"node_modules/@babylonjs/core": {
      "version": "5.0.0-rc.0",

metro
metro1426×586 20.9 KB

14

Switching to babylonjs/core@5.0.0-alpha.65 fixed the issue!

And it’s now displaying the version number in metro

LOG BJS - [22:38:37]: Babylon Native (v5.0.0-alpha.65) launched

3 Likes
15

The following work-flow works for the Sample project:
git clone GitHub - BabylonJS/BabylonReactNativeSample webxr
cd webxr
git checkout react-native-0-69
npm install
npm run android

1 Like