i can see a frame before crashing due to RNW issues

Author: hannojg

bun.lock

@@ -3,6 +3,7 @@ import { StyleSheet, Pressable, Text, View, ScrollView } from 'react-native'
 import { NavigationContainer, useNavigation } from '@react-navigation/native'
 import { createNativeStackNavigator } from '@react-navigation/native-stack'
 import { GestureHandlerRootView } from 'react-native-gesture-handler'
+import {SafeAreaView} from 'react-native-safe-area-context'
 
 import { AnimationTransitions } from './AnimationTransitions'
 import { AnimationTransitionsRecording } from './AnimationTransitionsRecording'
@@ -50,6 +51,7 @@ function NavigationItem(props: { name: string; route: string }) {
 
 function HomeScreen() {
   return (
+    <SafeAreaView style={{ flex: 1 }}>
     <ScrollView style={{ flex: 1 }}>
       <NavigationItem name="▶️ Animation Transitions" route="AnimationTransitions" />
       <NavigationItem name="📸 Camera Pan" route="CameraPan" />
@@ -69,6 +71,7 @@ function HomeScreen() {
       <NavigationItem name="☁️ Skybox" route="SkyboxExample" />
       <NavigationItem name="🔄 MorphTargets" route="MorphTargets" />
     </ScrollView>
+    </SafeAreaView>
   )
 }
 
@@ -88,30 +91,30 @@ function App() {
       <NavigationContainer>
         <Stack.Navigator>
           <Stack.Screen name="Home" component={HomeScreen} />
-          <Stack.Screen
+          {/* <Stack.Screen
             name="AnimationTransitions"
             component={AnimationTransitions}
             options={{
               headerShown: false,
             }}
-          />
-          <Stack.Screen name="CameraPan" component={CameraPan} />
-          <Stack.Screen name="AnimationTransitionsRecording" component={AnimationTransitionsRecording} />
-          <Stack.Screen name="ImageExample" component={ImageExample} />
-          <Stack.Screen name="LoadFromFile" component={LoadFromFile} />
-          <Stack.Screen name="NoneTransparent" component={NoneTransparent} />
+          /> */}
+          {/* <Stack.Screen name="CameraPan" component={CameraPan} /> */}
+          {/* <Stack.Screen name="AnimationTransitionsRecording" component={AnimationTransitionsRecording} /> */}
+          {/* <Stack.Screen name="ImageExample" component={ImageExample} /> */}
+          {/* <Stack.Screen name="LoadFromFile" component={LoadFromFile} /> */}
+          {/* <Stack.Screen name="NoneTransparent" component={NoneTransparent} /> */}
           <Stack.Screen name="MultipleInstances" component={MultipleInstances} />
-          <Stack.Screen name="AnimatedRotate" component={AnimatedRotate} />
-          <Stack.Screen name="AnimatedRotateSharedValues" component={AnimatedRotateSharedValues} />
-          <Stack.Screen name="ReanimatedRotation" component={ReanimatedRotation} />
-          <Stack.Screen name="PhysicsCoin" component={PhysicsCoin} />
-          <Stack.Screen name="FadeOut" component={FadeOut} />
-          <Stack.Screen name="CastShadow" component={CastShadow} />
-          <Stack.Screen name="ScaleEffect" component={ScaleEffect} />
-          <Stack.Screen name="ChangeMaterials" component={ChangeMaterials} />
+          {/* <Stack.Screen name="AnimatedRotate" component={AnimatedRotate} /> */}
+          {/* <Stack.Screen name="AnimatedRotateSharedValues" component={AnimatedRotateSharedValues} /> */}
+          {/* <Stack.Screen name="ReanimatedRotation" component={ReanimatedRotation} /> */}
+          {/* <Stack.Screen name="PhysicsCoin" component={PhysicsCoin} /> */}
+          {/* <Stack.Screen name="FadeOut" component={FadeOut} /> */}
+          {/* <Stack.Screen name="CastShadow" component={CastShadow} /> */}
+          {/* <Stack.Screen name="ScaleEffect" component={ScaleEffect} /> */}
+          {/* <Stack.Screen name="ChangeMaterials" component={ChangeMaterials} /> */}
           <Stack.Screen name="Test" component={TestScreen} />
           <Stack.Screen name="SkyboxExample" component={SkyboxExample} />
-          <Stack.Screen name="MorphTargets" component={MorphTargets} />
+          {/* <Stack.Screen name="MorphTargets" component={MorphTargets} /> */}
         </Stack.Navigator>
       </NavigationContainer>
     </GestureHandlerRootView>

examples/Shared/src/App.tsx

@@ -38,6 +38,7 @@ add_library(
     ../cpp/RNFChoreographer.cpp
     ../cpp/RNFChoreographerWrapper.cpp
     ../cpp/RNFListener.cpp
+    ../cpp/jsi/RNFBoxedHybridObject.cpp
     ../cpp/jsi/RNFHybridObject.cpp
     ../cpp/jsi/RNFPromise.cpp
     ../cpp/jsi/RNFPromiseFactory.cpp

package/android/CMakeLists.txt

@@ -33,8 +33,10 @@ void FilamentProxy::loadHybridMethods() {
   registerHybridGetter("hasWorklets", &FilamentProxy::getHasWorklets, this);
 #if HAS_WORKLETS
   registerHybridMethod("createWorkletContext", &FilamentProxy::createWorkletContext, this);
+  // Newly added APIs:
   registerHybridMethod("createWorkletAsyncQueue", &FilamentProxy::createWorkletAsyncQueue, this);
   registerHybridMethod("installDispatcher", &FilamentProxy::installDispatcher, this);
+  registerHybridMethod("box", &FilamentProxy::box, this);
 #endif
 }
 
@@ -68,20 +70,26 @@ std::shared_ptr<RNWorklet::JsiWorkletContext> FilamentProxy::createWorkletContex
 std::shared_ptr<worklets::AsyncQueue> FilamentProxy::createWorkletAsyncQueue() {
     Logger::log(TAG, "Creating Worklet AsyncQueue...");
     auto renderThreadDispatcher = getRenderThreadDispatcher();
-    auto runOnWorklet = [=](std::function<void()>&& function) { renderThreadDispatcher->runAsync(std::move(function)); };
+//    auto runOnWorklet = [=](std::function<void()>&& function) { renderThreadDispatcher->runAsync(std::move(function)); };
     // TODO: i am pretty sure i should hold this dispatcher somewhere? or will the JS engine keep it alive as its NativeState?
     auto asyncQueue = std::make_shared<RNFAsyncQueueImpl>(renderThreadDispatcher);
 
     return asyncQueue;
 }
 
+
 jsi::Value FilamentProxy::installDispatcher(jsi::Runtime& runtime, const jsi::Value&, const jsi::Value*, size_t) {
     auto renderThreadDispatcher = getRenderThreadDispatcher(); // todo: return dispatcher, and pass it here is cleaner i guess
+    // Note: one thing that is odd, is that this is called with the correct runtime, but on the "wrong" thread.
+    // this will still be called from the JS thread, but the runtime is the worklet runtime.
     Dispatcher::installRuntimeGlobalDispatcher(runtime, renderThreadDispatcher);
-    Logger::log(TAG, "Successfully installed renderThreadDispatcher into rnw runtime 🎉");
     return jsi::Value::undefined();
 }
 
+std::shared_ptr<RNFBoxedHybridObject> FilamentProxy::box(const std::shared_ptr<HybridObject>& hybridObject) {
+    return std::make_shared<RNFBoxedHybridObject>(hybridObject);
+}
+
 #endif
 
 jsi::Value FilamentProxy::getCurrentDispatcher(jsi::Runtime& runtime, const jsi::Value&, const jsi::Value*, size_t) {

package/cpp/RNFFilamentProxy.cpp

@@ -18,6 +18,7 @@
 #include "bullet/RNFBulletWrapper.h"
 #include "core/RNFEngineWrapper.h"
 #include "jsi/RNFHybridObject.h"
+#include "jsi/RNFBoxedHybridObject.h"
 #include "test/RNFTestHybridObject.h"
 #include "threading/RNFDispatcher.h"
 #include "threading/RNFAsyncQueueImpl.h"
@@ -105,6 +106,8 @@ class FilamentProxy : public HybridObject {
 
   std::shared_ptr<worklets::AsyncQueue> createWorkletAsyncQueue();
   jsi::Value installDispatcher(jsi::Runtime& runtime, const jsi::Value&, const jsi::Value*, size_t);
+  std::shared_ptr<RNFBoxedHybridObject> box(const std::shared_ptr<HybridObject>& hybridObject);
+//  jsi::Value box(jsi::Runtime& runtime, const jsi::Value&, const jsi::Value*, size_t);
 #endif
 
 public:

package/cpp/RNFFilamentProxy.h

@@ -0,0 +1,31 @@
+//
+//  BoxedHybridObject.cpp
+//  NitroModules
+//
+//  Created by Marc Rousavy on 17.09.24.
+//
+
+#include "RNFBoxedHybridObject.h"
+
+namespace margelo {
+
+    std::vector<jsi::PropNameID> RNFBoxedHybridObject::getPropertyNames(facebook::jsi::Runtime& runtime) {
+        return jsi::PropNameID::names(runtime, "unbox");
+    }
+
+    jsi::Value RNFBoxedHybridObject::get(jsi::Runtime& runtime, const jsi::PropNameID& propName) {
+        std::string name = propName.utf8(runtime);
+
+        if (name == "unbox") {
+            return jsi::Function::createFromHostFunction(
+                    runtime, jsi::PropNameID::forUtf8(runtime, "unbox"), 0,
+                    [hybridObject = _hybridObject](jsi::Runtime& runtime, const jsi::Value&, const jsi::Value*, size_t) -> jsi::Value {
+                        return JSIConverter<std::shared_ptr<HybridObject>>::toJSI(runtime, hybridObject);
+//                        return jsi::Object::createFromHostObject(runtime, hybridObject);
+                    });
+        }
+
+        return jsi::Value::undefined();
+    }
+
+} // namespace margelo::nitro

package/cpp/jsi/RNFBoxedHybridObject.cpp

@@ -0,0 +1,39 @@
+//
+// Created by Hanno Gödecke on 11.01.26.
+// From https://github.com/mrousavy/nitro/blob/afa41bae947ecf738c33569ead42eaf0825cc6d5/packages/react-native-nitro-modules/cpp/core/BoxedHybridObject.hpp
+// TODO: should be removable once migrated to nitro modules + RNW supporting nitro HybridObjects
+//
+
+#pragma once
+
+#include "RNFHybridObject.h"
+#include <jsi/jsi.h>
+#include <memory>
+
+namespace margelo {
+
+    using namespace facebook;
+
+/**
+ * Represents a `HybridObject` that has been boxed into a `jsi::HostObject`.
+ *
+ * While `HybridObject`s are runtime agnostic, some threading/worklet libraries do not support copying over objects
+ * with `jsi::NativeState` and a prototype chain (which is what a `HybridObject` is), so Nitro offers support for
+ * boxing those `HybridObject`s into a type that those libraries support - which is a `jsi::HostObject`.
+ *
+ * Simply call `unbox()` on this `jsi::HostObject` from the new Runtime/context to get the `HybridObject` again.
+ */
+    class RNFBoxedHybridObject final : public jsi::HostObject {
+    public:
+        explicit RNFBoxedHybridObject(const std::shared_ptr<HybridObject>& hybridObject) : _hybridObject(hybridObject) {}
+
+    public:
+        jsi::Value get(jsi::Runtime& runtime, const jsi::PropNameID& propName) override;
+        std::vector<jsi::PropNameID> getPropertyNames(jsi::Runtime& runtime) override;
+
+    private:
+        std::shared_ptr<HybridObject> _hybridObject;
+    };
+
+} // namespace margelo::nitro
+

package/cpp/jsi/RNFBoxedHybridObject.h

@@ -9,7 +9,7 @@ using namespace facebook;
 static constexpr auto GLOBAL_DISPATCHER_HOLDER_NAME = "__globalDispatcher";
 
 void Dispatcher::installRuntimeGlobalDispatcher(jsi::Runtime& runtime, std::shared_ptr<Dispatcher> dispatcher) {
-  Logger::log(TAG, "Installing global Dispatcher Holder...");
+  Logger::log(TAG, "Installing global Dispatcher Holder on runtime ptr: " + std::to_string(reinterpret_cast<uintptr_t>(&runtime)) + " desc: " + runtime.description());
 
   // TODO: we should be able to remove this here, as we now use react-native-worklets
   // Track the runtime's lifetime

package/cpp/threading/RNFDispatcher.cpp

@@ -103,7 +103,8 @@
     "react": "*",
     "react-native": "*",
     "react-native-worklets-core": ">=1.3.2",
-    "react-native-worklets": "*"
+    "react-native-worklets": "*",
+    "react-native-reanimated": ">=4.0.0"
   },
   "release-it": {
     "git": {

package/package.json

@@ -4,7 +4,7 @@ import { useFilamentContext } from '../useFilamentContext'
 import { AABB, Entity, Float3 } from '../../types'
 import { areFloat3Equal, isWorkletSharedValue } from '../../utilities/helper'
 import { useWorkletEffect } from '../useWorkletEffect'
-import { ISharedValue, Worklets } from 'react-native-worklets-core'
+import { makeMutable, type SharedValue } from 'react-native-reanimated'
 
 type Params = {
   // If null it will not take the entity from the context, as it indicates that it will be provided through the param
@@ -76,9 +76,9 @@ export function useApplyTransformations({ to: entity, transformProps, aabb }: Pa
     transformToUnitCube,
   ])
 
-  const prevScaleShared = useRef(isWorkletSharedValue(scale) ? Worklets.createSharedValue<Float3 | null>(null) : null)
-  const prevRotateShared = useRef(isWorkletSharedValue(rotate) ? Worklets.createSharedValue<Float3 | null>(null) : null)
-  const prevPositionShared = useRef(isWorkletSharedValue(position) ? Worklets.createSharedValue<Float3 | null>(null) : null)
+  const prevScaleShared = useRef(isWorkletSharedValue(scale) ? makeMutable<Float3 | null>(null) : null)
+  const prevRotateShared = useRef(isWorkletSharedValue(rotate) ? makeMutable<Float3 | null>(null) : null)
+  const prevPositionShared = useRef(isWorkletSharedValue(position) ? makeMutable<Float3 | null>(null) : null)
 
   // Effects for when a transform option is a shared value (SRT)
   useWorkletEffect(() => {
@@ -91,7 +91,7 @@ export function useApplyTransformations({ to: entity, transformProps, aabb }: Pa
     // Generic handler for worklet transform values
     const createTransformHandler = (
       value: any,
-      prevValueShared: ISharedValue<Float3 | null> | null,
+      prevValueShared: SharedValue<Float3 | null> | null,
       updater: (newValue: Float3) => void
     ) => {
       'worklet'