feat: make react-native-rapier work with rapier3d layer

example/package.json

@@ -12,7 +12,8 @@
   },
   "dependencies": {
     "react": "18.3.1",
-    "react-native": "0.75.4"
+    "react-native": "0.75.4",
+    "text-encoding-polyfill": "^0.6.7"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",

example/src/App.tsx

@@ -1,25 +1,60 @@
-import { useState, useEffect, useCallback } from 'react';
+import { useEffect, useCallback } from 'react';
 import { StyleSheet, View, Text, Button } from 'react-native';
-import Rapier from '@callstack/react-native-rapier';
+import 'text-encoding-polyfill'; // Required for `rapier3d-compat`
+import RAPIER, {
+  World,
+  ColliderDesc,
+  RigidBodyDesc,
+} from '@dimforge/rapier3d-compat';
 
 export default function App() {
-  const [module, setModule] = useState<any | undefined>();
-
   useEffect(() => {
-    setModule(Rapier.create({ wbg: {} }));
+    async function loadModule() {
+      RAPIER.init();
+    }
+    loadModule();
   }, []);
 
-  const callFn = useCallback(() => {
-    console.log(module, module.exports);
-    let res = module.exports.rawimpulsejointset_new();
-    console.log('res: ', res);
-  }, [module]);
+  const worldSimulation = useCallback(() => {
+    const gravity = { x: 0.0, y: -9.81, z: 0.0 };
+    const world = new World(gravity);
+
+    // Create a ground plane
+    const groundColliderDesc = ColliderDesc.cuboid(10.0, 0.1, 10.0);
+    world.createCollider(groundColliderDesc);
+
+    // Create a dynamic rigid-body with a cube collider
+    const rigidBodyDesc = RigidBodyDesc.dynamic().setTranslation(0.0, 5.0, 0.0);
+    const rigidBody = world.createRigidBody(rigidBodyDesc);
+
+    const colliderDesc = ColliderDesc.cuboid(0.5, 0.5, 0.5);
+    world.createCollider(colliderDesc, rigidBody);
+
+    // Simulation loop
+    const timeStep = 1 / 60;
+    function simulate() {
+      world.step();
+
+      // Get the position of the cube
+      const position = rigidBody.translation();
+      console.log(
+        `Cube position: x=${position.x.toFixed(2)}, y=${position.y.toFixed(2)}, z=${position.z.toFixed(2)}`
+      );
+
+      // Continue simulation if cube is above ground
+      if (position.y > 0.5) {
+        setTimeout(() => simulate(), timeStep * 1000);
+      }
+    }
+
+    // Start the simulation
+    simulate();
+  }, []);
 
   return (
     <View style={styles.container}>
       <Text>Module loaded: {!!module}</Text>
-      {!!module && <Text>{JSON.stringify(module)}</Text>}
-      {!!module && <Button title="Call" onPress={callFn} />}
+      <Button title="Run simulation" onPress={worldSimulation} />
     </View>
   );
 }

package.json

@@ -196,5 +196,8 @@
     "type": "module-mixed",
     "languages": "cpp",
     "version": "0.41.2"
+  },
+  "dependencies": {
+    "@dimforge/rapier3d-compat": "0.11.2"
   }
 }

patches/@dimforge+rapier3d-compat+0.11.2.patch

@@ -0,0 +1,72 @@
+diff --git a/node_modules/@dimforge/rapier3d-compat/rapier_wasm3d.js b/node_modules/@dimforge/rapier3d-compat/rapier_wasm3d.js
+index fe98b77..3459f7a 100644
+--- a/node_modules/@dimforge/rapier3d-compat/rapier_wasm3d.js
++++ b/node_modules/@dimforge/rapier3d-compat/rapier_wasm3d.js
+@@ -1,3 +1,4 @@
++import Rapier from '@callstack/react-native-rapier'
+
+ let wasm;
+
+@@ -5081,48 +5082,26 @@ function initMemory(imports, maybe_memory) {
+
+ }
+
+-function finalizeInit(instance, module) {
+-    wasm = instance.exports;
+-    init.__wbindgen_wasm_module = module;
+-    cachedFloat32Memory0 = new Float32Array();
+-    cachedFloat64Memory0 = new Float64Array();
+-    cachedInt32Memory0 = new Int32Array();
+-    cachedUint32Memory0 = new Uint32Array();
+-    cachedUint8Memory0 = new Uint8Array();
++function __wbg_finalize_init(instance, module) {
++  wasm = module.exports;
++  __wbg_init.__wbindgen_wasm_module = module;
++  cachedFloat32Memory0 = null;
++  cachedFloat64Memory0 = null;
++  cachedInt32Memory0 = null;
++  cachedUint32Memory0 = null;
++  cachedUint8Memory0 = null;
+
+-
+-    return wasm;
++  return wasm;
+ }
+
+ function initSync(module) {
+-    const imports = getImports();
+-
+-    initMemory(imports);
+-
+-    if (!(module instanceof WebAssembly.Module)) {
+-        module = new WebAssembly.Module(module);
+-    }
+-
+-    const instance = new WebAssembly.Instance(module, imports);
+-
+-    return finalizeInit(instance, module);
++  const mod = Rapier.create({ wbg: {} });
++  return __wbg_finalize_init({}, mod);
+ }
+
+-async function init(input) {
+-    if (typeof input === 'undefined') {
+-        input = new URL('rapier_wasm3d_bg.wasm', "<deleted>");
+-    }
+-    const imports = getImports();
+-
+-    if (typeof input === 'string' || (typeof Request === 'function' && input instanceof Request) || (typeof URL === 'function' && input instanceof URL)) {
+-        input = fetch(input);
+-    }
+-
+-    initMemory(imports);
+-
+-    const { instance, module } = await load(await input, imports);
+-
+-    return finalizeInit(instance, module);
++async function __wbg_init(input) {
++  const mod = Rapier.create({ wbg: {} });
++  return __wbg_finalize_init({}, mod);
+ }
+
+ export { initSync }

yarn.lock

@@ -1637,6 +1637,7 @@ __metadata:
     react-native: 0.75.4
     react-native-builder-bob: ^0.30.2
     react-native-test-app: ^3.10.14
+    text-encoding-polyfill: ^0.6.7
   languageName: unknown
   linkType: soft
 
@@ -1645,6 +1646,7 @@ __metadata:
   resolution: "@callstack/react-native-rapier@workspace:."
   dependencies:
     "@commitlint/config-conventional": ^17.0.2
+    "@dimforge/rapier3d-compat": 0.11.2
     "@evilmartians/lefthook": ^1.5.0
     "@react-native/eslint-config": ^0.73.1
     "@release-it/conventional-changelog": ^5.0.0
@@ -1875,6 +1877,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@dimforge/rapier3d-compat@npm:0.11.2":
+  version: 0.11.2
+  resolution: "@dimforge/rapier3d-compat@npm:0.11.2"
+  checksum: f0fbf99feaef4ea3b5cb3d81892c1caf14bd35c89c90ce31462f3707f068f5677d5a2c845efdefa2951a90b276a6ba63a9453f139badda66c4b322b661bf6b81
+  languageName: node
+  linkType: hard
+
 "@eslint-community/eslint-utils@npm:^4.2.0":
   version: 4.4.0
   resolution: "@eslint-community/eslint-utils@npm:4.4.0"
@@ -12334,6 +12343,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"text-encoding-polyfill@npm:^0.6.7":
+  version: 0.6.7
+  resolution: "text-encoding-polyfill@npm:0.6.7"
+  checksum: 8e5b45154f3394cd29af01760ec2f728caba7cfc57fbcab60c073dc9c6db479d923efda3e074ae467379c4a0710c45e6427c6917a70da3059876924c190e03ed
+  languageName: node
+  linkType: hard
+
 "text-extensions@npm:^1.0.0":
   version: 1.9.0
   resolution: "text-extensions@npm:1.9.0"