Hi all,
I’m encountering an issue while integrating BabylonJS into a React Native Expo app. Here’s a brief overview:
- Setup:
I created the app usingnpx create-expo-app@latestand installed the@babylonjs/react-nativepackage.
I followed the usage details from the npm package documentation and implemented the following component:
import { StyleSheet } from "react-native";
import { EngineView, useEngine } from "@babylonjs/react-native";
import { Engine, Scene, Camera } from "@babylonjs/core";
import { useEffect, useState } from "react";
export default function HomeScreen() {
const engine = useEngine();
const [camera, setCamera] = useState<Camera>();
useEffect(() => {
if (engine) {
const scene = new Scene(engine);
scene.createDefaultCamera(true);
setCamera(scene.activeCamera!);
// Setup the scene!
}
}, [engine]);
return (
<>
<EngineView style={{ flex: 1 }} camera={camera} />
</>
);
}
- Package.json:
Here is my package.json file:
{
"name": "react-native-expo-babylon",
"main": "expo-router/entry",
"version": "1.0.0",
"scripts": {
"start": "expo start",
"reset-project": "node ./scripts/reset-project.js",
"android": "expo run:android",
"ios": "expo run:ios",
"web": "expo start --web",
"test": "jest --watchAll",
"lint": "expo lint"
},
"jest": {
"preset": "jest-expo"
},
"dependencies": {
"@babylonjs/react-native": "^1.8.6",
"@expo/vector-icons": "^14.0.2",
"@react-navigation/bottom-tabs": "^7.2.0",
"@react-navigation/native": "^7.0.14",
"expo": "~52.0.43",
"expo-blur": "~14.0.3",
"expo-constants": "~17.0.8",
"expo-font": "~13.0.4",
"expo-haptics": "~14.0.1",
"expo-linking": "~7.0.5",
"expo-router": "~4.0.20",
"expo-splash-screen": "~0.29.22",
"expo-status-bar": "~2.0.1",
"expo-symbols": "~0.2.2",
"expo-system-ui": "~4.0.9",
"expo-web-browser": "~14.0.2",
"react": "18.3.1",
"react-dom": "18.3.1",
"react-native": "0.76.9",
"react-native-gesture-handler": "~2.20.2",
"react-native-permissions": "^5.3.0",
"react-native-reanimated": "~3.16.1",
"react-native-safe-area-context": "4.12.0",
"react-native-screens": "~4.4.0",
"react-native-web": "~0.19.13",
"react-native-webview": "13.12.5"
},
"devDependencies": {
"@babel/core": "^7.25.2",
"@types/jest": "^29.5.12",
"@types/react": "~18.3.12",
"@types/react-test-renderer": "^18.3.0",
"jest": "^29.2.1",
"jest-expo": "~52.0.6",
"react-test-renderer": "18.3.1",
"typescript": "^5.3.3"
},
"private": true
}
- Troubleshooting Attempt:
Based on community discussions, I added the following line to the AppDelegate.mm file to disable remote debugging:
[self.bridge.devSettings setIsDebuggingRemotely:NO];
However, this didn’t resolve the issue.
- Environment:
- Xcode version: 16.3
- Simulator: iPhone 16 Pro (iOS 18.3.1)
Has anyone encountered a similar issue or could provide insights into what might be wrong with my setup? Any help would be greatly appreciated!
