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

Hiwoyn · December 12, 2022, 10:31am

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.

carolhmj · December 12, 2022, 2:14pm

cc @BabylonNative

Cedric · December 12, 2022, 2:22pm

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 ?

Hiwoyn · December 13, 2022, 9:25am

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

Cedric · December 13, 2022, 9:33am

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 ?

Hiwoyn · December 13, 2022, 9:37am

{
“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”
}
}

Cedric · December 13, 2022, 9:48am

“@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",

srzerbetto · December 13, 2022, 5:40pm

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

Hiwoyn · December 18, 2022, 7:19am

Hi, the build is now successful;
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;

sebavan · December 19, 2022, 5:12pm

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

srzerbetto · December 19, 2022, 5:35pm

@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?

carolhmj · January 18, 2023, 1:43pm

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

Topic		Replies	Views
BabylonReactNative in new react native project that's not the playground Questions	4	868	May 20, 2021
Build error after adding BabylonReactNative to default ReactNative project (Android) Bugs	14	1680	December 9, 2022
Total beginner need guidance Questions react-native	3	200	October 16, 2023
Babylon react native crashing Questions	4	387	July 21, 2022
Error when trying to use compatible versions (according to docs) of Babylon React Native and Babylon.js Bugs babylon-native , react-native	9	197	November 23, 2023

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

Related Topics