Babylon Native with Expo

Questions
1

Hello,

I am currently working on a native app in which I want to integrate Babylon. I want to deploy the app on iOS, Android & Web, which is why I am using Expo.

Unfortunately, I am getting different errors on my machine and on Expo Snack.

Do you have any instructions to make it work?

Error on Expo Snack - babylon native - Snack

Unable to resolve module '@babylonjs/abstractScene.js'
  Evaluating @babylonjs/abstractScene.js
  Evaluating @babylonjs/core.js
  Evaluating @babylonjs/react-native.js
  Evaluating App.js
  Loading App.js

Error on my machine

./node_modules/@babylonjs/react-native/EngineView.js 14:28
Module parse failed: Unexpected token (14:28)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|     const initialized = useModuleInitializer();
|     const engine = useMemo(() => {
>         return props.camera?.getScene().getEngine();
|     }, [props.camera]);
|     const renderLoop = useCallback(() => {
./node_modules/@babylonjs/react-native/EngineHook.js 17:9
Module parse failed: Unexpected token (17:9)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| })(DOMError || (DOMError = {}));
| class DOMException {
>     error;
|     constructor(error) {
|         this.error = error;
./node_modules/@babylonjs/react-native/NativeCapture.js 3:17
Module parse failed: Unexpected token (3:17)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| ;
| export class CaptureSession {
>     nativeCapture;
|     constructor(camera, onCaptureCallback) {
|         console.warn(`CaptureSession is experimental and likely to change significantly.`);
./node_modules/@babylonjs/react-native/FontFace.js 6:10
Module parse failed: Unexpected token (6:10)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|  */
| export class FontFace {
>     family;
|     source;
|     _status = "unloaded";

Best

2

I don’t think there are any plans to support Expo on Native - I had brought this up a couple of years ago myself. What I think will start to happen is device/XR support will exceed Expo capabilities, but you don’t have the ease of how Expo works (ie: scan QR code to deploy). If you read the Babylon Native docs on their layering it may become clearer the “why”. Would be interested in the official statement from the Babylon.js team.

3

cc @bghgary and @Cedric

4

cc @ryantrem

Not many members on the team have of experience with Expo, so I’m not sure we have answers. Can you provide a repro (maybe in a repo) of what you are doing?

5

My understanding of Expo is that the native part of the app is basically pre-built from React Native plus a pre-selected set of React Native modules. This makes it easier to build a React Native app because you don’t have to build the native code (for the most part), and you can download js bundles and load them into the Expo app itself. However, because the native code is fixed, you can’t add in new native modules. So from my understanding, the only way Babylon React Native could work with Expo is if Expo chose to include Babylon React Native as one of the “built in” react native modules. I’ve never used Expo, so this is just my understanding from some light research a year or two ago.

6

I havent done it before, so I’m no expert by any means, but Expo EAS builds allow for using modules outside of the ones Expo provide