react-native-list 2.0.0-alpha.1 → 2.0.0-alpha.2

package/README.md

@@ -1,6 +1,6 @@
 # React Native List
 
-High-performance list primitives for React Native.
+High-performance list for React Native.
 
 - 📱 True native [`UICollectionView`](https://developer.apple.com/documentation/uikit/uicollectionview) on iOS
 - 🤖 True native [`RecyclerView`](https://developer.android.com/develop/ui/views/layout/recyclerview) on android
@@ -8,26 +8,15 @@ High-performance list primitives for React Native.
 - 🐎 Platform native animations out of the box for list item transitions
 - 📉 Low memory usage due to true native view recycling
 
-<video src="https://github.com/user-attachments/assets/bd1eddd7-e166-4b91-b7ee-d177ce8edb58" width="320" controls align="right"></video>
+https://github.com/user-attachments/assets/4a2684bf-7337-45e0-bb17-ee7b8a382943
 
 ## Installation
 
 > [!WARNING]
 > Using this library requires you to use [react-native-worklets **bundle mode**](https://docs.swmansion.com/react-native-worklets/docs/bundleMode/setup).
 >
-> - Please follow the setup instructions of it first, and make sure your app works before using react-native-list!
-> - You need at least version 0.9.1!
-
-> [!CAUTION]
-> Right now you will have to patch react-native-worklets. See the patch file here and ask your friendly AI to apply it:
->
-> - [react-native-worklets@0.9.1.patch](https://github.com/hannojg/react-native-list/blob/main/patches/react-native-worklets%400.9.1.patch)
->
-> Once those PRs are landed upstream it will no longer be necessary:
->
-> - [fix(bundlemode): getBundleModeMetroConfig consider user config's resolveRequest](https://github.com/software-mansion/react-native-reanimated/pull/9327)
-> - [worklets plugin: allow react-native imports in bundle mode](https://github.com/software-mansion/react-native-reanimated/pull/9213)
-> - [worklets plugin: Add opt-in bundle mode JSX component capture](https://github.com/software-mansion/react-native-reanimated/pull/9212)
+> - Please follow [the setup instructions of it first](https://docs.swmansion.com/react-native-worklets/docs/bundleMode/setup), and make sure your app works before using react-native-list!
+> - You need at least version 0.10.0!
 
 Once that's out of the way, you can start with the regular setup of the library:
 
@@ -41,8 +30,15 @@ Simply wrap your config with `getReactNativeListMetroConfig` in `metro.config.js
 
 ```js
 const { getDefaultConfig } = require("expo/metro-config");
-const rnlistConfig = getReactNativeListMetroConfig(getDefaultConfig());
-module.exports = rnlistConfig;
+const {
+  getBundleModeMetroConfig,
+} = require("react-native-worklets/bundleMode");
+
+let config = getDefaultConfig(__dirname);
+config = getBundleModeMetroConfig(config);
+// ⚠️ Make sure to apply this _after_ the bundle mode metro config:
+config = getReactNativeListMetroConfig(config);
+module.exports = config;
 ```
 
 > [!NOTE]
@@ -87,9 +83,10 @@ type Items = TextItem | ImageItem
 const renderers: ListRenderers<Items> = {
   text: {
     renderItemWorklet: ({ item }) => {
-      "worklet";
+      "worklet"; // 👀 Note: our render function is a worklet!
 
       return (
+        // Though being in a worklet, you can use any component you like in here
         <View
           style={{
             justifyContent: "center",
@@ -131,20 +128,20 @@ export function ExampleList() {
 
 ## API
 
-XXXX
+XXXX TODO
 
 ## Benchmark
 
 > Scrolling as fast as possible. Release build. iPhone 13 Pro.
 
-https://github.com/user-attachments/assets/10ebbccd-290a-44cb-9c70-4aa283134249
+https://github.com/user-attachments/assets/aa7c2c41-b7ac-4d8b-9eb1-fd8b2feda4de
 
-|           | react-native-list | Legend List |
-| --------- | ----------------- | ----------- |
-| FPS       | 60                | 60          |
-| Memory    | 86.88mb           | 86.89mb     |
-| Total CPU | 185.93%           | 144.69%     |
-| Can blank | no                | yes         |
+|           | Legend List | react-native-list |
+| --------- | ----------- | ----------------- |
+| FPS       | 60          | 60                |
+| Memory    | 86.89mb     | 86.88mb           |
+| Total CPU | 144.69%     | 185.93%           |
+| Can blank | yes         | no                |
 
 Performance difference is best described as this:
 
@@ -155,9 +152,10 @@ Performance difference is best described as this:
 
 - For iOS when using dynamically sized items, try to use `iosConfig.estimatedItemSize` to roughly specify how many items will be visible in the view port. This can help a lot with performance.
 - When specifying sizes for items use `useLinearListLayout({})` inset configs. Avoid setting a width in the styles that exceed the actual available view port width.
+- If you can, always provide item sizes upfront. With that the performance will be unbeatable.
 - In your item render function, when you have no item data yet it is tempting to return early with `null` or just an empty `<View />`. However, this is super bad for performance. There are two phases for native lists. First is view creation, where you're expected to create the view hierarchy for your item - just not with any data yet (so that any data could be bind to it). The second phase is actually binding data to the view. This will result in a simple "update props" operation on the native side instead of needing to create a new view hierarchy. Example:
 
-Bad:
+❌ **Bad**:
 
 ```jsx
 renderItemWorklet: ({ item }) => {
@@ -171,7 +169,7 @@ renderItemWorklet: ({ item }) => {
   )
 ```
 
-Good:
+✅ **Good**:
 
 ```jsx
 renderItemWorklet: ({ item }) => {

package/lib/ReactFabricMirror.d.ts

@@ -0,0 +1,4 @@
+import type * as ReactModule from 'react';
+declare function nativeLog(...args: unknown[]): void;
+declare function reactRender(element: ReactModule.ReactElement, callback?: () => void): void;
+export { nativeLog, reactRender };

package/lib/ReactFabricMirror.js

@@ -0,0 +1,515 @@
+/* eslint-disable @react-native/no-deep-imports, @typescript-eslint/no-unused-vars, no-dupe-keys, prettier/prettier */
+// @ts-nocheck
+function nativeLog(...args) {
+    global._log?.('[ReactFabricMirror] ' +
+        args
+            .map((a) => {
+            try {
+                return JSON.stringify(a);
+            }
+            catch (e) {
+                return '<failed to parse> ' + String(a);
+            }
+        })
+            .join(' '));
+}
+global.log = nativeLog;
+const Reconciler = require('react-reconciler');
+// FabricUIManager is basically a wrapper around global.nativeFabricUIManager
+// but caches each function to avoid recreating a jsi::HostFunction on each call.
+const { getFabricUIManager, } = require('react-native/Libraries/ReactNative/FabricUIManager');
+const uiManager = getFabricUIManager();
+const { create: createAttributePayload, diff: diffAttributePayloads, } = require('react-native/Libraries/ReactNative/ReactFabricPublicInstance/ReactNativeAttributePayload');
+const ReactNativeViewConfigRegistry = require('react-native/Libraries/Renderer/shims/ReactNativeViewConfigRegistry');
+global.rootHostContext = {};
+global.childHostContext = {};
+const { NoEventPriority, DefaultEventPriority, DiscreteEventPriority, ContinuousEventPriority, IdleEventPriority, } = require('react-reconciler/constants');
+global.currentUpdatePriority = NoEventPriority;
+global.rootInstance = {
+    containerTag: 3,
+    publicInstance: null,
+};
+const { getPublicInstance } = require('../shims/react-fiber-config-fabric.js');
+//#region Event handling
+const EventPluginUtilsModule = require('../../third_party/react/packages/react-native-renderer/src/legacy-events/EventPluginUtils');
+const { setComponentTree } = EventPluginUtilsModule;
+const { injectEventPluginOrder, injectEventPluginsByName, plugins: legacyPlugins, } = require('../../third_party/react/packages/react-native-renderer/src/legacy-events/EventPluginRegistry');
+const ResponderEventPluginModule = require('../../third_party/react/packages/react-native-renderer/src/legacy-events/ResponderEventPlugin');
+const ReactNativeEventPluginOrderModule = require('../../third_party/react/packages/react-native-renderer/src/ReactNativeEventPluginOrder');
+const ReactFabricGlobalResponderHandlerModule = require('../../third_party/react/packages/react-native-renderer/src/ReactFabricGlobalResponderHandler');
+const SyntheticEventModule = require('../../third_party/react/packages/react-native-renderer/src/legacy-events/SyntheticEvent');
+const accumulateIntoModule = require('../../third_party/react/packages/react-native-renderer/src/legacy-events/accumulateInto');
+const forEachAccumulatedModule = require('../../third_party/react/packages/react-native-renderer/src/legacy-events/forEachAccumulated');
+const { batchedUpdates, } = require('../../third_party/react/packages/react-native-renderer/src/legacy-events/ReactGenericBatching');
+const { runEventsInBatch, } = require('../../third_party/react/packages/react-native-renderer/src/legacy-events/EventBatching');
+const { HostComponent } = require('react-reconciler/src/ReactWorkTags');
+const ResponderEventPlugin = ResponderEventPluginModule.default ?? ResponderEventPluginModule;
+const ReactNativeEventPluginOrder = ReactNativeEventPluginOrderModule.default ?? ReactNativeEventPluginOrderModule;
+const ReactFabricGlobalResponderHandler = ReactFabricGlobalResponderHandlerModule.default ??
+    ReactFabricGlobalResponderHandlerModule;
+const SyntheticEvent = SyntheticEventModule.default ?? SyntheticEventModule;
+const accumulateInto = accumulateIntoModule.default ?? accumulateIntoModule;
+const forEachAccumulated = forEachAccumulatedModule.default ?? forEachAccumulatedModule;
+const { customBubblingEventTypes, customDirectEventTypes } = ReactNativeViewConfigRegistry;
+function getParent(inst) {
+    do {
+        inst = inst.return;
+    } while (inst && inst.tag !== HostComponent);
+    return inst || null;
+}
+function traverseTwoPhase(inst, fn, arg, skipBubbling) {
+    const path = [];
+    while (inst) {
+        path.push(inst);
+        inst = getParent(inst);
+    }
+    for (let i = path.length - 1; i >= 0; i--) {
+        fn(path[i], 'captured', arg);
+    }
+    if (skipBubbling) {
+        fn(path[0], 'bubbled', arg);
+    }
+    else {
+        for (let i = 0; i < path.length; i++) {
+            fn(path[i], 'bubbled', arg);
+        }
+    }
+}
+function getListener(inst, registrationName) {
+    const stateNode = inst.stateNode;
+    if (stateNode == null) {
+        return null;
+    }
+    const props = EventPluginUtilsModule.getFiberCurrentPropsFromNode(stateNode);
+    if (props == null) {
+        return null;
+    }
+    const listener = props[registrationName];
+    if (listener != null && typeof listener !== 'function') {
+        throw new Error(`Expected \`${registrationName}\` listener to be a function, got \`${typeof listener}\`.`);
+    }
+    return listener;
+}
+function listenerAtPhase(inst, event, propagationPhase) {
+    const registrationName = event.dispatchConfig.phasedRegistrationNames[propagationPhase];
+    return getListener(inst, registrationName);
+}
+function accumulateDirectionalDispatches(inst, phase, event) {
+    const listener = listenerAtPhase(inst, event, phase);
+    if (listener) {
+        event._dispatchListeners = accumulateInto(event._dispatchListeners, listener);
+        event._dispatchInstances = accumulateInto(event._dispatchInstances, inst);
+    }
+}
+function accumulateTwoPhaseDispatchesSingle(event) {
+    if (event && event.dispatchConfig.phasedRegistrationNames) {
+        traverseTwoPhase(event._targetInst, accumulateDirectionalDispatches, event, false);
+    }
+}
+function accumulateTwoPhaseDispatches(events) {
+    forEachAccumulated(events, accumulateTwoPhaseDispatchesSingle);
+}
+function accumulateCapturePhaseDispatches(event) {
+    if (event && event.dispatchConfig.phasedRegistrationNames) {
+        traverseTwoPhase(event._targetInst, accumulateDirectionalDispatches, event, true);
+    }
+}
+function accumulateDispatches(inst, _ignoredDirection, event) {
+    if (inst && event && event.dispatchConfig.registrationName) {
+        const registrationName = event.dispatchConfig.registrationName;
+        const listener = getListener(inst, registrationName);
+        if (listener) {
+            event._dispatchListeners = accumulateInto(event._dispatchListeners, listener);
+            event._dispatchInstances = accumulateInto(event._dispatchInstances, inst);
+        }
+    }
+}
+function accumulateDirectDispatchesSingle(event) {
+    if (event && event.dispatchConfig.registrationName) {
+        accumulateDispatches(event._targetInst, null, event);
+    }
+}
+function accumulateDirectDispatches(events) {
+    forEachAccumulated(events, accumulateDirectDispatchesSingle);
+}
+const ReactNativeBridgeEventPlugin = {
+    eventTypes: {},
+    extractEvents(topLevelType, targetInst, nativeEvent, nativeEventTarget) {
+        if (targetInst == null) {
+            return null;
+        }
+        const bubbleDispatchConfig = customBubblingEventTypes[topLevelType];
+        const directDispatchConfig = customDirectEventTypes[topLevelType];
+        if (!bubbleDispatchConfig && !directDispatchConfig) {
+            throw new Error(`Unsupported top level event type "${topLevelType}" dispatched`);
+        }
+        const event = SyntheticEvent.getPooled(bubbleDispatchConfig || directDispatchConfig, targetInst, nativeEvent, nativeEventTarget);
+        if (bubbleDispatchConfig) {
+            const skipBubbling = event != null &&
+                event.dispatchConfig.phasedRegistrationNames != null &&
+                event.dispatchConfig.phasedRegistrationNames.skipBubbling;
+            if (skipBubbling) {
+                accumulateCapturePhaseDispatches(event);
+            }
+            else {
+                accumulateTwoPhaseDispatches(event);
+            }
+        }
+        else if (directDispatchConfig) {
+            accumulateDirectDispatches(event);
+        }
+        else {
+            return null;
+        }
+        return event;
+    },
+};
+function extractPluginEvents(topLevelType, targetInst, nativeEvent, nativeEventTarget) {
+    let events = null;
+    for (let i = 0; i < legacyPlugins.length; i++) {
+        const plugin = legacyPlugins[i];
+        if (plugin) {
+            const extractedEvents = plugin.extractEvents(topLevelType, targetInst, nativeEvent, nativeEventTarget);
+            if (extractedEvents) {
+                events = accumulateInto(events, extractedEvents);
+            }
+        }
+    }
+    return events;
+}
+function runExtractedPluginEventsInBatch(topLevelType, targetInst, nativeEvent, nativeEventTarget) {
+    const events = extractPluginEvents(topLevelType, targetInst, nativeEvent, nativeEventTarget);
+    runEventsInBatch(events);
+}
+function ensureLegacyEventPluginsInjected() {
+    try {
+        injectEventPluginOrder(ReactNativeEventPluginOrder);
+    }
+    catch (error) {
+        // The plugin order can only be injected once for a given registry instance.
+        if (!String(error).includes('Cannot inject event plugin ordering more than once')) {
+            throw error;
+        }
+    }
+    injectEventPluginsByName({
+        ResponderEventPlugin,
+        ReactNativeBridgeEventPlugin,
+    });
+    setComponentTree(
+    // Equivalent to ReactFabricComponentTree.getFiberCurrentPropsFromNode
+    (instance) => instance?.canonical?.currentProps ?? null, 
+    // Equivalent to ReactFabricComponentTree.getInstanceFromNode
+    (node) => {
+        if (node?.canonical != null &&
+            node.canonical.internalInstanceHandle != null) {
+            return node.canonical.internalInstanceHandle;
+        }
+        return node ?? null;
+    }, 
+    // Equivalent to ReactFabricComponentTree.getNodeFromInstance
+    (fiber) => {
+        const publicInstance = getPublicInstance(fiber.stateNode);
+        if (publicInstance == null) {
+            throw new Error('Could not find host instance from fiber');
+        }
+        return publicInstance;
+    });
+    ResponderEventPlugin.injection.injectGlobalResponderHandler(ReactFabricGlobalResponderHandler);
+}
+ensureLegacyEventPluginsInjected();
+function dispatchEvent(target, topLevelType, nativeEvent) {
+    const targetFiber = target;
+    let eventTarget = null;
+    if (targetFiber != null) {
+        const stateNode = targetFiber.stateNode;
+        if (stateNode != null) {
+            eventTarget = getPublicInstance(stateNode);
+        }
+    }
+    batchedUpdates(() => {
+        runExtractedPluginEventsInBatch(topLevelType, targetFiber, nativeEvent, eventTarget);
+    });
+}
+// This will be retrieved on the native side in JSI ... hm or we call and set it?
+global.handleEvent = dispatchEvent;
+//#endregion
+// Counter for uniquely identifying views.
+// % 10 === 1 means it is a rootTag.
+// % 2 === 0 means it is a Fabric tag.
+// This means that they never overlap.
+global.nextReactTag = 200_000_000;
+// ^ Why is this number so high?
+// We share the ReactInstance (ie we don't create a seperate one)
+// That means our surface shares the RCTComponentViewRegistry on iOS with the main React Native renderer.
+// When creating new views its checking if the tag already exists, meaning we can't use the same tags that react is using. Bummer!\
+// TODO: find a better solution for this
+const HostConfig = {
+    now: performance.now,
+    getRootHostContext(rootContainerInstance) {
+        return global.rootHostContext;
+    },
+    getChildHostContext() {
+        return global.childHostContext;
+    },
+    //   prepareForCommit(containerInfo) {},
+    //   resetAfterCommit(containerInfo) {},
+    supportsPersistence: true,
+    createInstance: (type, props, rootContainerInstance, _currentHostContext, workInProgress) => {
+        const tag = global.nextReactTag;
+        global.nextReactTag += 2;
+        const viewConfig = ReactNativeViewConfigRegistry.get(type);
+        const updatePayload = createAttributePayload(props, viewConfig.validAttributes);
+        let node;
+        try {
+            nativeLog('[createInstance] calling createNode with type=', type, 'tag=', tag);
+            nativeLog('[createInstance] props=', updatePayload);
+            node = uiManager.createNode(tag, // reactTag
+            viewConfig.uiViewClassName, // viewName
+            rootContainerInstance.containerTag, // rootTag
+            updatePayload, // props
+            workInProgress // internalInstanceHandle
+            );
+        }
+        catch (e) {
+            nativeLog('[createInstance] ERROR in createNode:', e.message || String(e));
+            nativeLog('Stack:', new Error().stack);
+            throw e;
+        }
+        return {
+            node: node,
+            canonical: {
+                nativeTag: tag,
+                viewConfig, // TODO: is this needed? for what
+                currentProps: props, // funny, react is passing here props instead of updatePayload, is this okay?
+                internalInstanceHandle: workInProgress,
+                publicInstance: null,
+                publicRootInstance: rootContainerInstance.publicInstance,
+            },
+        };
+    },
+    finalizeInitialChildren(parentInstance, type, props, hostContext) {
+        nativeLog('[finalizeInitialChildren]');
+        return false;
+    },
+    cloneInstance(instance, type, oldProps, newProps, keepChildren, newChildSet) {
+        nativeLog('[cloneInstance] tag=', instance.canonical.nativeTag);
+        const viewConfig = instance.canonical.viewConfig;
+        const updatePayload = diffAttributePayloads(oldProps, newProps, viewConfig.validAttributes);
+        nativeLog('[cloneInstance] updatePayload=', updatePayload);
+        // TODO: If the event handlers have changed, we need to update the current props
+        // in the commit phase but there is no host config hook to do it yet.
+        // So instead we hack it by updating it in the render phase.
+        instance.canonical.currentProps = newProps;
+        const node = instance.node;
+        let clone;
+        if (keepChildren) {
+            if (updatePayload !== null) {
+                clone = uiManager.cloneNodeWithNewProps(node, updatePayload);
+            }
+            else {
+                // No changes
+                return instance;
+            }
+        }
+        else {
+            // If passChildrenWhenCloningPersistedNodes is enabled, children will be non-null
+            if (newChildSet != null) {
+                if (updatePayload !== null) {
+                    clone = uiManager.cloneNodeWithNewChildrenAndProps(node, newChildSet, updatePayload);
+                }
+                else {
+                    clone = uiManager.cloneNodeWithNewChildren(node, newChildSet);
+                }
+            }
+            else {
+                if (updatePayload !== null) {
+                    clone = uiManager.cloneNodeWithNewChildrenAndProps(node, updatePayload);
+                }
+                else {
+                    clone = uiManager.cloneNodeWithNewChildren(node);
+                }
+            }
+        }
+        return {
+            node: clone,
+            canonical: instance.canonical,
+        };
+    },
+    createTextInstance(text, rootContainerInstance, hostContext, internalInstanceHandle) {
+        const tag = global.nextReactTag;
+        global.nextReactTag += 2;
+        const node = uiManager.createNode(tag, // reactTag
+        'RCTRawText', // viewName
+        rootContainerInstance.containerTag, // rootTag
+        { text: text }, // props
+        internalInstanceHandle // instance handle
+        );
+        return {
+            node: node,
+        };
+    },
+    createContainerChildSet() {
+        nativeLog('[createContainerChildSet]');
+        return uiManager.createChildSet();
+    },
+    appendChildToContainerChildSet(childSet, child) {
+        nativeLog('[appendChildToContainerChildSet]');
+        uiManager.appendChildToSet(childSet, child.node);
+    },
+    finalizeContainerChildren(container, newChildren) {
+        // Noop - children will be replaced in replaceContainerChildren
+        nativeLog('[finalizeContainerChildren]');
+    },
+    appendInitialChild(parentInstance, child) {
+        nativeLog('[appendInitialChild]');
+        uiManager.appendChild(parentInstance.node, child.node);
+    },
+    replaceContainerChildren(container, newChildren) {
+        nativeLog('[replaceContainerChildren]');
+        uiManager.completeRoot(container.containerTag, newChildren);
+    },
+    // TODO: hm, this could get problematic, to share event priorities between the fabric ui manager.
+    // Maybe we need to create a clone of the ui manager? the important thing is that all view managers are resolved when we do so.
+    // However that would concern me if commitHooks from reanimated would work.
+    setCurrentUpdatePriority(priority) {
+        global.currentUpdatePriority = priority;
+    },
+    getCurrentUpdatePriority() {
+        return global.currentUpdatePriority;
+    },
+    resolveUpdatePriority() {
+        if (global.currentUpdatePriority !== NoEventPriority) {
+            return global.currentUpdatePriority;
+        }
+        else {
+            return DefaultEventPriority;
+        }
+        // TODO:
+        /*   const currentEventPriority = fabricGetCurrentEventPriority
+        ? fabricGetCurrentEventPriority()
+        : null;
+    
+      if (currentEventPriority != null) {
+        switch (currentEventPriority) {
+          case FabricDiscretePriority:
+            return DiscreteEventPriority;
+          case FabricContinuousPriority:
+            return ContinuousEventPriority;
+          case FabricIdlePriority:
+            return IdleEventPriority;
+          case FabricDefaultPriority:
+          default:
+            return DefaultEventPriority;
+        }
+      }
+    
+      return DefaultEventPriority; */
+    },
+    getPublicInstance(instance) {
+        return getPublicInstance(instance);
+    },
+    // getPublicTextInstance(textInstance, internalInstanceHandle) {
+    //   if (textInstance.publicInstance == null) {
+    //     textInstance.publicInstance = createPublicTextInstance(
+    //       internalInstanceHandle
+    //     )
+    //   }
+    //   return textInstance.publicInstance
+    // },
+    // getPublicInstanceFromInternalInstanceHandle(internalInstanceHandle) {
+    //   const instance = internalInstanceHandle.stateNode
+    //   // React resets all the fields in the fiber when the component is unmounted
+    //   // to prevent memory leaks.
+    //   if (instance == null) {
+    //     return null
+    //   }
+    //   if (internalInstanceHandle.tag === HostText) {
+    //     const textInstance = instance
+    //     return this.getPublicTextInstance(textInstance, internalInstanceHandle)
+    //   }
+    //   const elementInstance = internalInstanceHandle.stateNode
+    //   return this.getPublicInstance(elementInstance)
+    // },
+    prepareForCommit(containerInfo) {
+        return null;
+    },
+    resetAfterCommit(containerInfo) { },
+    trackSchedulerEvent() { },
+    resolveEventType() {
+        return null;
+    },
+    resolveEventTimeStamp() {
+        return -1.1;
+    },
+    shouldAttemptEagerTransition() {
+        return false;
+    },
+    shouldSetTextContent(type, props) {
+        return false;
+    },
+    // TODO: microtask scheduling, should work with worklets on the UI thread i believe! not sure though if even RN implements this?
+    supportsMicrotasks: false,
+    detachDeletedInstance(node) { },
+    beforeActiveInstanceBlur(internalInstanceHandle) {
+        // noop
+    },
+    afterActiveInstanceBlur() {
+        // noop
+    },
+    preparePortalMount(portalInstance) {
+        // noop
+    },
+    detachDeletedInstance(node) {
+        // noop
+    },
+    requestPostPaintCallback(callback) {
+        // noop
+    },
+    maySuspendCommit(type, props) {
+        return false;
+    },
+    maySuspendCommitOnUpdate(type, oldProps, newProps) {
+        return false;
+    },
+    maySuspendCommitInSyncRender(type, props) {
+        return false;
+    },
+    preloadInstance(instance, type, props) {
+        return true;
+    },
+    startSuspendingCommit() {
+        return null;
+    },
+    suspendInstance(state, instance, type, props) { },
+    suspendOnActiveViewTransition(state, container) { },
+    waitForCommitToBeReady(state, timeoutOffset) {
+        return null;
+    },
+    getSuspendedCommitReason(state, rootContainer) {
+        return null;
+    },
+    isPrimaryRenderer: false,
+};
+const Renderer = Reconciler(HostConfig);
+global.React = require('react');
+function reactRender(element, callback) {
+    if (!global.rootContainer) {
+        global.rootContainer = Renderer.createContainer(global.rootInstance, 0, // concurrentRoot ? 1 : 0
+        null, false, null, 'ui-renderer', function onUncaughtError(error, info) {
+            nativeLog('[Error][ReactFabricMirror] Uncaught error in React renderer: ', error, info);
+        }, function onCaughtError(error, info) {
+            nativeLog('[Error][ReactFabricMirror] Caught error in React renderer: ', error, info);
+        }, function onRecoverableError(error, info) {
+            nativeLog('[Error][ReactFabricMirror] Recoverable error in React renderer: ', error, info);
+        }, function nativeOnDefaultTransitionIndicator() {
+            // Native doesn't have a default indicator.
+        });
+    }
+    // updateContainerSync + flushSyncWork is making the renderer work immediately/blocking/…sync
+    Renderer.updateContainerSync(element, global.rootContainer, null, callback);
+    // Renderer.flushPassiveEffects();
+    Renderer.flushSyncWork();
+    nativeLog('[ReactFabricMirror] updateContainer finished');
+}
+nativeLog('[ReactFabricMirror] ReactFabricMirror initialized');
+export { nativeLog, reactRender };

package/lib/UiListModule.d.ts

@@ -0,0 +1,2 @@
+import { UiListModule } from './specs/UIListModule.nitro';
+export declare const uiListModule: UiListModule;

package/lib/UiListModule.js

@@ -0,0 +1,2 @@
+import { NitroModules } from 'react-native-nitro-modules';
+export const uiListModule = NitroModules.createHybridObject('UiListModule');

package/lib/index.d.ts

@@ -0,0 +1,8 @@
+import { uiListModule } from './UiListModule';
+import { uiManagerHelper } from './renderer/fabric/UiManagerHelper';
+import { List } from './views/List';
+export { ViewHolder } from './specs/ViewHolder.nitro';
+export { IOSWorkletsModuleProxyHolder } from './specs/IOSWorkletsModuleProxyHolder.nitro';
+export type { NativeListItem } from './specs/UiListView.nitro';
+export type { ListItemSize, ListKey, ListProps, ListRef, ListRenderer, } from './views/List';
+export { List, uiListModule, uiManagerHelper };

package/lib/index.js

@@ -0,0 +1,21 @@
+import { scheduleOnUI } from 'react-native-worklets';
+import { uiListModule } from './UiListModule';
+import { uiManagerHelper } from './renderer/fabric/UiManagerHelper';
+import { List } from './views/List';
+import { Platform } from 'react-native';
+import { getReactFabricRenderer } from './renderer/react/ReactFabricRenderer';
+const boxed = uiListModule;
+const nativeFabricUIManager = globalThis.nativeFabricUIManager;
+function setup() {
+    // TODO: ask SWM if they can remove their JS thread checks, then we could just access this from the UI thread.
+    const iosWorkletsModuleHolder = Platform.OS === 'ios' ? uiListModule.iosGetWorkletsModule() : null;
+    scheduleOnUI(() => {
+        'worklet';
+        globalThis.nativeFabricUIManager = nativeFabricUIManager;
+        boxed.setupExternalSurface(iosWorkletsModuleHolder);
+        // This will setup the react instance on the UI runtime:
+        getReactFabricRenderer();
+    });
+}
+setup();
+export { List, uiListModule, uiManagerHelper };