Giter VIP home page Giter VIP logo

babylonreactnativesample's Introduction

Getting Started with Babylon React Native

This sample repo is intended to help users get started using Babylon React Native to create React Native applications using Babylon.js.

Required Tools

1. Setup React Native Development Environment

Follow the instructions on React Native's documentation for setting up your development environment. Be sure to select "React Native CLI quickstart" instead of "Expo CLI quickstart" since we currently do not support the usage of Expo.

2. Clone the Repo

git clone https://github.com/BabylonJS/BabylonReactNativeSample.git

3. Project Setup

From the repo root folder, restore the npm packages by running:

cd BabylonReactNativeSample
npm install

iOS Only

When building for iOS, it will also be required to install the pods for the project. Go to the iOS project folder and run pod install.

cd ios
pod install
cd ..

Android Emulator Only

In order to use Babylon React Native with the Android Emulator, the emulator must be configured with GLES3. Follow these instructions.

4. Try It Out

From your repo root folder, run:

npm run ios

or

chmod 755 android/gradlew
npm run android

If you want to run the application using physical devices, please follow the React Native Run on Device documentation.

5. Add Your Code

Once the project is running, open App.tsx using your favorite code editor (we recommend using vscode). Under EngineScreen.useEffect, you can setup your Babylon scene the same way you do when using the Babylon.js Playground.

More Information

How to create this project from scratch

Additional Documentation

Babylon React Native

babylonreactnativesample's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

babylonreactnativesample's Issues

Error setting up sample project from scratch

The library crashes on start with the below error when setup from scratch with [email protected] and @babylonjs/react-native-iosandroid-0-65 on Android. I have checked on emulators Pixel 2 API 29 and Pixel XL API 31. Cloning this repo and running it works without a problem. But when I remove package-lock.json and run, it starts breaking again

Error:

Unexpected token '='
no stack

Android error stack:

2022-09-08 14:40:56.471 17190-17307/com.babylon65 E/unknown:ReactNative: Exception in native call from JS
    com.facebook.react.devsupport.JSException: Unexpected token '='
        at com.facebook.react.bridge.queue.NativeRunnable.run(Native Method)
        at android.os.Handler.handleCallback(Handler.java:883)
        at android.os.Handler.dispatchMessage(Handler.java:100)
        at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:27)
        at android.os.Looper.loop(Looper.java:214)
        at com.facebook.react.bridge.queue.MessageQueueThreadImpl$4.run(MessageQueueThreadImpl.java:226)
        at java.lang.Thread.run(Thread.java:919)
     Caused by: com.facebook.jni.CppException: Unexpected token '='
    
    no stack
    	... 7 more

To Reproduce
Follow the setup steps in the sample repo

> react-native init babylon65 --version 0.65
> cd babylon65
> npm i --save @babylonjs/react-native @babylonjs/react-native-iosandroid-0-65 @babylonjs/core @babylonjs/loaders [email protected]
> npm install -D typescript @types/jest @types/react @types/react-native @types/react-test-renderer
> vi tsconfig.json #Copy the config from the repo
> vi jest.config.js #Copy the config from the repo
> mv App.js App.tsx
> vi App.tsx #Copy App.tsx from [the repo](https://github.com/BabylonJS/BabylonReactNativeSample/blob/main/App.tsx)
> npm start
> npm run android

Alternatively, following the below steps also gives the same error

git clone https://github.com/BabylonJS/BabylonReactNativeSample.git
cd BabylonReactNativeSample
rm package-lock.json
npm install
npm start
npm run android

Repo with the error-ing package-lock.json for reference:

git clone https://github.com/kbhokray/babylon65
npm install
npm start
npm run android

Expected behavior
The application should run without an error

Screenshots
babylon65_error

Other

  • Platform: Android
  • nodejs v16.17.0 (also checked with v14.17.0)

Since it looks like it's a babel error, I also tried adding the below in babel.config.js as mentioned in babel's repo. Even that doesn't seem to work

module.exports = {
   presets: [['module:metro-react-native-babel-preset', {
        unstable_disableES6Transforms: true
    }]],
};

Update Readme information for MacOs

Your readme is missing a hint on how to get rid of the metro openssl issue if just cloning your repo as it is in main-branch. You have to switch to the "react-native-0-69" branch if you want to use node > 17 under MacOS.
Easy flow:
git clone https://github.com/BabylonJS/BabylonReactNativeSample.git webxr
cd webxr
git checkout react-native-0-69
npm install
npm run android
This hint saves newcomers like me a lot of time searching the web and trying not working solutions. Please update your readme accordingly.
Thank you!

this._xhr.getResponseHeader is not a function.

For questions, please use the forum.

Describe the bug
When I pull down the code of BabylonReactNativeSample and run it, the console reports an error, the error shows that this._xhr.getResponseHeader is not a function.

To Reproduce
Steps to reproduce the behavior:

  1. clone the BabylonReactNativeSample;
  2. yarn
  3. cd ios && pod install
  4. yarn start
  5. yarn ios --simulator "iPhone 14 Pro"

Expected behavior
I want the example to work.

Screenshots
image

Other

  • Platform: [iOS]
  • Nodejs: [16.17.1]
  • Npm: [8.15.0]

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.