react-native-tvos 0.85.3-0 → 0.86.0-0

package/scripts/react_native_pods.rb

@@ -78,7 +78,7 @@ def use_react_native! (
   react_native_path = Pod::Config.instance.installation_root.join(path)
   prefix = react_native_path.relative_path_from(Pod::Config.instance.installation_root)
 
-  hermes_enabled= true
+  hermes_enabled= !use_third_party_jsc()
   # Set the app_path as env variable so the podspecs can access it.
   ENV['APP_PATH'] = app_path
   ENV['REACT_NATIVE_PATH'] = react_native_path.to_s
@@ -159,6 +159,7 @@ def use_react_native! (
   pod 'React-idlecallbacksnativemodule', :path => "#{prefix}/ReactCommon/react/nativemodule/idlecallbacks"
   pod 'React-intersectionobservernativemodule', :path => "#{prefix}/ReactCommon/react/nativemodule/intersectionobserver"
   pod 'React-mutationobservernativemodule', :path => "#{prefix}/ReactCommon/react/nativemodule/mutationobserver"
+  pod 'React-viewtransitionnativemodule', :path => "#{prefix}/ReactCommon/react/nativemodule/viewtransition"
   pod 'React-webperformancenativemodule', :path => "#{prefix}/ReactCommon/react/nativemodule/webperformance"
   pod 'React-domnativemodule', :path => "#{prefix}/ReactCommon/react/nativemodule/dom"
   pod 'React-defaultsnativemodule', :path => "#{prefix}/ReactCommon/react/nativemodule/defaults"
@@ -531,7 +532,29 @@ def react_native_post_install(
   ReactNativePodsUtils.fix_library_search_paths(installer)
   ReactNativePodsUtils.update_search_paths(installer)
   ReactNativePodsUtils.set_build_setting(installer, build_setting: "USE_HERMES", value: use_hermes())
-  ReactNativePodsUtils.set_build_setting(installer, build_setting: "REACT_NATIVE_PATH", value: File.join("${PODS_ROOT}", "..", react_native_path))
+  # Compute REACT_NATIVE_PATH relative to PODS_ROOT using real (physical)
+  # paths, so the relative traversal is correct even when Pods/ is a symlink.
+  pods_dir_real = Pathname.new(Pod::Config.instance.sandbox_root.to_s).realpath
+  rn_absolute = File.expand_path(react_native_path, Pod::Config.instance.installation_root.to_s)
+  rn_real = Pathname.new(rn_absolute).realpath
+  rn_relative_to_pods = rn_real.relative_path_from(pods_dir_real)
+  ReactNativePodsUtils.set_build_setting(installer, build_setting: "REACT_NATIVE_PATH", value: File.join("${PODS_ROOT}", rn_relative_to_pods.to_s))
+  # Store the Podfile directory as a build setting so that shell scripts can
+  # locate it without hardcoding an absolute path. Use Xcode variable
+  # substitution per-project so the value persisted in project.pbxproj is
+  # portable across machines: $(SRCROOT) is the Podfile dir for user projects
+  # (also avoids the PODS_ROOT/.. traversal that breaks when Pods/ is a
+  # symlink), and $(SRCROOT)/.. for the Pods project.
+  installer.aggregate_targets.map(&:user_project).uniq(&:path).each do |user_project|
+    user_project.build_configurations.each do |config|
+      config.build_settings['PODFILE_DIR'] = '$(SRCROOT)'
+    end
+    user_project.save
+  end
+  installer.pods_project.build_configurations.each do |config|
+    config.build_settings['PODFILE_DIR'] = '$(SRCROOT)/..'
+  end
+  installer.pods_project.save
   ReactNativePodsUtils.set_build_setting(installer, build_setting: "SWIFT_ACTIVE_COMPILATION_CONDITIONS", value: ['$(inherited)', 'DEBUG'], config_name: "Debug")
 
   if (ENV['RCT_REMOVE_LEGACY_ARCH'] == '1')

package/scripts/react_native_pods_utils/script_phases.rb

@@ -35,9 +35,15 @@ end
 
 def get_script_template(react_native_path, export_vars={})
     template =<<~EOS
-        pushd "$PODS_ROOT/../" > /dev/null
-        RCT_SCRIPT_POD_INSTALLATION_ROOT=$(pwd)
-        popd >/dev/null
+        # Use PODFILE_DIR (set by react_native_post_install) to locate the
+        # Podfile directory. PODS_ROOT/.. does not work when Pods/ is a symlink.
+        if [ -n "$PODFILE_DIR" ]; then
+          RCT_SCRIPT_POD_INSTALLATION_ROOT="$PODFILE_DIR"
+        else
+          pushd "$PODS_ROOT/../" > /dev/null
+          RCT_SCRIPT_POD_INSTALLATION_ROOT=$(pwd)
+          popd >/dev/null
+        fi
         <% export_vars.each do |(varname, value)| %>
         export <%= varname -%>=<%= value -%>
         <% end %>

package/scripts/replace-rncore-version.js

@@ -73,6 +73,18 @@ function replaceRNCoreConfiguration(
   const tmpExtractDir = path.join(tmpDir, 'React-Core-prebuilt');
   fs.mkdirSync(tmpExtractDir, {recursive: true});
 
+  // Preserve Expo-generated modulemap before replacing directories
+  const useFrameworksModulemapName = 'React-use-frameworks.modulemap';
+  const useFrameworksModulemapPath = path.join(
+    finalLocation,
+    useFrameworksModulemapName,
+  );
+  let savedModulemap = null;
+  if (fs.existsSync(useFrameworksModulemapPath)) {
+    console.log('Preserving', useFrameworksModulemapName);
+    savedModulemap = fs.readFileSync(useFrameworksModulemapPath);
+  }
+
   try {
     console.log('Extracting the tarball to temp dir', tarballURLPath);
     const result = spawnSync(
@@ -135,6 +147,14 @@ function replaceRNCoreConfiguration(
   } finally {
     // Clean up temp directory
     fs.rmSync(tmpDir, {force: true, recursive: true});
+
+    // Restore Expo-generated modulemap after directory replacement.
+    // Runs in finally so it is not skipped if mv/cp partially fails.
+    if (savedModulemap != null) {
+      const restoredPath = path.join(finalLocation, useFrameworksModulemapName);
+      fs.writeFileSync(restoredPath, savedModulemap);
+      console.log('Restored', useFrameworksModulemapName);
+    }
   }
 }
 

package/scripts/xcode/with-environment.sh

@@ -17,7 +17,13 @@ NODE_BINARY=$(command -v node || echo "")
 export NODE_BINARY
 
 # Override the default with the global environment
-ENV_PATH="$PODS_ROOT/../.xcode.env"
+# Use PODFILE_DIR (set by react_native_post_install) to locate .xcode.env.
+# PODS_ROOT/.. does not work when Pods/ is a symlink.
+if [ -n "$PODFILE_DIR" ]; then
+    ENV_PATH="$PODFILE_DIR/.xcode.env"
+else
+    ENV_PATH="$PODS_ROOT/../.xcode.env"
+fi
 if [ -f "$ENV_PATH" ]; then
     source "$ENV_PATH"
 fi

package/sdks/.hermesv1version

@@ -1 +1 @@
-hermes-v250829098.0.10
+hermes-v250829098.0.14

package/sdks/.hermesversion

@@ -1 +1 @@
-hermes-v0.16.0
+hermes-v0.17.0

package/sdks/hermes-engine/hermes-utils.rb

@@ -3,6 +3,7 @@
 # This source code is licensed under the MIT license found in the
 # LICENSE file in the root directory of this source tree.
 
+require 'digest'
 require 'net/http'
 require 'rexml/document'
 require_relative '../../scripts/cocoapods/utils.rb'
@@ -247,16 +248,102 @@ def download_stable_hermes(react_native_path, version, configuration)
     download_hermes_tarball(react_native_path, tarball_url, version, configuration)
 end
 
+def shared_cache_dir()
+    return File.join(Dir.home, "Library", "Caches", "ReactNative")
+end
+
+def fetch_maven_sha1(tarball_url)
+    sha1 = `curl -sL "#{tarball_url}.sha1"`.strip
+    return sha1.downcase if $?.success? && sha1.match?(/\A[a-fA-F0-9]{40}\z/)
+    nil
+end
+
+def skip_caches?
+    ENV['RCT_SKIP_CACHES'] == '1'
+end
+
+def validate_hermes_tarball(path, tarball_url)
+    expected_sha1 = fetch_maven_sha1(tarball_url)
+    basename = File.basename(path)
+    if expected_sha1.nil?
+      hermes_log("SHA1 not available from Maven for #{basename}. Skipping validation.", :info)
+      return true
+    end
+    actual_sha1 = Digest::SHA1.file(path).hexdigest
+    if actual_sha1 == expected_sha1
+      hermes_log("SHA1 verified for #{basename}", :info)
+      return true
+    end
+    hermes_log("SHA1 mismatch for #{basename}: expected #{expected_sha1}, got #{actual_sha1}", :error)
+    return false
+end
+
 def download_hermes_tarball(react_native_path, tarball_url, version, configuration)
-    destination_path = configuration == nil ?
-        "#{artifacts_dir()}/hermes-ios-#{version}.tar.gz" :
-        "#{artifacts_dir()}/hermes-ios-#{version}-#{configuration}.tar.gz"
+    filename = configuration == nil ?
+        "hermes-ios-#{version}.tar.gz" :
+        "hermes-ios-#{version}-#{configuration}.tar.gz"
+    destination_path = "#{artifacts_dir()}/#{filename}"
+
+    if File.exist?(destination_path)
+      hermes_log("Tarball #{filename} already exists in Pods. Skipping download.", :info)
+      return destination_path
+    end
+
+    `mkdir -p "#{artifacts_dir()}"`
+
+    if skip_caches?
+      hermes_log("RCT_SKIP_CACHES is set. Downloading #{filename} directly (bypassing shared cache).", :info)
+      tmp_file = "#{artifacts_dir()}/hermes-ios.download"
+      `curl -A "react-native-#{version}" "#{tarball_url}" -Lo "#{tmp_file}" && mv "#{tmp_file}" "#{destination_path}"`
+      unless File.exist?(destination_path)
+        abort("[Hermes] Failed to download #{filename} from #{tarball_url}. Aborting.")
+      end
+      return destination_path
+    end
 
-    unless File.exist?(destination_path)
+    cached_path = File.join(shared_cache_dir(), filename)
+    if File.exist?(cached_path)
+      hermes_log("Verifying checksum for cached #{filename}...", :info)
+      if validate_hermes_tarball(cached_path, tarball_url)
+        hermes_log("Cache hit: copying #{filename} from shared cache (#{shared_cache_dir()})", :info)
+        FileUtils.cp(cached_path, destination_path)
+      else
+        hermes_log("Shared cache file #{filename} failed SHA verification. Re-downloading.", :info)
+        File.delete(cached_path)
+        tmp_file = "#{artifacts_dir()}/hermes-ios.download"
+        `curl -A "react-native-#{version}" "#{tarball_url}" -Lo "#{tmp_file}" && mv "#{tmp_file}" "#{destination_path}"`
+        unless File.exist?(destination_path)
+          abort("[Hermes] Failed to download #{filename} from #{tarball_url}. Aborting.")
+        end
+        hermes_log("Verifying checksum for downloaded #{filename}...", :info)
+        if validate_hermes_tarball(destination_path, tarball_url)
+          FileUtils.cp(destination_path, cached_path)
+          hermes_log("Saved #{filename} to shared cache (#{shared_cache_dir()})", :info)
+        else
+          File.delete(destination_path) if File.exist?(destination_path)
+          abort("[Hermes] Downloaded file #{filename} failed SHA verification. Aborting.")
+        end
+      end
+    else
+      hermes_log("Cache miss: downloading #{filename} from #{tarball_url}", :info)
       # Download to a temporary file first so we don't cache incomplete downloads.
       tmp_file = "#{artifacts_dir()}/hermes-ios.download"
-      `mkdir -p "#{artifacts_dir()}" && curl "#{tarball_url}" -Lo "#{tmp_file}" && mv "#{tmp_file}" "#{destination_path}"`
+      `curl -A "react-native-#{version}" "#{tarball_url}" -Lo "#{tmp_file}" && mv "#{tmp_file}" "#{destination_path}"`
+      unless File.exist?(destination_path)
+        abort("[Hermes] Failed to download #{filename} from #{tarball_url}. Aborting.")
+      end
+      hermes_log("Verifying checksum for downloaded #{filename}...", :info)
+      if validate_hermes_tarball(destination_path, tarball_url)
+        # Save to shared cache for future use
+        `mkdir -p "#{shared_cache_dir()}"`
+        FileUtils.cp(destination_path, cached_path)
+        hermes_log("Saved #{filename} to shared cache (#{shared_cache_dir()})", :info)
+      else
+        File.delete(destination_path) if File.exist?(destination_path)
+        abort("[Hermes] Downloaded file #{filename} failed SHA verification. Aborting.")
+      end
     end
+
     return destination_path
 end
 

package/sdks/hermes-engine/version.properties

@@ -1,2 +1,2 @@
-HERMES_VERSION_NAME=0.16.0
-HERMES_V1_VERSION_NAME=250829098.0.10
+HERMES_VERSION_NAME=0.17.0
+HERMES_V1_VERSION_NAME=250829098.0.14

package/src/private/animated/NativeAnimatedValidation.js

@@ -20,7 +20,7 @@ import {
 } from '../../../Libraries/Animated/NativeAnimatedAllowlist';
 
 export function validateInterpolation<
-  OutputT: InterpolationConfigSupportedOutputType,
+  OutputT extends InterpolationConfigSupportedOutputType,
 >(config: InterpolationConfigType<OutputT>): void {
   for (const key in config) {
     if (key !== 'debugID' && !isSupportedInterpolationParam(key)) {

package/src/private/animated/createAnimatedPropsHook.js

@@ -36,7 +36,7 @@ type ReducedProps<TProps> = {
 };
 type CallbackRef<T> = T => unknown;
 
-export type AnimatedPropsHook = <TProps: {...}, TInstance>(
+export type AnimatedPropsHook = <TProps extends {...}, TInstance>(
   props: TProps,
 ) => [ReducedProps<TProps>, CallbackRef<TInstance | null>];
 
@@ -55,7 +55,7 @@ export default function createAnimatedPropsHook(
   const useNativePropsInFabric =
     ReactNativeFeatureFlags.shouldUseSetNativePropsInFabric();
 
-  return function useAnimatedProps<TProps: {...}, TInstance>(
+  return function useAnimatedProps<TProps extends {...}, TInstance>(
     props: TProps,
   ): [ReducedProps<TProps>, CallbackRef<TInstance | null>] {
     const [, scheduleUpdate] = useReducer<number, void>(count => count + 1, 0);

package/src/private/components/virtualcollection/FlingConstants.js

@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ * @format
+ */
+
+import Dimensions from '../../../../Libraries/Utilities/Dimensions';
+
+export const DEFAULT_INITIAL_NUM_TO_RENDER = 7;
+
+export const INITIAL_NUM_TO_RENDER: number = DEFAULT_INITIAL_NUM_TO_RENDER;
+
+export const FALLBACK_ESTIMATED_HEIGHT: number =
+  Dimensions.get('window').height / DEFAULT_INITIAL_NUM_TO_RENDER;
+
+export const FALLBACK_ESTIMATED_WIDTH: number =
+  Dimensions.get('window').width / DEFAULT_INITIAL_NUM_TO_RENDER;

package/src/private/components/virtualcollection/Virtual.js

@@ -0,0 +1,62 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict
+ * @format
+ */
+
+/**
+ * An item to virtualize must be an item. It can optionally have a string `id`
+ * parameter, but that is not currently represented because it makes the Flow
+ * types more complicated.
+ */
+export interface Item {}
+
+/**
+ * An interface for a collection of items, without requiring that each item be
+ * eagerly (or lazily) allocated.
+ */
+export interface VirtualCollection<+T extends Item> {
+  /**
+   * The number of items in the collection. This can either be a numeric scalar
+   * or a getter function that is computed on access. However, it should remain
+   * constant for the lifetime of this object.
+   */
+  +size: number;
+
+  /**
+   * If an item exists at the supplied index, this should return a consistent
+   * item for the lifetime of this object. If an item does not exist at the
+   * supplied index, this should throw an error.
+   */
+  at(index: number): T;
+}
+
+/**
+ * An implementation of `VirtualCollection` that wraps an array. Although easy to
+ * use, this is not recommended for larger arrays because each element of an
+ * array is eagerly allocated.
+ */
+export class VirtualArray<+T extends Item> implements VirtualCollection<T> {
+  +size: number;
+  +at: (index: number) => T;
+
+  constructor(input: Readonly<$ArrayLike<T>>) {
+    const array = [...input];
+
+    // NOTE: This is implemented this way because Flow does not permit `input`
+    // to be a read-only instance property (even a private one).
+    this.size = array.length;
+    this.at = (index: number): T => {
+      if (index < 0 || index >= this.size) {
+        throw new RangeError(
+          `Cannot get index ${index} from a collection of size ${this.size}`,
+        );
+      }
+      return array[index];
+    };
+  }
+}

package/src/private/components/virtualcollection/VirtualCollectionView.js

@@ -0,0 +1,238 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ * @format
+ */
+
+import type {ViewStyleProp} from '../../../../Libraries/StyleSheet/StyleSheet';
+import type {ModeChangeEvent} from '../virtualview/VirtualView';
+import type {Item, VirtualCollection} from './Virtual';
+
+import VirtualView from '../virtualview/VirtualView';
+import {
+  VirtualViewMode,
+  createHiddenVirtualView,
+} from '../virtualview/VirtualView';
+import FlingItemOverlay from './debug/FlingItemOverlay';
+import * as React from 'react';
+import {useCallback, useMemo, useState} from 'react';
+
+export type VirtualCollectionLayoutComponent<TLayoutProps extends {...}> =
+  component(
+    children: ReadonlyArray<React.Node>,
+    spacer: React.Node,
+    ...TLayoutProps
+  );
+
+export type VirtualCollectionGenerator = Readonly<{
+  initial: Readonly<{
+    itemCount: number,
+    spacerStyle: (itemCount: number) => ViewStyleProp,
+  }>,
+  next: (event: ModeChangeEvent) => {
+    itemCount: number,
+    spacerStyle: (itemCount: number) => ViewStyleProp,
+  },
+}>;
+
+export type VirtualCollectionViewComponent<TLayoutProps extends {...}> =
+  component<+TItem extends Item>(
+    children: (item: TItem, key: string) => React.Node,
+    items: VirtualCollection<TItem>,
+    itemToKey?: (TItem) => string,
+    removeClippedSubviews?: boolean,
+    testID?: ?string,
+    ...TLayoutProps
+  );
+
+/**
+ * Creates a component that virtually renders a collection of items and manages
+ * lazy rendering, memoization, and pagination. The resulting component accepts
+ * the following base props:
+ *
+ * - `children`: A function maps an item to a React node.
+ * - `items`: A collection of items to render.
+ * - `itemToKey`: A function maps an item to a unique key.
+ *
+ * The first argument is a layout component that defines layout of the item and
+ * spacer. It always receives the following props:
+ *
+ * - `children`: An array of React nodes (for items rendered so far).
+ * - `spacer`: A React node (estimates layout for items not yet rendered).
+ *
+ * The layout component must render `children` and `spacer`. It can also define
+ * additional props that will be passed through from the resulting component.
+ *
+ * The second argument is a generator that defines the initial rendering and
+ * pagination behavior. The initial rendering behavior is defined by the
+ * `initial` property with the following properties:
+ *
+ * - `itemCount`: Number of items to render initially.
+ * - `spacerStyle`: A function that estimates the layout of the spacer. It
+ *   receives the number of items being rendered as an argument.
+ *
+ * The pagination behavior is defined by the `next` function that receives a
+ * `ModeChangeEvent` and then returns an object with the following properties:
+ *
+ * - `itemCount`: Number of additional items needed to fill `thresholdRect`.
+ * - `spacerStyle`: A function that estimates the layout of the spacer. It
+ *   receives the number of items being rendered as an argument.
+ *
+ */
+export function createVirtualCollectionView<TLayoutProps extends {...}>(
+  VirtualLayout: VirtualCollectionLayoutComponent<TLayoutProps>,
+  {initial, next}: VirtualCollectionGenerator,
+): VirtualCollectionViewComponent<TLayoutProps> {
+  component VirtualCollectionView<+TItem extends Item>(
+    children: (item: TItem, key: string) => React.Node,
+    items: VirtualCollection<TItem>,
+    itemToKey: TItem => string = defaultItemToKey,
+    removeClippedSubviews: boolean = false,
+    testID?: ?string,
+    ...layoutProps: TLayoutProps
+  ) {
+    const [desiredItemCount, setDesiredItemCount] = useState(
+      Math.ceil(initial.itemCount),
+    );
+
+    const renderItem = useMemoCallback(
+      useCallback(
+        (item: TItem) => {
+          const key = itemToKey(item);
+          return (
+            <VirtualView
+              key={key}
+              nativeID={key}
+              removeClippedSubviews={removeClippedSubviews}>
+              {FlingItemOverlay == null ? null : (
+                <FlingItemOverlay nativeID={key} />
+              )}
+              {children(item, key)}
+            </VirtualView>
+          );
+        },
+        [children, itemToKey, removeClippedSubviews],
+      ),
+    );
+
+    const mountedItemCount = Math.min(desiredItemCount, items.size);
+    const mountedItemViews = Array.from(
+      {length: mountedItemCount},
+      (_, index) => renderItem(items.at(index)),
+    );
+
+    const virtualItemCount = items.size - mountedItemCount;
+    const virtualItemSpacer = useMemo(
+      () =>
+        virtualItemCount === 0 ? null : (
+          <VirtualCollectionSpacer
+            nativeID={`${testID ?? ''}:Spacer`}
+            virtualItemCount={virtualItemCount}
+            onRenderMoreItems={(itemCount: number) => {
+              setDesiredItemCount(
+                prevElementCount => prevElementCount + itemCount,
+              );
+            }}
+          />
+        ),
+      [virtualItemCount, testID],
+    );
+
+    return (
+      <VirtualLayout {...layoutProps} spacer={virtualItemSpacer}>
+        {mountedItemViews}
+      </VirtualLayout>
+    );
+  }
+
+  function createSpacerView(spacerStyle: (itemCount: number) => ViewStyleProp) {
+    component SpacerView(
+      itemCount: number,
+      ref?: React.RefSetter<React.RefOf<VirtualView> | null>,
+      ...props: Omit<React.PropsOf<VirtualView>, 'ref'>
+    ) {
+      const HiddenVirtualView = useMemo(
+        () => createHiddenVirtualView(spacerStyle(itemCount)),
+        [itemCount],
+      );
+      return <HiddenVirtualView ref={ref} {...props} />;
+    }
+    return SpacerView;
+  }
+
+  const initialSpacerView = {
+    SpacerView: createSpacerView(initial.spacerStyle),
+  };
+
+  component VirtualCollectionSpacer(
+    nativeID: string,
+    virtualItemCount: number,
+
+    onRenderMoreItems: (itemCount: number) => void,
+  ) {
+    // NOTE: Store `SpacerView` in a wrapper object because otherwise, `useState`
+    // will confuse `SpacerView` (a component) as being an updater function.
+    const [{SpacerView}, setSpacerView] = useState(initialSpacerView);
+
+    const handleModeChange = (event: ModeChangeEvent) => {
+      if (event.mode === VirtualViewMode.Hidden) {
+        // This should never happen; this starts hidden and otherwise unmounts.
+        return;
+      }
+      const {itemCount, spacerStyle} = next(event);
+
+      // Refine the estimated item size when computing spacer size.
+      setSpacerView({
+        SpacerView: createSpacerView(spacerStyle),
+      });
+
+      // Render more items to fill `thresholdRect`.
+      onRenderMoreItems(Math.min(Math.ceil(itemCount), virtualItemCount));
+    };
+
+    return (
+      <SpacerView
+        itemCount={virtualItemCount}
+        nativeID={nativeID}
+        onModeChange={handleModeChange}
+      />
+    );
+  }
+
+  return VirtualCollectionView;
+}
+
+hook useMemoCallback<TInput extends interface {}, TOutput>(
+  callback: TInput => TOutput,
+): TInput => TOutput {
+  return useMemo(() => memoize(callback), [callback]);
+}
+
+function memoize<TInput extends interface {}, TOutput>(
+  callback: TInput => TOutput,
+): TInput => TOutput {
+  const cache = new WeakMap<TInput, TOutput>();
+  return (input: TInput) => {
+    let output = cache.get(input);
+    if (output == null) {
+      output = callback(input);
+      cache.set(input, output);
+    }
+    return output;
+  };
+}
+
+function defaultItemToKey(item: Item): string {
+  // $FlowExpectedError[prop-missing] - Flow cannot model this dynamic pattern.
+  const key = item.key;
+  if (typeof key !== 'string') {
+    throw new TypeError(
+      `Expected 'id' of item to be a string, got: ${typeof key}`,
+    );
+  }
+  return key;
+}

package/src/private/components/virtualcollection/column/VirtualColumn.js

@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ * @format
+ */
+
+import type {Item, VirtualCollection} from '../Virtual';
+
+import {createVirtualCollectionView} from '../VirtualCollectionView';
+import VirtualColumnGenerator from './VirtualColumnGenerator';
+import * as React from 'react';
+
+component VirtualColumnLayout(
+  children: ReadonlyArray<React.Node>,
+  spacer: React.Node,
+) {
+  return (
+    <>
+      {children}
+      {spacer}
+    </>
+  );
+}
+
+const VirtualColumn = createVirtualCollectionView(
+  VirtualColumnLayout,
+  VirtualColumnGenerator,
+);
+
+// TODO: Figure out component generic resolution.
+// @see https://fb.workplace.com/groups/flow/posts/29355518614070041
+// export default VirtualColumn as VirtualCollectionViewComponent<VirtualColumnLayoutProps>;
+export default VirtualColumn as component<+TItem extends Item>(
+  children: (item: TItem, key: string) => React.Node,
+  items: VirtualCollection<TItem>,
+  itemToKey?: (TItem) => string,
+  removeClippedSubviews?: boolean,
+  testID?: ?string,
+);