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

package/src/ListLayout.ts

@@ -0,0 +1,95 @@
+import { NitroModules } from 'react-native-nitro-modules'
+import { useEffect, useMemo } from 'react'
+import type { NativeListLayout } from './specs/NativeListLayout.nitro'
+import type {
+  NativeLinearListLayout,
+  NativeLinearListLayoutConfig,
+} from './specs/NativeLinearListLayout.nitro'
+
+type LinearListLayoutBaseConfig = Omit<
+  Partial<NativeLinearListLayoutConfig>,
+  'iosConfig'
+>
+
+export type ItemSizeEstimate =
+  | {
+      width: number
+      height?: number
+    }
+  | {
+      width?: number
+      height: number
+    }
+
+export type LinearListLayoutIOSConfig = {
+  estimatedItemSize?: ItemSizeEstimate
+}
+
+export type LinearListLayoutConfig = LinearListLayoutBaseConfig & {
+  iosConfig?: LinearListLayoutIOSConfig
+}
+
+export type ListLayout = {
+  __nativeLayout: NativeListLayout
+  release(): void
+}
+
+const defaultLinearListLayoutConfig: NativeLinearListLayoutConfig = {
+  topInset: 16,
+  bottomInset: 16,
+  itemSpacing: 12,
+  itemHorizontalInset: 0,
+  itemVerticalInset: 0,
+}
+
+function normalizeLinearConfig(
+  config: LinearListLayoutConfig = {}
+): NativeLinearListLayoutConfig {
+  return {
+    topInset: config.topInset ?? defaultLinearListLayoutConfig.topInset,
+    bottomInset:
+      config.bottomInset ?? defaultLinearListLayoutConfig.bottomInset,
+    itemSpacing:
+      config.itemSpacing ?? defaultLinearListLayoutConfig.itemSpacing,
+    itemHorizontalInset:
+      config.itemHorizontalInset ??
+      defaultLinearListLayoutConfig.itemHorizontalInset,
+    itemVerticalInset:
+      config.itemVerticalInset ??
+      defaultLinearListLayoutConfig.itemVerticalInset,
+    iosConfig: config.iosConfig,
+  }
+}
+
+export function createLinearListLayout(
+  config?: LinearListLayoutConfig
+): ListLayout {
+  const nativeLayout = NitroModules.createHybridObject<NativeLinearListLayout>(
+    'NativeLinearListLayout'
+  )
+  const normalizedConfig = normalizeLinearConfig(config)
+  nativeLayout.setConfig(normalizedConfig)
+
+  return {
+    __nativeLayout: nativeLayout,
+    release() {
+      nativeLayout.dispose()
+    },
+  }
+}
+
+export function useLinearListLayout(
+  config?: LinearListLayoutConfig
+): ListLayout {
+  const layout = useMemo(() => {
+    return createLinearListLayout(config)
+  }, [config])
+
+  useEffect(() => {
+    return () => {
+      layout.release()
+    }
+  }, [layout])
+
+  return layout
+}

package/src/UiListModule.ts

@@ -0,0 +1,5 @@
+import { NitroModules } from 'react-native-nitro-modules'
+import { UiListModule } from './specs/UIListModule.nitro'
+
+export const uiListModule =
+  NitroModules.createHybridObject<UiListModule>('UiListModule')

package/src/hooks/useChangeEffect.ts

@@ -0,0 +1,50 @@
+import { useEffect, useRef } from 'react'
+import type React from 'react'
+
+function areDependencyListsEqual(
+  currentDependencies: React.DependencyList,
+  previousDependencies: React.DependencyList
+) {
+  if (currentDependencies.length !== previousDependencies.length) {
+    return false
+  }
+
+  for (let index = 0; index < currentDependencies.length; index += 1) {
+    const currentDependency = currentDependencies[index]
+    const previousDependency = previousDependencies[index]
+    if (!Object.is(currentDependency, previousDependency)) {
+      return false
+    }
+  }
+
+  return true
+}
+
+/**
+ * Only runs if one of the dependencies has changed, but not on the initial render!
+ */
+export function useChangeEffect(
+  effect: React.EffectCallback,
+  dependencies: React.DependencyList
+) {
+  const previousDependencies = useRef<React.DependencyList | null>(null)
+
+  useEffect(() => {
+    const lastDependencies = previousDependencies.current
+    previousDependencies.current = dependencies
+    if (lastDependencies == null) {
+      return
+    }
+
+    const dependenciesAreEqual = areDependencyListsEqual(
+      dependencies,
+      lastDependencies
+    )
+    if (dependenciesAreEqual) {
+      return
+    }
+
+    return effect()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, dependencies)
+}

package/src/index.tsx

@@ -0,0 +1,49 @@
+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'
+
+export { ViewHolder } from './specs/ViewHolder.nitro'
+export { IOSWorkletsModuleProxyHolder } from './specs/IOSWorkletsModuleProxyHolder.nitro'
+export type { NativeListItem } from './specs/NativeListDataSource.nitro'
+export type { ListProps, ListRenderer, ListRenderers } from './views/List'
+export { createListDataSource, useListDataSource } from './ListDataSource'
+export type {
+  ListContentEqualByType,
+  ListDataSource,
+  ListDataSourceConfig,
+  ListItem,
+  ListItemForType,
+  ListItemSize,
+  ListItemType,
+  ListKey,
+} from './ListDataSource'
+export { createLinearListLayout, useLinearListLayout } from './ListLayout'
+export type {
+  ItemSizeEstimate,
+  LinearListLayoutConfig,
+  LinearListLayoutIOSConfig,
+  ListLayout,
+} from './ListLayout'
+
+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.setupRuntime(iosWorkletsModuleHolder)
+
+    // This will setup the react instance on the UI runtime:
+    getReactFabricRenderer()
+  })
+}
+setup()
+
+export { List, uiListModule, uiManagerHelper }

package/src/privateGlobals.ts

@@ -0,0 +1,20 @@
+'use strict'
+
+import type * as ReactModule from 'react'
+import type { UiManagerBinding } from './specs/UIManagerHelper.nitro'
+
+declare global {
+  var log: (...args: unknown[]) => void
+  var nativeFabricUIManager: UiManagerBinding
+
+  interface GlobalThis {
+    React: typeof ReactModule
+  }
+
+  interface Performance {
+    now(): number
+  }
+  var performance: Performance
+}
+
+export {}

package/src/renderer/fabric/RenderHelper.ts

@@ -0,0 +1,29 @@
+import { NitroModules } from 'react-native-nitro-modules'
+import { uiListModule } from '../../UiListModule'
+import { uiManagerHelper } from './UiManagerHelper'
+import type { ShadowNodeList } from '../../specs/UIManagerHelper.nitro'
+
+export const uiListModuleBoxed = NitroModules.box(uiListModule)
+const capturedOnJS = global.nativeFabricUIManager
+const uiManagerHelperBoxed = NitroModules.box(uiManagerHelper)
+
+export function completeRootSyncWorklet(
+  surfaceId: number,
+  childSet: ShadowNodeList
+) {
+  'worklet'
+  const uiManagerHelperUnboxed = uiManagerHelperBoxed.unbox()
+  uiManagerHelperUnboxed.completeRootSync(capturedOnJS, surfaceId, childSet)
+}
+
+export function registerManagedSurfaceWorklet(surfaceId: number) {
+  'worklet'
+  const uiManagerHelperUnboxed = uiManagerHelperBoxed.unbox()
+  uiManagerHelperUnboxed.registerManagedSurface(surfaceId)
+}
+
+export function unregisterManagedSurfaceWorklet(surfaceId: number) {
+  'worklet'
+  const uiManagerHelperUnboxed = uiManagerHelperBoxed.unbox()
+  uiManagerHelperUnboxed.unregisterManagedSurface(surfaceId)
+}

package/src/renderer/fabric/UiManagerHelper.ts

@@ -0,0 +1,5 @@
+import { NitroModules } from 'react-native-nitro-modules'
+import { UiManagerHelper } from '../../specs/UIManagerHelper.nitro'
+
+export const uiManagerHelper =
+  NitroModules.createHybridObject<UiManagerHelper>('UiManagerHelper')