BabylonReactNative: no 3D view on Windows

Bugs
1

Hi there!
Continuing my experiments with BabylonJS for ReactNative :slight_smile:

I’m using the sample code from Playground 0.65 from the BabylonReactNative GitHub repo (main branch). The app builds and runs smoothly on Android and iOS :+1:

I’m trying to run on Windows 10 as well. The app seems to builds properly but there is no render view at runtime:

image
image627×541 3.98 KB

I’ve tried building 32 bits and 64 bits, always with the release configuration.

And I’ve tried with 2 different packages versions:

    "@babylonjs/core": "^5.0.0-alpha.65",
    "@babylonjs/loaders": "^5.0.0-alpha.65",
    "@babylonjs/react-native": "^0.65.0-alpha.47",
    "@react-native-community/slider": "^4.2.1",
    "react": "17.0.2",
    "react-native": "0.65.2"
    "react-native-windows": "0.65.12"

and

    "@babylonjs/core": "^5.0.0-rc.3",
    "@babylonjs/loaders": "^5.0.0-rc.3",
    "@babylonjs/react-native": "^0.65.0-alpha.48",
    "@react-native-community/slider": "^4.2.1",
    "react": "17.0.2",
    "react-native": "0.65.2",
    "react-native-windows": "0.65.12"

Notes:

-1-
I’ve tried in debug, when running from the command line with:

npx react-native run-windows

I get a message saying that Babylon Native doesn’t run in debug mode.
I understand that I need to run in release mode, but this shows that the app is at least trying to render when running in debug.

-2-
I’ve also noticed the sample app doesn’t support Windows dark mode. This is what I get with dark mode on (the default on all my machines):

image
image623×541 1.6 KB

May be I need to use a different version of the BabylonReactNative package to get it to work?
Thank you for help!

2

cc @srzerbetto

3

@obasille , the support for windows is currently experimental. However, some of our team member have successfully run it from the github repo.

I will try to create a sample project to repro the results you are getting.

4

Thanks @srzerbetto!
Here is my project.
BabylonReactNativeApp.zip (413.0 KB)

5

Thanks @obasille , this will be very useful!

1 Like
6

@obasille , are you using the package @babylonjs/react-native-windows ?

Can you try adding that to your project?

1 Like
7

Oh… I didn’t realized that there was a windows specific package, although with hindsight it seems kind of obvious!

Thank you for pointing that out, it’s working now!

As a note, I had to install it with “–force” because it’s using version 3 of react-native-permissions whereas @babylonjs/react-native@0.65.0-alpha.48 is on version 2.

8

Note: for future readers, just be sure to install react-native-windows with a version matching @babylonjs/react-native

9

Just as on update @obasille , we are aware of this react-native-permissions problem and we are working on a fix for it right now. I’m glad you were able to make it work!

2 Likes
10

Hi @obasille

I managed to get it to work. I’ve updated the GitHub issue with some infos : 3D View not been rendered when using windows npm package · Issue #364 · BabylonJS/BabylonReactNative · GitHub

Let me know if it works for you.

BTW, the dark mode is not fixed.

11

Hi Cedric,
Thanks for your message. I’ve read the issue, I’m a bit confused, this about to be able to run with a debug build?
Because for the “no 3d view” initial problem, my mistake was that I didn’t added the @babylonjs/react-native-windows package.

12

Yes, but I always check and found an issue(that I fixed) on the way.

13

Thanks, I’ll give it a try!

1 Like
14

Hi @Cedric,
Just did some tests and I can run a release build with no issue.
For the debug build, I’ve edited app.cpp to disable the web debugger as you pointed out in the issue #364 and that got it running :slight_smile:
Thanks!

For reference:

    "dependencies": {
      "@babylonjs/core": "^5.1.0",
      "@babylonjs/loaders": "^5.1.0",
      "@babylonjs/react-native": "^1.0.1",
      "@babylonjs/react-native-windows-0-65": "^1.0.1",
      "@react-native-community/slider": "^4.2.1",
      "react": "17.0.2",
      "react-native": "0.65.2",
      "react-native-windows": "0.65.12"
    }
1 Like