React Native Setup

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.

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(() => {
            SceneLoader.LoadAsync(url, undefined, engine).then(loadScene => {
                loadScene.createDefaultCameraOrLight(true, undefined, true);
                (loadScene.activeCamera).alpha += Math.PI;
                (loadScene.activeCamera).radius = 10;

        // 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]);

        <View style={{flex: 1}}>
            <EngineView camera={camera} displayFrameRate={true} />

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

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



cc @BabylonNative

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?

I had the same issue as well.

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 9

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

I took a look at the code (

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

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

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

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.

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

We can add native modules to expo now

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.

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