{"id":13600130,"url":"https://github.com/BabylonJS/BabylonReactNative","last_synced_at":"2025-04-10T21:31:13.012Z","repository":{"id":37996894,"uuid":"252029824","full_name":"BabylonJS/BabylonReactNative","owner":"BabylonJS","description":"Build React Native applications with the power of Babylon Native","archived":false,"fork":false,"pushed_at":"2024-12-03T20:00:57.000Z","size":20950,"stargazers_count":394,"open_issues_count":98,"forks_count":63,"subscribers_count":14,"default_branch":"master","last_synced_at":"2025-04-07T08:07:00.335Z","etag":null,"topics":["babylon","react-native"],"latest_commit_sha":null,"homepage":"","language":"C++","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/BabylonJS.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-04-01T00:20:13.000Z","updated_at":"2025-04-06T03:50:54.000Z","dependencies_parsed_at":"2023-10-03T02:43:51.277Z","dependency_job_id":"72cecadc-e8cd-4412-92ba-f3c1a6e151d9","html_url":"https://github.com/BabylonJS/BabylonReactNative","commit_stats":{"total_commits":307,"total_committers":28,"mean_commits":"10.964285714285714","dds":0.6742671009771988,"last_synced_commit":"d7291857ca2f53cebdba767fef1dc5f6fad7403b"},"previous_names":[],"tags_count":128,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BabylonJS%2FBabylonReactNative","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BabylonJS%2FBabylonReactNative/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BabylonJS%2FBabylonReactNative/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BabylonJS%2FBabylonReactNative/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BabylonJS","download_url":"https://codeload.github.com/BabylonJS/BabylonReactNative/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247615375,"owners_count":20967184,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["babylon","react-native"],"created_at":"2024-08-01T18:00:28.241Z","updated_at":"2025-04-10T21:31:12.981Z","avatar_url":"https://github.com/BabylonJS.png","language":"C++","readme":"[![](https://github.com/BabylonJS/BabylonReactNative/workflows/Publish%20Package/badge.svg)](https://github.com/BabylonJS/BabylonReactNative/actions?query=workflow%3A%22Publish+Package%22)\n[![npm version](https://badge.fury.io/js/%40babylonjs%2Freact-native.svg)](https://badge.fury.io/js/%40babylonjs%2Freact-native)\n\n# Babylon React Native\n\nBabylon React Native brings the power and flexibility of [Babylon.js](https://github.com/BabylonJS/Babylon.js) into a [React Native](https://github.com/facebook/react-native) environment via [Babylon Native](https://github.com/BabylonJS/BabylonNative).\n\n## Current Status\n\n### Limitations\n\n1. Android and iOS only - support for Windows is experimental.\n1. Touch input only - mouse, keyboard, and controllers are not yet supported.\n1. Single view only - multiple views are not yet supported (only a single view can be displayed).\n\n### What is Supported from Babylon.js\n\nSee [this](https://github.com/BabylonJS/BabylonNative#what-is-supported-from-babylonjs) from the Babylon Native repo.\n\n### Performance\n\nReact Native applications targeting [JavaScriptCore on iOS](https://reactnative.dev/docs/javascript-environment#javascript-runtime) or [Hermes](https://reactnative.dev/docs/hermes) will not have JIT enabled. This may cause performance issues for JavaScript heavy scenarios.\n\n### Other\n\nBabylon React Native relies heavily on newer React Native constructs including JSI to get the performance characteristics required for real time rendering. JSI allows for direct synchronous communication between native code and JavaScript code, but is incompatible with \"remote debugging.\" If you need to debug your JavaScript code that uses Babylon React Native, you should enable Hermes and use \"direct debugging\" (e.g. chrome://inspect or edge://inspect). See the [React Native documentation](https://reactnative.dev/docs/hermes) for more info.\n\n## Usage\n\nSee the [package usage](Modules/@babylonjs/react-native/README.md) for installation instructions and/or the Playground app's [App.tsx](Apps/Playground/App.tsx) for example usage. You can also clone [this sample repo](https://github.com/BabylonJS/BabylonReactNativeSample) to quickly get started.\n\n## Frameworks (Expo, ...)\n\nNote: Official support for React Native frameworks, like Expo, is not provided by BabylonReactNative. While BabylonReactNative may work with these frameworks, we do not conduct testing, bug fixes, or feature development to ensure compatibility.\n\n## Contributing\n\nThis quick overview will help you get started developing in the Babylon React Native repository. We support development on Windows and MacOS, but assume the use of [PowerShell](https://docs.microsoft.com/en-us/powershell/scripting/install/installing-powershell) in the instructions below (unless otherwise noted).\n\nIf you are interested in making contributions, be sure to also review [CONTRIBUTING.md](CONTRIBUTING.md).\n\n### **Preparing a new Repo**\n\n**Required Tools:** [git](https://git-scm.com/), [Node.js (16.13.0+)](https://nodejs.org/en/download/)\n\nStep 1 for all development environments and targets is to clone the repo. Use a git-enabled terminal to follow the steps below.\n\n```\ngit clone https://github.com/BabylonJS/BabylonReactNative\n```\n\nThen, a React Native target must be chosen. For a React-Native 0.64 build:\n\n```\ncd Apps/Playground\nnpm ci\nnpm run select 0.64\n```\nSelecting the React Native install will also install all NPM packages and its dependencies for the Playground sample/test app.\n\n\u003e :warning: When setting up the Playground app for UWP, the `npm run select` command must be run with Administrator rights, because of the symbolic links. Not doing so will result in this build error will popup when trying to run the Playground:\n```\n The path cannot be traversed because it contains an untrusted mount point.\n ```\n\nThis will also automatically do the following to prepare your repo for development:\n\n- Update git submodules to fetch Babylon Native and its dependencies\n- [MacOS only] Run CMake to generate the iOS XCode project for Babylon React Native\n- [MacOS only] Run `pod install` to install cocoa pod depdendencies\n\nAfter merging upstream changes in the future, you will need to either run `npm install` again, or run individual commands for the above operations (e.g. `git submodule update --init --submodule` / `npm run iosCMake` / `pod install`).\n\n### **Configuring a Mac Dev Environment**\n\n**Required Tools:** [Android Studio](https://developer.android.com/studio/) (including NDK 21.4.7075529), [CMake](https://cmake.org/), [Ninja](https://ninja-build.org/), [JDK 13](https://www.oracle.com/java/technologies/javase-jdk13-downloads.html)\n\n- The `PATH` environment variable must include the path to adb (typically ~/Library/Android/sdk/platform-tools/).\n- The `PATH` environment variable must include the path to Ninja, or Ninja must be [installed via a package manager](https://github.com/ninja-build/ninja/wiki/Pre-built-Ninja-packages).\n- The `ANDROID_HOME` environment variable must be defined (typically ~/Library/Android/sdk).\n- The `ANDROID_SDK_ROOT` environment variable must be defined (typically ~/Library/Android/sdk).\n- The `ANDROID_AVD_HOME` environment variable must be defined if you plan to use Android emulators (typically ~/.android/avd).\n- The `JAVA_HOME` environment variable must be defined to point to the correct version of the JDK (typically /usr/libexec/java_home -v 13).\n\nYou can typically configure your environment by editing `~/.zshrc` and adding the following:\n\n```\nexport PATH=$PATH:~/Library/Android/sdk/platform-tools/\nexport PATH=$PATH:~/path_to_ninja_binary/ # Only for manual installations of Ninja (not package manager-based installations).\nexport ANDROID_HOME=~/Library/Android/sdk\nexport ANDROID_SDK_ROOT=~/Library/Android/sdk\nexport ANDROID_AVD_HOME=~/.android/avd\nexport JAVA_HOME=$(/usr/libexec/java_home -v 13)\n```\n\n### **Configuring a Windows Dev Environment**\n\n**Required Tools:** [Android Studio](https://developer.android.com/studio/) (including NDK 21.4.7075529), [CMake](https://cmake.org/), [Ninja](https://ninja-build.org/), [Visual Studio 2022](https://visualstudio.microsoft.com/vs/)\n\n- The `PATH` environment variable must include the path to adb (typically %LOCALAPPDATA%/Android/sdk/platform-tools/).\n- The `PATH` environment variable must include the path to Ninja, or Ninja must be [installed via a package manager](https://github.com/ninja-build/ninja/wiki/Pre-built-Ninja-packages).  \n- The `ANDROID_HOME` environment variable must be defined (typically %LOCALAPPDATA%/Android/sdk).\n- The `JAVA_HOME` environment variable must be defined (typically %ProgramFiles%/Android/Android Studio/jre).\n\n### **Configuring a Linux Dev Environment**\n\n**Required Tools:** [Android Studio](https://developer.android.com/studio/) (including NDK 21.4.7075529)\n\nWith Ubuntu, you can install needed packages by this command:\n\n```\nsudo apt-get install adb ninja-build openjdk-14-jdk android-sdk\n```\n\nUpdate PATH with this commands:\n\n```\nexport ANDROID_HOME=$HOME/Android/Sdk\nexport PATH=$PATH:$ANDROID_HOME/emulator\nexport PATH=$PATH:$ANDROID_HOME/tools\nexport PATH=$PATH:$ANDROID_HOME/tools/bin\nexport PATH=$PATH:$ANDROID_HOME/platform-tools\n```\n\n### **Troubleshooting**\n- If the Metro server is not started with `npm run android` , you can start it manually by running `npm run start` in a terminal.\n- Android Studio is the tool of choice for downloading the various versions of NDK.\n- If something goes wrong with the build `npm run android --verbose` can give some hints.\n- If the emulator is not launched by the build, you can run `~/Android/Sdk/emulator/emulator @name_of_your_image`.\n- If `ld: library not found for -lBabylonNative` appears when building for iOS, this is because of CMake 3.26+. use 3.24 or remove `CONFIGURATION_BUILD_DIR`entries for every `.pbxproj` file.\n- For other emulator issues, follow the [instructions](https://github.com/BabylonJS/BabylonNative/blob/master/Documentation/AndroidEmulator.md) from Babylon Native documentation.\n- Refer to the [Babylon Native documentation](https://github.com/BabylonJS/BabylonNative/tree/master/Documentation#babylon-native-documention) for additional information that may help troubleshoot issues.\n\n### **Building and Running the Playground App**\n\nOn either Mac or Windows, NPM is used to build and run the Playground sample/test app from the command line. Open a command prompt at the root of the BabylonReactNative repo if you don't have one already open.\n\n#### Android\n\n```\ncd Apps/Playground/Playground\nnpm run android\n```\n\nAfter having run the above commands, you can also open `Apps/Playground/android` in Android Studio and run the app from there.\n\n#### iOS\n\niOS can only be built on a Mac.\n\n```\ncd Apps/Playground/Playground\nnpm run ios\n```\n\nAfter having run the above commands, you can also open `Apps/Playground/ios/Playground.xcworkspace` in XCode and run the app from there.\n\n#### Universal Windows Platform (UWP)\n\nUWP can only be built on a PC. `CMake` must be manually run to generate project definitions for BabylonNative dependencies.\n\n1. Run `npm ci` in Apps\\Playground\\Playground.\n1. Run `npm ci` in Package.\n1. Run `npx gulp buildUWP` in Package. This command will run cmake and build BabylonNative dependencies. It may take a while to complete.\n1. In Apps\\Playground\\Playground, run `npm run windows`.\n\u003e Note: if you experience build issues for Apps\\Playground related to autolinking, try running `npx react-native autolink-windows` in the Apps\\Playground\\Playground folder. You can also run `npm run windows-verbose` to view logging.\n\n### **Testing in the Playground App** ###\n\nWhen making local changes, the following manual test steps should be performed within the Playground app to prevent regressions. These should be checked on Android and iOS, and ideally in both debug and release, but minimally in release.\n\n1. **Basic rendering** - launch the Playground app and make sure the model loaded and is rendering at 60fps.\n1. **Animation** - make sure the loaded model is animating.\n1. **Input handling** - swipe across the display and make sure the model rotates around the y-axis.\n1. **Display rotation** - rotate the device 90 degrees and make sure the view rotates and renders correctly.\n1. **View replacement** - tap the *Toggle EngineView* button twice to replace the render target view.\n1. **Engine dispose** - tap the *Toggle EngineScreen* button twice to dispose and re-instantiate the Babylon engine.\n1. **Suspend/resume** - switch to a different app and then back to the Playground and make sure it is still rendering correctly.\n1. **Fast refresh** (debug only) - save the App.tsx file to trigger a fast refresh.\n1. **Dev mode reload** (debug only) - in the Metro server console window, press the `R` key on the keyboard to reload the JS engine and make sure rendering restarts successfully.\n1. **XR mode** - tap the *Start XR* button and make sure XR mode is working.\n1. **XR display rotation** - rotate the device 90 degrees and make sure the view rotates and renders correctly.\n1. **XR view replacement** - tap the *Toggle EngineView* button twice to replace the render target view.\n1. **XR suspend/resume** - switch to a different app and then back to the Playground and make sure it is still rendering correctly.\n\n### **Building the NPM Package**\n\nIf you want to test using a local build of the NPM package with your own React Native app, you can do so with a `gulp` command on a Mac (this requires a Mac as it builds binaries for both iOS and Android).\n\n```\ncd Package\nnpm install\ngulp pack\n```\n\nThe NPM package will be built into the `Package` directory where the `gulp` command was run. Once the local NPM package has been built, it can be installed into a project using `npm`.\n\n```\ncd \u003cdirectory of your React Native app\u003e\nnpm install \u003croot directory of your BabylonReactNative clone\u003e/Package/Assembled/babylonjs-react-native-0.0.1.tgz\n```\n\nIf you wish to test the locally-built NPM packages with the apps in the `PackageTest` directory, before running `npm install` be sure to run:\n\n```\ncd Apps\\PackageTest\\\u003cpackage test app version\u003e\n\nnpm uninstall @babylon/react-native\n\n# If you're also updating the react-native-windows package:\nnpm uninstall @bablyon/react-native-windows\n```\n\nThis will allow the local package dependencies to update without the package-lock.json file worrying about new content without a new version number. You can then run the above command to install the locally-built NPM modules located in `Package/Assembled`.\n\n### **Debugging in Context**\n\nIf you want to consume `@babylonjs/react-native` as source in your React Native app (for debugging or for iterating on the code when making a contribution), you can install the package source directory as an npm package.\n\n```\ncd \u003cdirectory of your React Native app\u003e\nnpm install \u003croot directory of your BabylonReactNative clone\u003e/Modules/@babylonjs/react-native\ncd ios\npod install\n```\n\nThis will create a symbolic link in your `node_modules` directory to the `@babylonjs/react-native` source directory. However, this also requires a custom `metro.config.js` as the Metro bundler does not support symbolic links by default. See the [GitHub issue](https://github.com/react-native-community/cli/issues/1238#issue-673055870) on this for a solution.\n\nFor iOS the XCode project needs to be generated with `CMake` as described [above](#ios) and added to your `xcworkspace`.\n\n## Supported Versions\n\n| React Native | Babylon React Native |\n|---|---|\n| 0.64 | 1.4.0, 1.4.1, 1.4.2, 1.4.3, 1.4.4, 1.5.0, 1.5.1, 1.6.0, 1.6.1, 1.6.3, 1.8.1, 1.8.2, 1.8.5 |\n| 0.65 -\u003e 0.68 | 1.4.0, 1.4.1, 1.4.2, 1.4.3, 1.4.4, 1.5.0, 1.5.1, 1.6.0, 1.6.1, 1.6.3, 1.8.1, 1.8.2, 1.8.5 |\n| 0.69 | 1.4.0, 1.4.1, 1.4.2, 1.4.3, 1.4.4, 1.5.0, 1.5.1, 1.6.0, 1.6.1, 1.6.3, 1.8.1, 1.8.2, 1.8.5 |\n| 0.70 | 1.5.0, 1.5.1, 1.6.0, 1.6.1, 1.6.3, 1.8.1, 1.8.2, 1.8.5 |\n| 0.71 -\u003e 0.73 | 1.6.0, 1.6.1, 1.6.3, 1.8.1, 1.8.2, 1.8.5 |\n\nHere are the package names for Android/iOS and Windows:\n\n| React Native | Android/iOS Package | Windows Package |\n|---|---|---|\n| 0.64 | [@babylonjs/react-native-iosandroid-0-64](https://www.npmjs.com/package/@babylonjs/react-native-iosandroid-0-64) | [@babylonjs/react-native-windows-0-64](https://www.npmjs.com/package/@babylonjs/react-native-windows-0-64) |\n| 0.65 -\u003e 0.68 | [@babylonjs/react-native-iosandroid-0-65](https://www.npmjs.com/package/@babylonjs/react-native-iosandroid-0-65) | [@babylonjs/react-native-windows-0-65](https://www.npmjs.com/package/@babylonjs/react-native-windows-0-65) |\n| 0.69 | [@babylonjs/react-native-iosandroid-0-69](https://www.npmjs.com/package/@babylonjs/react-native-iosandroid-0-69) | [@babylonjs/react-native-windows-0-69](https://www.npmjs.com/package/@babylonjs/react-native-windows-0-69) |\n| 0.70 | [@babylonjs/react-native-iosandroid-0-70](https://www.npmjs.com/package/@babylonjs/react-native-iosandroid-0-70) | [@babylonjs/react-native-windows-0-70](https://www.npmjs.com/package/@babylonjs/react-native-windows-0-70) |\n| 0.71 -\u003e 0.73 | [@babylonjs/react-native-iosandroid-0-71](https://www.npmjs.com/package/@babylonjs/react-native-iosandroid-0-71) | [@babylonjs/react-native-windows-0-71](https://www.npmjs.com/package/@babylonjs/react-native-windows-0-71) |\n\nAlso, [@babylonjs/react-native](https://www.npmjs.com/package/@babylonjs/react-native) is a needed dependency for all platforms.\n\n## Supported Babylon.js Versions\n\nDepending on the Babylon React Native NPM package version, some Babylon.js NPM dependency versions may or may not be compatible. Here is a compatibility list that has been tested:\n\n| Babylon React Native | Babylon.js ([@babylonjs/core](https://www.npmjs.com/package/@babylonjs/core), [@babylonjs/loaders](https://www.npmjs.com/package/@babylonjs/loaders), ...) |\n|---|---|\n| 1.4.0 | 5.27.1 |\n| 1.4.1 | 5.32.2, 5.33.0, 5.33.1, 5.33.2, 5.34.0, 5.35.0 |\n| 1.4.2 | 5.35.1, 5.36.0, 5.37.0, 5.38.0, 5.39.0, 5.42.0, 5.42.1 |\n| 1.4.3 | 5.42.2, 5.43.0, 5.43.1, 5.43.2, 5.44.0, 5.45.0, 5.45.1, 5.45.2, 5.46.0, 5.47.0, 5.47.1, 5.48.0, 5.48.1, 5.49.0, 5.49.1, 5.49.2, 5.50.0, 5.50.1, 5.51.0, 5.52.0, 5.53.0, 5.54.0, 5.55.0, 5.56.0, 5.57.0, 5.57.1, 6.0.0, 6.1.0, 6.2.0, 6.3.1, 6.4.0, 6.4.1 |\n| 1.4.4 | 5.42.2, 5.43.0, 5.43.1, 5.43.2, 5.44.0, 5.45.0, 5.45.1, 5.45.2, 5.46.0, 5.47.0, 5.47.1, 5.48.0, 5.48.1, 5.49.0, 5.49.1, 5.49.2, 5.50.0, 5.50.1, 5.51.0, 5.52.0, 5.53.0, 5.54.0, 5.55.0, 5.56.0, 5.57.0, 5.57.1, 6.0.0, 6.1.0, 6.2.0, 6.3.0, 6.3.1, 6.4.0, 6.4.1 |\n| 1.5.0 | 5.42.2, 5.43.0, 5.43.1, 5.43.2, 5.44.0, 5.45.0, 5.45.1, 5.45.2, 5.46.0, 5.47.0, 5.47.1, 5.48.0, 5.48.1, 5.49.0, 5.49.1, 5.49.2, 5.50.0, 5.50.1, 5.51.0, 5.52.0, 5.53.0, 5.54.0, 5.55.0, 5.56.0, 5.57.0, 5.57.1, 6.0.0, 6.1.0, 6.2.0, 6.3.0, 6.3.1, 6.4.0, 6.4.1 |\n| 1.5.1 | 5.42.2, 5.43.0, 5.43.1, 5.43.2, 5.44.0, 5.45.0, 5.45.1, 5.45.2, 5.46.0, 5.47.0, 5.47.1, 5.48.0, 5.48.1, 5.49.0, 5.49.1, 5.49.2, 5.50.0, 5.50.1, 5.51.0, 5.52.0, 5.53.0, 5.54.0, 5.55.0, 5.56.0, 5.57.0, 5.57.1, 6.0.0, 6.1.0, 6.2.0, 6.3.0, 6.3.1, 6.4.0, 6.4.1 |\n| 1.6.0 | 5.42.2, 5.43.0, 5.43.1, 5.43.2, 5.44.0, 5.45.0, 5.45.1, 5.45.2, 5.46.0, 5.47.0, 5.48.0, 5.48.1, 5.49.1 |\n| 1.6.1 | 5.42.2, 5.43.0, 5.43.1, 5.43.2, 5.44.0, 5.45.0, 5.45.1, 5.45.2, 5.46.0, 5.47.0, 5.48.0, 5.48.1, 5.49.1 |\n| 1.6.3 | 5.53.1, 5.54.0, 5.55.0, 5.56.0, 5.57.0, 5.57.1, 6.0.0, 6.1.0, 6.2.0, 6.3.0, 6.3.1, 6.4.0, 6.4.1, 6.5.0, 6.5.1, 6.6.0, 6.6.1, 6.7.0, 6.8.1, 6.9.0, 6.11.2, 6.12.0, 6.12.1,6.12.2, 6.12.3, 6.14.0 |\n| 1.8.1,1.8.2, 1.8.5 | 5.53.1, 5.54.0, 5.55.0, 5.56.0, 5.57.0, 5.57.1, 6.0.0, 6.1.0, 6.2.0, 6.3.0, 6.3.1, 6.4.0, 6.4.1, 6.5.0, 6.5.1, 6.6.0, 6.6.1, 6.7.0, 6.8.1, 6.9.0, 6.11.2, 6.12.0, 6.12.1,6.12.2, 6.12.3, 6.14.0 |\n\n## Security\n\nIf you believe you have found a security vulnerability in this repository, please see [SECURITY.md](SECURITY.md).\n","funding_links":[],"categories":["C++"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FBabylonJS%2FBabylonReactNative","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FBabylonJS%2FBabylonReactNative","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FBabylonJS%2FBabylonReactNative/lists"}