I'm doing something wrong with Babylon React Native Sample but what?

Hi, I try to test Babylon React Native Sample on an android virtual device;
As a novice using React Native, I first do what the React native documentation said and smoothly run on the emulator.
Then I followed the instruction of the Babylon React Native Sample, but I failed without understanding what I missed;
Then tried to do it from scratch, but both the sample and the from-scratch ended with the same error:

Hiwo@Mmmmmporg MINGW64 /f/Code/Game_code/BabylonJs/BabylonReactNativeSample
$ npm run android

> BabylonReactNativeSample@0.0.1 android
> react-native run-android

Get-ChildItem : Cannot find path 'F:\Common7\IDE\Extensions\' because it does not exist.
At
F:\Code\Game_code\BabylonJs\BabylonReactNativeSample\node_modules\react-native-windows\Scripts\rnw-dependencies.ps1:174   
char:19
+ ...   $natvis = Get-ChildItem "$vsPath\Common7\IDE\Extensions\cppwinrt.na ...
+                 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    + CategoryInfo          : ObjectNotFound: (F:\Common7\IDE\Extensions\:String) [Get-ChildItem], ItemNotFoundException  
    + FullyQualifiedErrorId : PathNotFound,Microsoft.PowerShell.Commands.GetChildItemCommand

info Running jetifier to migrate libraries to AndroidX. You can disable it using "--no-jetifier" flag.
Jetifier found 888 file(s) to forward-jetify. Using 8 workers...
info Starting JS server...
info Installing the app...
Starting a Gradle Daemon (subsequent builds will be faster)
WARNING:: Please remove usages of `jcenter()` Maven repository from your build scripts and migrate your build to other Maven repositories.
This repository is deprecated and it will be shut down in the future.
See http://developer.android.com/r/tools/jcenter-end-of-service for more information.
Currently detected usages in: project ':babylonjs_react-native-iosandroid-0-65'
> Task :app:mergeDebugAssets FAILED

Deprecated Gradle features were used in this build, making it incompatible with Gradle 7.0.
Use '--warning-mode all' to show the individual deprecation warnings.
See https://docs.gradle.org/6.9/userguide/command_line_interface.html#sec:command_line_warnings
11 actionable tasks: 11 executed

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':app:mergeDebugAssets'.
> Could not resolve all files for configuration ':app:debugRuntimeClasspath'.
   > Could not resolve com.facebook.react:react-native:+.
     Required by:
         project :app
         project :app > project :babylonjs_react-native-iosandroid-0-65
         project :app > project :react-native-permissions
      > Could not resolve com.facebook.react:react-native:0.65.2.
         > java.lang.NullPointerException (no error message)

* 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

BUILD FAILED in 47s

error Failed to install the app. Make sure you have the Android development environment set up: https://reactnative.dev/docs/environment-setup.
Error: Command failed: gradlew.bat app:installDebug -PreactNativeDevServerPort=8081

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':app:mergeDebugAssets'.
> Could not resolve all files for configuration ':app:debugRuntimeClasspath'.
   > Could not resolve com.facebook.react:react-native:+.
     Required by:
         project :app
         project :app > project :babylonjs_react-native-iosandroid-0-65
         project :app > project :react-native-permissions
      > Could not resolve com.facebook.react:react-native:0.65.2.
         > java.lang.NullPointerException (no error message)

* 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

BUILD FAILED in 47s

    at makeError (F:\Code\Game_code\BabylonJs\BabylonReactNativeSample\node_modules\@react-native-community\cli-platform-android\node_modules\execa\index.js:174:9)
    at F:\Code\Game_code\BabylonJs\BabylonReactNativeSample\node_modules\@react-native-community\cli-platform-android\node_modules\execa\index.js:278:16
    at processTicksAndRejections (node:internal/process/task_queues:95:5)
    at runOnAllDevices (F:\Code\Game_code\BabylonJs\BabylonReactNativeSample\node_modules\@react-native-community\cli-platform-android\src\commands\runAndroid\runOnAllDevices.ts:90:5)
    at Command.handleAction (F:\Code\Game_code\BabylonJs\BabylonReactNativeSample\node_modules\@react-native-community\cli\src\index.ts:145:11)
info Run CLI with --verbose flag for more details.

cc @BabylonNative

1 Like

Hi @Hiwoyn
What is the CMake version you are using? Not sure it’s the cause but I always check when I see java.lang.NullPointerException
If itis > 3.20, can you try installing 3.19.6 ?

2 Likes

Hi Cedric, I don’t have CMake installed, would you suggest that I install and try again?

Yes, you can try. Also, any idea what it can be @srzerbetto ?
I’m suspicious about Could not resolve com.facebook.react:react-native:+.
Can it be a wrong dependency?

Can you pas your package.json here @Hiwoyn ?

1 Like

{
“name”: “BabylonReactNativeSample”,
“version”: “0.0.1”,
“private”: true,
“scripts”: {
“android”: “react-native run-android”,
“ios”: “react-native run-ios”,
“start”: “react-native start”,
“test”: “jest”,
“lint”: “eslint .”
},
“dependencies”: {
@babylonjs/core”: “^5.10.0”,
@babylonjs/loaders”: “^5.10.0”,
@babylonjs/react-native”: “^1.2.0”,
@babylonjs/react-native-iosandroid-0-65”: “^1.2.0”,
“react”: “17.0.2”,
“react-native”: “0.65.2”,
“react-native-permissions”: “^3.0.0”,
“react-native-windows”: “0.65.6”
},
“devDependencies”: {
@babel/core”: “^7.12.9”,
@babel/runtime”: “^7.12.5”,
@react-native-community/eslint-config”: “^2.0.0”,
@types/jest”: “^27.4.1”,
@types/react”: “^17.0.43”,
@types/react-native”: “^0.67.3”,
@types/react-test-renderer”: “^17.0.1”,
“babel-jest”: “^26.6.3”,
“eslint”: “7.14.0”,
“jest”: “^26.6.3”,
“metro-react-native-babel-preset”: “^0.66.0”,
“react-native-codegen”: “^0.0.7”,
“react-test-renderer”: “17.0.2”,
“typescript”: “^4.6.3”
},
“jest”: {
“preset”: “react-native”
}
}

“@babylonjs/react-native-iosandroid-0-65”: “^1.2.0”,
is a bit old, can you please try with 1.4.2 and

"@babylonjs/core": "5.35.1",
   "@babylonjs/loaders": "5.35.1",

Hey @Hiwoyn , how are you doing?

I agree with @Cedric , it might be just a problem with the version of your package. Unfortunately, our documentation for the sample repo is a little old now. I will be switching to make react native version 0.69 the default version on master for the sample, it seems people are having a more stable experience using that compared to 0.65.

If you want to try using 0.69, the instructions and sample repo are currently under the

1 Like

Hi, the build is now successful; :smiley:
Added a JAVA_HOME environment variable and updated the package version.

What I try to accomplish for now is to have a simple scene like the playground with just a sphere but I can’t manage to see anything:

import React, { FunctionComponent, Node, useEffect, useState } from “react”;
import {
SafeAreaView, Text, View,
ViewProps
} from “react-native”;

import {
HemisphericLight,
MeshBuilder,
Vector3
} from “@babylonjs/core”;
import { Camera } from “@babylonjs/core/Cameras/camera”;
import { Scene } from “@babylonjs/core/scene”;
import { EngineView, useEngine } from “@babylonjs/react-native”;

const EngineScreen: FunctionComponent = (props: ViewProps) => {
const engine = useEngine();
const [camera, setCamera] = useState();
useEffect(() => {
if (engine) {
const scene = new Scene(engine);
scene.createDefaultCamera(true);
setCamera(scene.activeCamera!);
const light = new HemisphericLight(“light”, new Vector3(1, 1, 0), scene);
const sphere = MeshBuilder.CreateSphere(“sphere”, {});
// Setup the scene!
}
}, [engine]);

return (
<>
<EngineView style={{ flex: 1 }} camera={camera} />
</>
);
};

const App: () => Node = () => {
return (


<Text
style={{
marginTop: 8,
fontSize: 18,
fontWeight: “700”,
}}
>
this Text still editable on save

<EngineScreen style={{ flex: 1 }} />


);
};

export default App;

1 Like

Ping @BabylonNative but bare with us for any delay @Hiwoyn as we are on holiday period :slight_smile:

1 Like

@Hiwoyn , are you using a physical android device? Or are you running on an emulator? I’m asking this because using the emulator can be tricky in some situations due to missing OpenGL implementations. Can you validate if you can run it on a physical device?

Hey @Hiwoyn just checking in if you were able to run the sample or you need any more help? :slight_smile: