React Native Setup

Bugs
1

Hey can someone help me with the react native setup with babylon js bc i don’t know why but i just have a white screen even tho I’ve created the scene and everything.

image
image419×883 20 KB 

import React, {useState, useEffect} from "react";
import { View, Text, TouchableHighlight, StyleSheet, ToastAndroid, Alert, Dimensions } from 'react-native'
import {useNavigation} from '@react-navigation/native';
import TabContainer from '../../components/TabContainer';
import { useEngine, EngineView } from '@babylonjs/react-native';
import {Camera} from '@babylonjs/core/Cameras/camera';
import {Scene} from '@babylonjs/core/scene';
import {SceneLoader} from '@babylonjs/core/Loading/sceneLoader';

export default function ProfileScreen(){
    const navigation = useNavigation();
    const engine = useEngine();
    const [scene, setScene] = useState(null);
    const [camera, setCamera] = useState(null);
    
    useEffect(() => {
        if(engine){
            SceneLoader.LoadAsync(url, undefined, engine).then(loadScene => {
                setScene(loadScene);
                loadScene.createDefaultCameraOrLight(true, undefined, true);
                (loadScene.activeCamera).alpha += Math.PI;
                (loadScene.activeCamera).radius = 10;
                setCamera(loadScene.activeCamera);
            });
        }

        // const newScene = new  Scene(engine);
        // newScene.createDefaultCamera(true);
        // setCamera(newScene.activeCamera);

        // // Create a cube and add it to the scene
        // var cube =  MeshBuilder.CreateBox("cube", {}, newScene);
        // cube.position = new  Vector3(0, 0, 0);  // Position the cube

        // var redMaterial = new StandardMaterial("redMaterial", newScene);
        // redMaterial.diffuseColor = new Color3(1, 0, 0);  // RGB values for red
        // cube.material = redMaterial;

        // setScene(newScene);
    }, [engine]);

    return(
    <TabContainer>
        <View style={{flex: 1}}>
            <EngineView camera={camera} displayFrameRate={true} />
        </View>
    </TabContainer>
    )
}

const styles = StyleSheet.create({
    centerContent:{
        justifyContent: 'center',
        alignItems: 'center',
        marginTop: 40,
    },


    buttonStyle:{
        margin: 10,
        width: '65%',
        backgroundColor : '#9de1f6',
    },

    textStyle:{
        marginTop:30,
        margin:20
    }

});
2

cc @BabylonNative

3

Hi @Firdeus_Kasaj

Did you check the reference sample here : BabylonReactNative/App.tsx at master · BabylonJS/BabylonReactNative · GitHub

It contains all the code to load and display a gltf.

Do you have an error in the log?

4

I had the same issue as well.

image
image814×922 85.2 KB

I am running it on expo, I already tried with yarn expo run:android. So it should already install the native dependency. I do believe it’s related to this issue 9https://github.com/BabylonJS/BabylonReactNative/issues/583)

But for some reason it’s still not working on my end

I took a look at the code (https://github.com/BabylonJS/BabylonReactNative/blob/aafbad864d6eb6b08c4461caa8d77583e9aa4da3/Modules/%40babylonjs/react-native/BabylonModule.ts)

const BabylonModule: {
    initialize(): Promise<void>;
    resetView(): Promise<void>;
} = NativeModules.BabylonModule;

I think for some reason, nativeModules.BabylonModule is not available. It returns null

5

Did you disable debugger support in your app? Any idea on what’s happening here @ryantrem ?

6

I’ve only ever seen NativeModules.BabylonModule be null with some kind of misconfiguration, but I also have no practical experience with expo. I thought an expo project had to be “ejected” to use arbitrary React Native modules, but I’m not sure. I think someone would need to test out the steps required to get BRN working in a project created with expo.

7

I was true expo needed to be ejected.
But it’s no longer the case nowadays.

We can add native modules to expo now

8

I can walk you through my current setup if you want.
I think Babylon react-native will be a game changer for react-native

I think one of the reason why three js is famous, is because it’s supported by react-three-fiber, which support react-native through expo-gl.

But it’s somewhat not excellent yet. If babylon react-native can be easily integrated to expo, it will definitely boost the usage in react-native community.

9

@Muhammad_Muhajir just checking in if you managed to make it work or need any further help?