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

package/lib/views/List.js

@@ -0,0 +1,225 @@
+import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState, } from 'react';
+import { UiListHostComponent } from './UiListHostComponent';
+import { callback } from 'react-native-nitro-modules';
+import { scheduleOnUI } from 'react-native-worklets';
+import { renderSyncWorklet, uiListModuleBoxed, } from '../renderer/fabric/RenderHelper';
+import { View } from 'react-native';
+import { getReactFabricRenderer } from '../renderer/react/ReactFabricRenderer';
+function assertValidSize(size, index) {
+    const width = size.width;
+    const height = size.height;
+    if (width != null && (!Number.isFinite(width) || width <= 0)) {
+        throw new Error(`List item at index ${index} has an invalid width.`);
+    }
+    if (height != null && (!Number.isFinite(height) || height <= 0)) {
+        throw new Error(`List item at index ${index} has an invalid height.`);
+    }
+}
+function stringifyKey(key, index) {
+    if (typeof key === 'string') {
+        return key;
+    }
+    if (typeof key === 'number') {
+        return String(key);
+    }
+    throw new Error(`List item at index ${index} returned an invalid key.`);
+}
+function createNativeItem(item, index, props) {
+    const rawKey = props.keyExtractor(item, index);
+    const key = stringifyKey(rawKey, index);
+    const type = props.getItemType(item, index);
+    const renderer = props.renderers[type];
+    if (renderer == null) {
+        throw new Error(`List item at index ${index} uses unknown type "${type}".`);
+    }
+    const size = props.getItemSize?.(item, index) ?? {};
+    assertValidSize(size, index);
+    return {
+        key: key,
+        type: type,
+        width: size.width,
+        height: size.height,
+        data: item,
+    };
+}
+function createNativeItems(data, props) {
+    const seenIdentities = new Set();
+    const items = [];
+    for (let index = 0; index < data.length; index++) {
+        const item = data[index];
+        if (item == null) {
+            throw new Error(`List item at index ${index} is undefined.`);
+        }
+        const nativeItem = createNativeItem(item, index, props);
+        const identity = nativeItem.type + ':' + nativeItem.key;
+        if (seenIdentities.has(identity)) {
+            throw new Error(`List contains duplicate item identity "${identity}".`);
+        }
+        seenIdentities.add(identity);
+        items.push(nativeItem);
+    }
+    return items;
+}
+function ListInner(props, forwardedRef) {
+    const { data, getItemSize, getItemType, keyExtractor, renderers, style } = props;
+    const isSetup = useRef(false);
+    const nativeListRef = useRef(null);
+    const [isNativeReady, setIsNativeReady] = useState(false);
+    const nativeItems = useMemo(() => {
+        const normalizationProps = {
+            data,
+            keyExtractor,
+            getItemType,
+            getItemSize,
+            renderers,
+        };
+        return createNativeItems(data, normalizationProps);
+    }, [data, getItemSize, getItemType, keyExtractor, renderers]);
+    useImperativeHandle(forwardedRef, () => {
+        return {
+            replaceData(nextData, animated = true) {
+                const ref = nativeListRef.current;
+                if (ref == null)
+                    return;
+                const nextItems = createNativeItems(nextData, props);
+                ref.setData(nextItems, animated);
+            },
+            insertItem(index, item) {
+                const ref = nativeListRef.current;
+                if (ref == null)
+                    return;
+                const nativeItem = createNativeItem(item, index, props);
+                ref.insertItem(index, nativeItem);
+            },
+            updateItem(index, item) {
+                const ref = nativeListRef.current;
+                if (ref == null)
+                    return;
+                const nativeItem = createNativeItem(item, index, props);
+                ref.updateItem(index, nativeItem);
+            },
+            removeItem(index) {
+                const ref = nativeListRef.current;
+                if (ref == null)
+                    return;
+                ref.removeItem(index);
+            },
+            moveItem(fromIndex, toIndex) {
+                const ref = nativeListRef.current;
+                if (ref == null)
+                    return;
+                ref.moveItem(fromIndex, toIndex);
+            },
+        };
+    }, [props]);
+    useEffect(() => {
+        const ref = nativeListRef.current;
+        if (ref == null || !isNativeReady)
+            return;
+        ref.setData(nativeItems, true);
+    }, [isNativeReady, nativeItems]);
+    return (React.createElement(UiListHostComponent, { style: style, hybridRef: callback((ref) => {
+            nativeListRef.current = ref;
+            if (isSetup.current)
+                return;
+            isSetup.current = true;
+            scheduleOnUI(() => {
+                'worklet';
+                const { nativeLog, reactRender } = getReactFabricRenderer();
+                const tagToArrayPosition = {};
+                const tagToItemId = {};
+                let nextItemId = 0;
+                const elementsRendered = [];
+                const uiListModuleUnboxed = uiListModuleBoxed.unbox();
+                ref.setListCallbacks(uiListModuleUnboxed, (type) => {
+                    const nativeRef = globalThis.React.createRef();
+                    const itemId = nextItemId++;
+                    const typedType = type;
+                    const renderer = renderers[typedType];
+                    if (renderer == null) {
+                        throw new Error('No renderer for list item type ' + type);
+                    }
+                    const newElement = renderer.renderItemWorklet({
+                        type: typedType,
+                    });
+                    const newProps = {
+                        key: 'itemid-' + itemId,
+                        ref: nativeRef,
+                        collapsable: false,
+                    };
+                    const newElementWithKey = globalThis.React.cloneElement(newElement, newProps);
+                    const newLength = elementsRendered.push(newElementWithKey);
+                    const currentIndex = newLength - 1;
+                    const parentContainer = React.createElement(View, null, elementsRendered);
+                    reactRender(parentContainer, () => {
+                        nativeLog('Render complete');
+                    });
+                    if (nativeRef.current == null) {
+                        throw new Error('Ref is null after render');
+                    }
+                    const tag = nativeRef.current.__nativeTag;
+                    tagToArrayPosition[tag] = currentIndex;
+                    tagToItemId[tag] = itemId;
+                    const start = globalThis.performance.now();
+                    renderSyncWorklet();
+                    const end = globalThis.performance.now();
+                    nativeLog('renderSync took ', end - start, 'ms');
+                    return tag;
+                }, (reactTag, item, index) => {
+                    const typedType = item.type;
+                    const renderer = renderers[typedType];
+                    if (renderer == null) {
+                        throw new Error('No renderer for list item type ' + item.type);
+                    }
+                    const itemId = tagToItemId[reactTag];
+                    if (itemId == null) {
+                        throw new Error('No itemId for tag ' + reactTag);
+                    }
+                    const newElement = renderer.renderItemWorklet({
+                        item: item.data,
+                        index,
+                        key: item.key,
+                        type: typedType,
+                    });
+                    const newProps = {
+                        key: 'itemid-' + itemId,
+                        collapsable: false,
+                    };
+                    const newElementWithKey = globalThis.React.cloneElement(newElement, newProps);
+                    const position = tagToArrayPosition[reactTag];
+                    if (position == null) {
+                        throw new Error('No position for tag ' + reactTag);
+                    }
+                    elementsRendered[position] = newElementWithKey;
+                    const parentContainer = React.createElement(View, null, elementsRendered);
+                    reactRender(parentContainer, () => {
+                        nativeLog('Update Render complete');
+                    });
+                    const start = globalThis.performance.now();
+                    renderSyncWorklet();
+                    const end = globalThis.performance.now();
+                    nativeLog('Update renderSync took ', end - start, 'ms');
+                    return true;
+                }, (oldItem, newItem) => {
+                    if (oldItem.type !== newItem.type) {
+                        return false;
+                    }
+                    if (oldItem.width !== newItem.width) {
+                        return false;
+                    }
+                    if (oldItem.height !== newItem.height) {
+                        return false;
+                    }
+                    const typedType = newItem.type;
+                    const renderer = renderers[typedType];
+                    if (renderer == null) {
+                        throw new Error('No renderer for list item type ' + newItem.type);
+                    }
+                    return renderer.isContentEqualWorklet(oldItem.data, newItem.data);
+                });
+                ref.setData(nativeItems, false);
+            });
+            setIsNativeReady(true);
+        }) }));
+}
+export const List = forwardRef(ListInner);

package/lib/views/UiListHostComponent.d.ts

@@ -0,0 +1,2 @@
+import { UiListViewMethods, UiListViewProps } from '../specs/UiListView.nitro';
+export declare const UiListHostComponent: import("react-native-nitro-modules").ReactNativeView<UiListViewProps, UiListViewMethods>;

package/lib/views/UiListHostComponent.js

@@ -0,0 +1,3 @@
+import { getHostComponent } from 'react-native-nitro-modules';
+import UiListViewConfig from '../../nitrogen/generated/shared/json/UiListViewConfig.json';
+export const UiListHostComponent = getHostComponent('UiListView', () => UiListViewConfig);

package/metro/RendererProxyThreadSwitch.js

@@ -0,0 +1,66 @@
+'use strict'
+
+function isReactNativeRuntime() {
+  return global.__RUNTIME_KIND === 1
+}
+
+let cachedReactNativeRendererProxy
+function getReactNativeRendererProxy() {
+  if (cachedReactNativeRendererProxy == null) {
+    // Intentionally lazy: avoid loading the default RN renderer in non-RN runtimes.
+    // eslint-disable-next-line @react-native/no-deep-imports
+    cachedReactNativeRendererProxy = require('react-native/Libraries/ReactNative/RendererProxy')
+  }
+  return cachedReactNativeRendererProxy
+}
+
+function getNodeFromInternalInstanceHandle(internalInstanceHandle) {
+  if (isReactNativeRuntime()) {
+    return getReactNativeRendererProxy().getNodeFromInternalInstanceHandle(
+      internalInstanceHandle
+    )
+  }
+
+  const stateNode = internalInstanceHandle?.stateNode
+  if (stateNode == null) {
+    return null
+  }
+  return stateNode.node ?? stateNode
+}
+
+function getPublicInstanceFromInternalInstanceHandle(internalInstanceHandle) {
+  if (isReactNativeRuntime()) {
+    return getReactNativeRendererProxy().getPublicInstanceFromInternalInstanceHandle(
+      internalInstanceHandle
+    )
+  }
+
+  const stateNode = internalInstanceHandle?.stateNode
+  if (stateNode == null) {
+    return null
+  }
+
+  if (stateNode.canonical?.publicInstance != null) {
+    return stateNode.canonical.publicInstance
+  }
+
+  return stateNode.node ?? stateNode
+}
+
+function getPublicInstanceFromRootTag(rootTag) {
+  if (isReactNativeRuntime()) {
+    return getReactNativeRendererProxy().getPublicInstanceFromRootTag(rootTag)
+  }
+
+  if (global.rootInstance?.containerTag === Number(rootTag)) {
+    return global.rootInstance.publicInstance ?? null
+  }
+
+  return null
+}
+
+module.exports = {
+  getNodeFromInternalInstanceHandle,
+  getPublicInstanceFromInternalInstanceHandle,
+  getPublicInstanceFromRootTag,
+}

package/metro-config.d.ts

@@ -0,0 +1 @@
+export function getReactNativeListMetroConfig<TConfig>(config: TConfig): TConfig

package/metro-config.js

@@ -0,0 +1,124 @@
+'use strict'
+
+const path = require('path')
+
+const rendererProxyThreadSwitchPath = path.resolve(
+  __dirname,
+  'metro/RendererProxyThreadSwitch.js'
+)
+
+function isRendererProxyImport(moduleName) {
+  return /(?:^|\/)RendererProxy(?:\.js)?$/.test(moduleName)
+}
+
+//#region Turbo module handling
+// react-native-worklets installs a shim preventing the usage of TurboModules on other runtimes:
+// - https://github.com/software-mansion/react-native-reanimated/blob/9c2e3b05216b22d3c1ed4be67719876d1fa9115d/packages/react-native-worklets/bundleMode/shims/turboModuleRegistryShim.js#L36
+// As we properly handle turbo modules we want to allow for it.
+// So we basically redirect all imports of the shim back to the original TurboModuleRegistry.js file:
+const turboModuleRegistryModuleName =
+  'react-native/Libraries/TurboModule/TurboModuleRegistry'
+const turboModuleRegistryPath = require.resolve(turboModuleRegistryModuleName)
+const turboModuleRegistryFileSuffix = path.join(
+  'react-native',
+  'Libraries',
+  'TurboModule',
+  'TurboModuleRegistry.js'
+)
+const workletsTurboModuleRegistryShimSuffix = path.join(
+  'react-native-worklets',
+  'bundleMode',
+  'shims',
+  'turboModuleRegistryShim.js'
+)
+
+function isTurboModuleRegistryImport(moduleName) {
+  return moduleName === turboModuleRegistryModuleName
+}
+
+function isSourceFileResolution(result) {
+  if (result == null) {
+    return false
+  }
+
+  if (result.type !== 'sourceFile') {
+    return false
+  }
+
+  return typeof result.filePath === 'string'
+}
+
+function isTurboModuleRegistryResolution(result) {
+  if (!isSourceFileResolution(result)) {
+    return false
+  }
+
+  return result.filePath.endsWith(turboModuleRegistryFileSuffix)
+}
+
+function isWorkletsTurboModuleRegistryShimResolution(result) {
+  if (!isSourceFileResolution(result)) {
+    return false
+  }
+
+  return result.filePath.endsWith(workletsTurboModuleRegistryShimSuffix)
+}
+
+function createTurboModuleRegistryResolution() {
+  return {
+    type: 'sourceFile',
+    filePath: turboModuleRegistryPath,
+  }
+}
+//#endregion
+
+function isReactNativeDomInternalsImporter(originModulePath) {
+  if (typeof originModulePath !== 'string') {
+    return false
+  }
+
+  return originModulePath.includes(
+    `${path.sep}node_modules${path.sep}react-native${path.sep}src${path.sep}private${path.sep}webapis${path.sep}dom${path.sep}nodes${path.sep}internals${path.sep}`
+  )
+}
+
+function getReactNativeListMetroConfig(config) {
+  config.resolver = config.resolver || {}
+  const currentResolveRequest = config.resolver.resolveRequest
+
+  config.resolver.resolveRequest = (context, moduleName, platform) => {
+    if (isTurboModuleRegistryImport(moduleName)) {
+      return createTurboModuleRegistryResolution()
+    }
+
+    // Redirect only React Native DOM internals to a runtime-switching proxy.
+    if (
+      isRendererProxyImport(moduleName) &&
+      isReactNativeDomInternalsImporter(context.originModulePath)
+    ) {
+      return {
+        type: 'sourceFile',
+        filePath: rendererProxyThreadSwitchPath,
+      }
+    }
+
+    const resolveRequest = currentResolveRequest || context.resolveRequest
+    const resolved = resolveRequest(context, moduleName, platform)
+
+    if (isTurboModuleRegistryResolution(resolved)) {
+      return createTurboModuleRegistryResolution()
+    }
+
+    if (isWorkletsTurboModuleRegistryShimResolution(resolved)) {
+      return createTurboModuleRegistryResolution()
+    }
+
+    return resolved
+  }
+
+  return config
+}
+
+module.exports = {
+  getReactNativeListMetroConfig,
+}

package/nitro.json

@@ -0,0 +1,47 @@
+{
+  "$schema": "https://nitro.margelo.com/nitro.schema.json",
+  "cxxNamespace": [
+    "reactnativelist"
+  ],
+  "ios": {
+    "iosModuleName": "ReactNativeList"
+  },
+  "android": {
+    "androidNamespace": [
+      "reactnativelist"
+    ],
+    "androidCxxLibName": "ReactNativeList"
+  },
+  "autolinking": {
+    "ViewHolder": {
+      "kotlin": "HybridViewHolder",
+      "swift": "HybridViewHolder"
+    },
+    "UiListView": {
+      "kotlin": "HybridUiListView",
+      "swift": "HybridUiListView"
+    },
+    "NativeListDataSource": {
+      "kotlin": "HybridNativeListDataSource",
+      "swift": "HybridNativeListDataSource"
+    },
+    "NativeListLayout": {
+      "kotlin": "HybridNativeListLayout",
+      "swift": "HybridNativeListLayout"
+    },
+    "NativeLinearListLayout": {
+      "kotlin": "HybridNativeLinearListLayout",
+      "swift": "HybridNativeLinearListLayout"
+    },
+    "UiListModule": {
+      "kotlin": "HybridUiListModule",
+      "swift": "HybridUiListModule"
+    },
+    "UiManagerHelper": {
+      "cpp": "HybridUiManagerHelper"
+    }
+  },
+  "ignorePaths": [
+    "**/node_modules"
+  ]
+}

package/nitrogen/generated/.gitattributes

@@ -0,0 +1 @@
+** linguist-generated=true

package/nitrogen/generated/android/ReactNativeList+autolinking.cmake

@@ -0,0 +1,99 @@
+#
+# ReactNativeList+autolinking.cmake
+# This file was generated by nitrogen. DO NOT MODIFY THIS FILE.
+# https://github.com/mrousavy/nitro
+# Copyright © Marc Rousavy @ Margelo
+#
+
+# This is a CMake file that adds all files generated by Nitrogen
+# to the current CMake project.
+#
+# To use it, add this to your CMakeLists.txt:
+# ```cmake
+# include(${CMAKE_SOURCE_DIR}/../nitrogen/generated/android/ReactNativeList+autolinking.cmake)
+# ```
+
+# Define a flag to check if we are building properly
+add_definitions(-DBUILDING_REACTNATIVELIST_WITH_GENERATED_CMAKE_PROJECT)
+
+# Enable Raw Props parsing in react-native (for Nitro Views)
+add_definitions(-DRN_SERIALIZABLE_STATE)
+
+# Add all headers that were generated by Nitrogen
+include_directories(
+  "../nitrogen/generated/shared/c++"
+  "../nitrogen/generated/android/c++"
+  "../nitrogen/generated/android/"
+)
+
+# Add all .cpp sources that were generated by Nitrogen
+target_sources(
+  # CMake project name (Android C++ library name)
+  ReactNativeList PRIVATE
+  # Autolinking Setup
+  ../nitrogen/generated/android/ReactNativeListOnLoad.cpp
+  # Shared Nitrogen C++ sources
+  ../nitrogen/generated/shared/c++/HybridIOSWorkletsModuleProxyHolderSpec.cpp
+  ../nitrogen/generated/shared/c++/HybridNativeLinearListLayoutSpec.cpp
+  ../nitrogen/generated/shared/c++/HybridNativeListDataSourceSpec.cpp
+  ../nitrogen/generated/shared/c++/HybridNativeListLayoutSpec.cpp
+  ../nitrogen/generated/shared/c++/HybridUiListModuleSpec.cpp
+  ../nitrogen/generated/shared/c++/HybridUiListViewSpec.cpp
+  ../nitrogen/generated/shared/c++/views/HybridUiListViewComponent.cpp
+  ../nitrogen/generated/shared/c++/HybridUiManagerHelperSpec.cpp
+  ../nitrogen/generated/shared/c++/HybridViewHolderSpec.cpp
+  ../nitrogen/generated/shared/c++/views/HybridViewHolderComponent.cpp
+  # Android-specific Nitrogen C++ sources
+  ../nitrogen/generated/android/c++/JHybridIOSWorkletsModuleProxyHolderSpec.cpp
+  ../nitrogen/generated/android/c++/JHybridNativeLinearListLayoutSpec.cpp
+  ../nitrogen/generated/android/c++/JHybridNativeListDataSourceSpec.cpp
+  ../nitrogen/generated/android/c++/JHybridNativeListLayoutSpec.cpp
+  ../nitrogen/generated/android/c++/JHybridUiListModuleSpec.cpp
+  ../nitrogen/generated/android/c++/JVariant_NullType_HybridIOSWorkletsModuleProxyHolderSpec.cpp
+  ../nitrogen/generated/android/c++/JHybridUiListViewSpec.cpp
+  ../nitrogen/generated/android/c++/views/JHybridUiListViewStateUpdater.cpp
+  ../nitrogen/generated/android/c++/JHybridViewHolderSpec.cpp
+  ../nitrogen/generated/android/c++/views/JHybridViewHolderStateUpdater.cpp
+)
+
+# From node_modules/react-native/ReactAndroid/cmake-utils/folly-flags.cmake
+# Used in node_modules/react-native/ReactAndroid/cmake-utils/ReactNative-application.cmake
+target_compile_definitions(
+  ReactNativeList PRIVATE
+  -DFOLLY_NO_CONFIG=1
+  -DFOLLY_HAVE_CLOCK_GETTIME=1
+  -DFOLLY_USE_LIBCPP=1
+  -DFOLLY_CFG_NO_COROUTINES=1
+  -DFOLLY_MOBILE=1
+  -DFOLLY_HAVE_RECVMMSG=1
+  -DFOLLY_HAVE_PTHREAD=1
+  # Once we target android-23 above, we can comment
+  # the following line. NDK uses GNU style stderror_r() after API 23.
+  -DFOLLY_HAVE_XSI_STRERROR_R=1
+)
+
+# Add all libraries required by the generated specs
+find_package(fbjni REQUIRED) # <-- Used for communication between Java <-> C++
+find_package(ReactAndroid REQUIRED) # <-- Used to set up React Native bindings (e.g. CallInvoker/TurboModule)
+find_package(react-native-nitro-modules REQUIRED) # <-- Used to create all HybridObjects and use the Nitro core library
+
+# Link all libraries together
+target_link_libraries(
+        ReactNativeList
+        fbjni::fbjni                              # <-- Facebook C++ JNI helpers
+        ReactAndroid::jsi                         # <-- RN: JSI
+        react-native-nitro-modules::NitroModules  # <-- NitroModules Core :)
+)
+
+# Link react-native (different prefab between RN 0.75 and RN 0.76)
+if(ReactAndroid_VERSION_MINOR GREATER_EQUAL 76)
+    target_link_libraries(
+        ReactNativeList
+        ReactAndroid::reactnative                 # <-- RN: Native Modules umbrella prefab
+    )
+else()
+    target_link_libraries(
+        ReactNativeList
+        ReactAndroid::react_nativemodule_core     # <-- RN: TurboModules Core
+    )
+endif()

package/nitrogen/generated/android/ReactNativeList+autolinking.gradle

@@ -0,0 +1,27 @@
+///
+/// ReactNativeList+autolinking.gradle
+/// This file was generated by nitrogen. DO NOT MODIFY THIS FILE.
+/// https://github.com/mrousavy/nitro
+/// Copyright © Marc Rousavy @ Margelo
+///
+
+/// This is a Gradle file that adds all files generated by Nitrogen
+/// to the current Gradle project.
+///
+/// To use it, add this to your build.gradle:
+/// ```gradle
+/// apply from: '../nitrogen/generated/android/ReactNativeList+autolinking.gradle'
+/// ```
+
+logger.warn("[NitroModules] 🔥 ReactNativeList is boosted by nitro!")
+
+android {
+  sourceSets {
+    main {
+      java.srcDirs += [
+        // Nitrogen files
+        "${project.projectDir}/../nitrogen/generated/android/kotlin"
+      ]
+    }
+  }
+}