New NPM #665

CedricGuillemet · 2025-06-06T14:58:19Z

WIP

Goal

Deliver 1 single self contained package with sources (no fetch, no secondary download) for all platform, for all RN versions.
Deprecated existing (Playground, tests, build script) in favor of a single RNTA Playground and simpler tooling.

Building the new NPM

Gather all sources (BabylonNative and dependencies) needed by Android/iOS/Windows builds
Remove unncessary dependencies (bgfx examples) and generate glue CMake files
Bundle previous iosAndroid and Windows Packages into a single NPM along gathered sources

Testing

Build RNTA for iOS, Android and Windows
Publish an artifact so it can be tested locally

PR Changes

Removed old system
Renamed BRNPlayground -> Playground
Moved react-native-iosandroid and react-native-windows content into Modules/@babylonjs/react-native folder
Added buildBabylonNativeSourceTree gulp export to gather BN sources
Update Android Gradle to use fetched content and build BabylonNative instead of using static libraries

TODO

ld.lld: error: undefined symbol: facebook::react::CallInvokerHolder::getCallInvoker()
  >>> referenced by BabylonNativeInterop.cpp:39 (/Users/cedricguillemet/dev/BRNAnd/Apps/Playground/node_modules/@babylonjs/react-native/android/src/main/cpp/BabylonNativeInterop.cpp:39)
  >>>               CMakeFiles/BabylonNative.dir/src/main/cpp/BabylonNativeInterop.cpp.o:(Java_com_babylonreactnative_BabylonNativeInterop_00024BabylonNative_initialize)

issue with RN 0.78. fixed with RN 0.80. not tested with previous versions. To fix (if it happens) on user side.

Notes:

Android debug build asserts in spirv shader compilation. It works fine in release.
Android XR not tested because of missing ARCore dependency. I guess it should be part of the app and not the package. To confirm!
ios XR working correctly

Pros/Cons of sources in package

Pros

smaller disk footprint. no need to clear up space : https://github.com/BabylonJS/BabylonReactNative/tree/master/.github/workflows/macos_freespace
1 single NPM package for all platforms and RN versions instead of 21
smaller NPMs (Windows is 700Mb per RN version)
put breakpoints anywhere
simpler builds (Android is handled by CMake, no need for Windows build scripts)
support for ABI breaking changes
unity build not needed anymore (windows binary size issue not relevant)
gulp script is reduced in scope
more precise control on components used (no more BASE_KIT package)
same podspec for dev and NPM
faster PR build/publish: ~15min Vs 1h
asserts firing!

Cons

need to build BN source with same toolchain flags as BRN (but same for prebuilt static libraries)
slower build for users (?). need testing for that
Xcode builds need CMake

Sizes

Binary packages

TS : 23Kb
Windows: 102Mb (700Mb Unzipped)
iOS-Android: 21Mb (65Mb Unzipped)

Source package

13Mb (74Mb Unzipped)

…actNative-1 into HEAD

CedricGuillemet · 2025-07-16T13:47:00Z

@ryantrem Now using cmake-runtime. Its use will appear in the log : Using CMake version 3.31.0 from /Users/runner/work/BabylonReactNative/BabylonReactNative/Modules/@babylonjs/react-native/node_modules/cmake-runtime/bin/cmake

ryantrem · 2025-07-16T16:23:18Z

Modules/@babylonjs/react-native/package.json

+    "dependencies": {
+        "base-64": "^0.1.0",
+        "semver": "^7.3.2",
+        "cmake-runtime": "3.31.0"


This should be in devDependencies, right?

Modules/@babylonjs/react-native/postinstall.js

.github/workflows/android.yml

.github/workflows/typescript.yml

ryantrem · 2025-07-16T18:38:48Z

Apps/Playground/metro.config.js

+    extraNodeModules: {
+      '@babylonjs/core': path.resolve(__dirname, './node_modules/@babylonjs/core'),
+      '@babylonjs/loaders': path.resolve(__dirname, './node_modules/@babylonjs/loaders'),
+      '@babylonjs/react-native': path.resolve(__dirname, './node_modules/@babylonjs/tract-native'),
+      'base-64': path.resolve(__dirname, './node_modules/base-64'),
+      'semver': path.resolve(__dirname, './node_modules/semver'),
+      'react-native-permissions':  path.resolve(__dirname, './node_modules/react-native-permissions')
+    },


What's all this?

ryantrem · 2025-07-16T18:39:09Z

Apps/Playground/metro.config.js

I guess we don't need all the sym linking stuff anymore because metro now supports that natively?

When testing the app I had unresolved imports that were solved by these symlinks. Not sure why it happens or if it's the best solution.

ryantrem · 2025-07-16T18:39:51Z

Apps/Playground/package-windows.json

Is this a windows specific package.json? Not sure how this works.

yes, Windows specific package.json. I could not find a configuration that worked for iOS/Android and Windows. I tried this script (with a few modifications) https://github.com/microsoft/react-native-test-app/blob/trunk/scripts/internal/set-react-version.mts but I could not find a good configuration either. At the end, a simple file copy solved the issue for the test app.

ryantrem · 2025-07-16T18:44:07Z

Modules/@babylonjs/react-native/shared/BabylonNative.cpp

@@ -50,9 +52,11 @@ namespace BabylonNative
            Babylon::JsRuntime::CreateForJavaScript(m_env, Babylon::CreateJsRuntimeDispatcher(m_env, jsiRuntime, m_jsDispatcher, m_isRunning));

            // Initialize Babylon Native plugins
-#ifndef BASEKIT_BUILD
+#if BABYLON_NATIVE_PLUGIN_NATIVEXR


If people want these features, does it mean they have to add these defines to their project and then re-run the cmake command that is normally run at npm install time? Should these be opt-out instead of opt-in, such that by default BRN includes all BN features?

Plugins are opt-out using env var. For Windows/Android, no need to re-run npm install. Setting the env var and running msbuild/gradlew is enough. for iOS, pod install needs to be run again.

Modules/@babylonjs/react-native/README.md

ryantrem · 2025-07-16T19:04:22Z

Apps/Playground/package.json

+  "dependencies": {
+    "@babylonjs/core": "8.14.1",
+    "@babylonjs/loaders": "8.14.1",
+    "@babylonjs/react-native": "file:../../Modules/@babylonjs/react-native",


Since the PackageTest directory and app are gone, can we test published packages (or locally built packages) by just installing that package into this project (temporarily overwriting the local source pakcage)?

Yes, I can add a step after package build to test produced packed .tgz

setup_dev.js

related to BabylonJS/BabylonReactNative#665 Some dependencies are fetched only for the platform being built. `BABYLON_NATIVE_BUILD_SOURCETREE` variable has been added to allow fetching independently of active platform. --------- Co-authored-by: Drew Fillebrown <[email protected]>

This was referenced Jun 10, 2025

Fix BRN build sourcetree BabylonJS/BabylonNative#1532

Merged

BRN Sourcetree BabylonJS/AndroidExtensions#13

Draft

CedricGuillemet added 28 commits June 21, 2025 17:35

Update typescript.yml

f23165b

Update react-native-babylon.podspec

c62cece

Update react-native-babylon.podspec

21fa17a

xr was missing

7f21c4b

test removed extract gradle

2ed9134

update PG deps

38cee40

package lock

71a459f

Update Podfile.lock

c912268

gradle version, disable windows build

0b16205

fbjni headers

d271bab

vcxproj update

1d64b83

windows build

5d2efbe

RNW

d27ef39

RNW lib paths

fa1d2af

metro config

4ec3c07

webp is back

46efd8f

special json for windows

547a071

detailed msbuild log

fc3bccd

package lock windows

48c6cbb

fix BabylonReactNativeDir

688f417

libwebp

2c9111c

copy command

6aad007

show me your paths

6c577dc

more on paths

eff1b90

windows build, missing postinstall.js

c39a41b

webp and windows paths

c853f34

debug path

d52790f

Update BabylonReactNative.vcxproj

ed869c9

CedricGuillemet added 8 commits July 15, 2025 09:08

removed commented cmake script

b31d799

old doc

a87c9c5

setup_dev script

b936994

async copy jobs

e3dd1a1

more explicit typescript compilation

5c5d96e

series

1117669

async

8c4c50b

Merge branch 'NewNPM' of https://github.com/cedricguillemet/BabylonRe…

531f4e4

…actNative-1 into HEAD

CedricGuillemet mentioned this pull request Jul 15, 2025

React Native New Architecture #595

Open

cmake-runtime

b27b931

ryantrem reviewed Jul 16, 2025

View reviewed changes

Modules/@babylonjs/react-native/postinstall.js Outdated Show resolved Hide resolved

ryantrem reviewed Jul 16, 2025

View reviewed changes

Modules/@babylonjs/react-native/postinstall.js Outdated Show resolved Hide resolved

CedricGuillemet added 2 commits July 16, 2025 19:47

simplify cmake usage

e3741ee

run npx

b6af351

ryantrem self-requested a review July 16, 2025 18:59

ryantrem reviewed Jul 16, 2025

View reviewed changes

CedricGuillemet added 11 commits July 18, 2025 09:15

PR feedback and use latest BN

6ea7b72

minz

280e5e2

test produced packages

aa37f9e

artifact path

30624e2

debugging action

778fd03

no need to unzip

e081091

no need to unzip

796f632

npm install

556baae

more npm install

a37469c

apk location

90cf085

more explicit cmake command

e70834c

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

New NPM #665

New NPM #665

Uh oh!

CedricGuillemet commented Jun 6, 2025 •

edited

Loading

Uh oh!

CedricGuillemet commented Jul 16, 2025

Uh oh!

ryantrem Jul 16, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

ryantrem Jul 16, 2025

Uh oh!

ryantrem Jul 16, 2025

Uh oh!

CedricGuillemet Jul 17, 2025

Uh oh!

ryantrem Jul 16, 2025

Uh oh!

CedricGuillemet Jul 17, 2025

Uh oh!

ryantrem Jul 16, 2025

Uh oh!

CedricGuillemet Jul 17, 2025

Uh oh!

Uh oh!

Uh oh!

ryantrem Jul 16, 2025

Uh oh!

CedricGuillemet Jul 17, 2025

Uh oh!

Uh oh!

Uh oh!

New NPM #665

Are you sure you want to change the base?

New NPM #665

Uh oh!

Conversation

CedricGuillemet commented Jun 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Goal

Building the new NPM

Testing

PR Changes

TODO

Pros/Cons of sources in package

Pros

Cons

Sizes

Binary packages

Source package

Uh oh!

CedricGuillemet commented Jul 16, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

CedricGuillemet commented Jun 6, 2025 •

edited

Loading