react-native-tvos 0.78.0-0rc4 → 0.79.0-0

package/scripts/react_native_pods.rb

@@ -73,6 +73,10 @@ def use_react_native! (
   ENV['APP_PATH'] = app_path
   ENV['REACT_NATIVE_PATH'] = path
 
+  # We set RCT_SKIP_CODEGEN to true, if the user wants to skip the running Codegen step from Cocoapods.
+  # This is needed as part of our migration away from cocoapods
+  ENV['RCT_SKIP_CODEGEN'] = ENV['RCT_SKIP_CODEGEN'] == '1' || ENV['RCT_IGNORE_PODS_DEPRECATION'] == '1' ? '1' : '0'
+
   ReactNativePodsUtils.check_minimum_required_xcode()
 
   # Current target definition is provided by Cocoapods and it refers to the target
@@ -85,18 +89,18 @@ def use_react_native! (
   # Better to rely and enable this environment flag if the new architecture is turned on using flags.
   relative_path_from_current = Pod::Config.instance.installation_root.relative_path_from(Pathname.pwd)
   react_native_version = NewArchitectureHelper.extract_react_native_version(File.join(relative_path_from_current, path))
-  ENV['RCT_NEW_ARCH_ENABLED'] = NewArchitectureHelper.compute_new_arch_enabled(new_arch_enabled, react_native_version)
   fabric_enabled = fabric_enabled || NewArchitectureHelper.new_arch_enabled
 
   ENV['RCT_FABRIC_ENABLED'] = fabric_enabled ? "1" : "0"
   ENV['USE_HERMES'] = hermes_enabled ? "1" : "0"
   ENV['RCT_AGGREGATE_PRIVACY_FILES'] = privacy_file_aggregation_enabled ? "1" : "0"
+  ENV["RCT_NEW_ARCH_ENABLED"] = new_arch_enabled ? "1" : "0"
 
   prefix = path
 
   ReactNativePodsUtils.warn_if_not_on_arm64()
 
-  build_codegen!(prefix, relative_path_from_current)
+  Pod::UI.puts "Configuring the target with the #{new_arch_enabled ? "New" : "Legacy"} Architecture\n"
 
   # The Pods which should be included in all projects
   pod 'FBLazyVector', :path => "#{prefix}/Libraries/FBLazyVector"
@@ -105,6 +109,8 @@ def use_react_native! (
   pod 'React', :path => "#{prefix}/"
   pod 'React-Core', :path => "#{prefix}/"
   pod 'React-CoreModules', :path => "#{prefix}/React/CoreModules"
+  pod 'React-RCTRuntime', :path => "#{prefix}/React/Runtime"
+  pod 'React-RCTAppDelegate', :path => "#{prefix}/Libraries/AppDelegate"
   pod 'React-RCTActionSheet', :path => "#{prefix}/Libraries/ActionSheetIOS"
   pod 'React-RCTAppDelegate', :path => "#{prefix}/Libraries/AppDelegate"
   pod 'React-RCTAnimation', :path => "#{prefix}/Libraries/NativeAnimation"
@@ -130,6 +136,7 @@ def use_react_native! (
   pod 'React-jserrorhandler', :path => "#{prefix}/ReactCommon/jserrorhandler"
   pod 'RCTDeprecation', :path => "#{prefix}/ReactApple/Libraries/RCTFoundation/RCTDeprecation"
   pod 'React-RCTFBReactNativeSpec', :path => "#{prefix}/React"
+  pod 'React-jsi', :path => "#{prefix}/ReactCommon/jsi"
 
   if hermes_enabled
     setup_hermes!(:react_native_path => prefix)
@@ -139,6 +146,7 @@ def use_react_native! (
 
   pod 'React-jsiexecutor', :path => "#{prefix}/ReactCommon/jsiexecutor"
   pod 'React-jsinspector', :path => "#{prefix}/ReactCommon/jsinspector-modern"
+  pod 'React-jsitooling', :path => "#{prefix}/ReactCommon/jsitooling"
   pod 'React-jsinspectortracing', :path => "#{prefix}/ReactCommon/jsinspector-modern/tracing"
 
   pod 'React-callinvoker', :path => "#{prefix}/ReactCommon/callinvoker"
@@ -146,9 +154,11 @@ def use_react_native! (
   pod 'React-timing', :path => "#{prefix}/ReactCommon/react/timing"
   pod 'React-runtimeexecutor', :path => "#{prefix}/ReactCommon/runtimeexecutor"
   pod 'React-runtimescheduler', :path => "#{prefix}/ReactCommon/react/renderer/runtimescheduler"
+  pod 'React-renderercss', :path => "#{prefix}/ReactCommon/react/renderer/css"
   pod 'React-rendererdebug', :path => "#{prefix}/ReactCommon/react/renderer/debug"
   pod 'React-rendererconsistency', :path => "#{prefix}/ReactCommon/react/renderer/consistency"
   pod 'React-perflogger', :path => "#{prefix}/ReactCommon/reactperflogger"
+  pod 'React-oscompat', :path => "#{prefix}/ReactCommon/oscompat"
   pod 'React-logger', :path => "#{prefix}/ReactCommon/logger"
   pod 'ReactCommon/turbomodule/core', :path => "#{prefix}/ReactCommon", :modular_headers => true
   pod 'React-NativeModulesApple', :path => "#{prefix}/ReactCommon/react/nativemodule/core/platform/ios", :modular_headers => true
@@ -364,6 +374,36 @@ def rct_cxx_language_standard()
   return Helpers::Constants.cxx_language_standard
 end
 
+def print_jsc_removal_message()
+  puts ''
+  puts '=============== JavaScriptCore is being moved ==============='.yellow
+  puts 'JavaScriptCore has been extracted from react-native core'.yellow
+  puts 'and will be removed in a future release. It can now be'.yellow
+  puts 'installed from `@react-native-community/javascriptcore`'.yellow
+  puts 'See: https://github.com/react-native-community/javascriptcore'.yellow
+  puts '============================================================='.yellow
+  puts ''
+end
+
+def print_cocoapods_deprecation_message()
+  if ENV["RCT_IGNORE_PODS_DEPRECATION"] == "1"
+    return
+  end
+
+  puts ''
+  puts '==================== DEPRECATION NOTICE ====================='.yellow
+  puts 'Calling `pod install` directly is deprecated in React Native'.yellow
+  puts 'because we are moving away from Cocoapods toward alternative'.yellow
+  puts 'solutions to build the project.'.yellow
+  puts '* If you are using Expo, please run:'.yellow
+  puts '`npx expo run:ios`'.yellow
+  puts '* If you are using the Community CLI, please run:'.yellow
+  puts '`yarn ios`'.yellow
+  puts '============================================================='.yellow
+  puts ''
+
+end
+
 # Function that executes after React Native has been installed to configure some flags and build settings.
 #
 # Parameters
@@ -381,13 +421,13 @@ def react_native_post_install(
 
   ReactNativePodsUtils.apply_mac_catalyst_patches(installer) if mac_catalyst_enabled
 
-  fabric_enabled = ENV['RCT_FABRIC_ENABLED'] == '1'
   hermes_enabled = ENV['USE_HERMES'] == '1'
   privacy_file_aggregation_enabled = ENV['RCT_AGGREGATE_PRIVACY_FILES'] == '1'
 
   if hermes_enabled
     ReactNativePodsUtils.set_gcc_preprocessor_definition_for_React_hermes(installer)
   end
+  ReactNativePodsUtils.set_gcc_preprocessor_definition_for_debugger(installer)
 
   ReactNativePodsUtils.fix_library_search_paths(installer)
   ReactNativePodsUtils.update_search_paths(installer)
@@ -413,6 +453,10 @@ def react_native_post_install(
   NewArchitectureHelper.set_clang_cxx_language_standard_if_needed(installer)
   NewArchitectureHelper.modify_flags_for_new_architecture(installer, NewArchitectureHelper.new_arch_enabled)
 
+  if ENV['USE_HERMES'] == '0' && ENV['USE_THIRD_PARTY_JSC'] != '1'
+    print_jsc_removal_message()
+  end
 
+  print_cocoapods_deprecation_message
   Pod::UI.puts "Pod install took #{Time.now.to_i - $START_TIME} [s] to run".green
 end

package/sdks/.hermesversion

@@ -1 +1 @@
-hermes-2025-01-13-RNv0.78.0-a942ef374897d85da38e9c8904574f8376555388
+hermes-2025-03-03-RNv0.79.0-bc17d964d03743424823d7dd1a9f37633459c5c5

package/src/private/animated/createAnimatedPropsHook.js

@@ -0,0 +1,360 @@
+/**
+ * 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 {AnimatedPropsAllowlist} from '../../../Libraries/Animated/nodes/AnimatedProps';
+import type {EventSubscription} from '../../../Libraries/EventEmitter/NativeEventEmitter';
+
+import {AnimatedEvent} from '../../../Libraries/Animated/AnimatedEvent';
+import AnimatedNode from '../../../Libraries/Animated/nodes/AnimatedNode';
+import AnimatedProps from '../../../Libraries/Animated/nodes/AnimatedProps';
+import AnimatedValue from '../../../Libraries/Animated/nodes/AnimatedValue';
+import {isPublicInstance as isFabricPublicInstance} from '../../../Libraries/ReactNative/ReactFabricPublicInstance/ReactFabricPublicInstanceUtils';
+import useRefEffect from '../../../Libraries/Utilities/useRefEffect';
+import * as ReactNativeFeatureFlags from '../featureflags/ReactNativeFeatureFlags';
+import {createAnimatedPropsMemoHook} from './createAnimatedPropsMemoHook';
+import NativeAnimatedHelper from './NativeAnimatedHelper';
+import {
+  useCallback,
+  useEffect,
+  useInsertionEffect,
+  useReducer,
+  useRef,
+} from 'react';
+
+type ReducedProps<TProps> = {
+  ...TProps,
+  collapsable: boolean,
+  ...
+};
+type CallbackRef<T> = T => mixed;
+
+export type AnimatedPropsHook = <TProps: {...}, TInstance>(
+  props: TProps,
+) => [ReducedProps<TProps>, CallbackRef<TInstance | null>];
+
+type UpdateCallback = () => void;
+
+type AnimatedValueListeners = Array<{
+  propValue: AnimatedValue,
+  listenerId: string,
+}>;
+
+export default function createAnimatedPropsHook(
+  allowlist: ?AnimatedPropsAllowlist,
+): AnimatedPropsHook {
+  const useAnimatedPropsMemo = createAnimatedPropsMemoHook(allowlist);
+
+  return function useAnimatedProps<TProps: {...}, TInstance>(
+    props: TProps,
+  ): [ReducedProps<TProps>, CallbackRef<TInstance | null>] {
+    const [, scheduleUpdate] = useReducer<number, void>(count => count + 1, 0);
+    const onUpdateRef = useRef<UpdateCallback | null>(null);
+    const timerRef = useRef<TimeoutID | null>(null);
+
+    const node = useAnimatedPropsMemo(
+      () => new AnimatedProps(props, () => onUpdateRef.current?.(), allowlist),
+      props,
+    );
+
+    const useNativePropsInFabric =
+      ReactNativeFeatureFlags.shouldUseSetNativePropsInFabric();
+
+    useEffect(() => {
+      // If multiple components call `flushQueue`, the first one will flush the
+      // queue and subsequent ones will do nothing.
+      NativeAnimatedHelper.API.flushQueue();
+      let drivenAnimationEndedListener: ?EventSubscription = null;
+      if (node.__isNative) {
+        drivenAnimationEndedListener =
+          NativeAnimatedHelper.nativeEventEmitter.addListener(
+            'onUserDrivenAnimationEnded',
+            data => {
+              node.update();
+            },
+          );
+      }
+
+      return () => {
+        drivenAnimationEndedListener?.remove();
+      };
+    });
+
+    // NOTE: This feature flag must be evaluated inside the hook because this
+    // module factory can be evaluated much sooner, before overrides are set.
+    const useAnimatedPropsLifecycle =
+      ReactNativeFeatureFlags.scheduleAnimatedCleanupInMicrotask()
+        ? useAnimatedPropsLifecycleWithCleanupInMicrotask
+        : useAnimatedPropsLifecycleWithPrevNodeRef;
+
+    useAnimatedPropsLifecycle(node);
+
+    // TODO: This "effect" does three things:
+    //
+    //   1) Call `setNativeView`.
+    //   2) Update `onUpdateRef`.
+    //   3) Update listeners for `AnimatedEvent` props.
+    //
+    // Ideally, each of these would be separate "effects" so that they are not
+    // unnecessarily re-run when irrelevant dependencies change. For example, we
+    // should be able to hoist all `AnimatedEvent` props and only do #3 if either
+    // the `AnimatedEvent` props change or `instance` changes.
+    //
+    // But there is no way to transparently compose three separate callback refs,
+    // so we just combine them all into one for now.
+    const refEffect = useCallback(
+      (instance: TInstance) => {
+        // NOTE: This may be called more often than necessary (e.g. when `props`
+        // changes), but `setNativeView` already optimizes for that.
+        node.setNativeView(instance);
+
+        // NOTE: When using the JS animation driver, this callback is called on
+        // every animation frame. When using the native driver, this callback is
+        // called when the animation completes.
+        onUpdateRef.current = () => {
+          if (process.env.NODE_ENV === 'test') {
+            // Check 1: this is a test.
+            // call `scheduleUpdate` to bypass use of setNativeProps.
+            return scheduleUpdate();
+          }
+
+          const isFabricNode = isFabricInstance(instance);
+          if (node.__isNative) {
+            // Check 2: this is an animation driven by native.
+            // In native driven animations, this callback is only called once the animation completes.
+            if (isFabricNode) {
+              // Call `scheduleUpdate` to synchronise Fiber and Shadow tree.
+              // Must not be called in Paper.
+              scheduleUpdate();
+            }
+            return;
+          }
+
+          if (
+            typeof instance !== 'object' ||
+            typeof instance?.setNativeProps !== 'function'
+          ) {
+            // Check 3: the instance does not support setNativeProps. Call `scheduleUpdate`.
+            return scheduleUpdate();
+          }
+
+          if (!isFabricNode) {
+            // Check 4: this is a paper instance, call setNativeProps.
+            // $FlowIgnore[not-a-function] - Assume it's still a function.
+            // $FlowFixMe[incompatible-use]
+            return instance.setNativeProps(node.__getAnimatedValue());
+          }
+
+          if (!useNativePropsInFabric) {
+            // Check 5: setNativeProps are disabled.
+            return scheduleUpdate();
+          }
+
+          // This is a Fabric instance and setNativeProps is supported.
+
+          // $FlowIgnore[not-a-function] - Assume it's still a function.
+          // $FlowFixMe[incompatible-use]
+          instance.setNativeProps(node.__getAnimatedValue());
+
+          // Keeping state of Fiber tree and Shadow tree in sync.
+          //
+          // This is done by calling `scheduleUpdate` which will trigger a commit.
+          // However, React commit is not fast enough to drive animations.
+          // This is where setNativeProps comes in handy but the state between
+          // Fiber tree and Shadow tree needs to be kept in sync.
+          // The goal is to call `scheduleUpdate` as little as possible to maintain
+          // performance but frequently enough to keep state in sync.
+          // Debounce is set to 48ms, which is 3 * the duration of a frame.
+          // 3 frames was the highest value where flickering state was not observed.
+          if (timerRef.current != null) {
+            clearTimeout(timerRef.current);
+          }
+          timerRef.current = setTimeout(() => {
+            timerRef.current = null;
+            scheduleUpdate();
+          }, 48);
+        };
+
+        const target = getEventTarget(instance);
+        const events = [];
+        const animatedValueListeners: AnimatedValueListeners = [];
+
+        for (const propName in props) {
+          // $FlowFixMe[invalid-computed-prop]
+          const propValue = props[propName];
+          if (propValue instanceof AnimatedEvent && propValue.__isNative) {
+            propValue.__attach(target, propName);
+            events.push([propName, propValue]);
+            // $FlowFixMe[incompatible-call] - the `addListenersToPropsValue` drills down the propValue.
+            addListenersToPropsValue(propValue, animatedValueListeners);
+          }
+        }
+
+        return () => {
+          onUpdateRef.current = null;
+
+          for (const [propName, propValue] of events) {
+            propValue.__detach(target, propName);
+          }
+
+          for (const {propValue, listenerId} of animatedValueListeners) {
+            propValue.removeListener(listenerId);
+          }
+        };
+      },
+      [node, useNativePropsInFabric, props],
+    );
+    const callbackRef = useRefEffect<TInstance>(refEffect);
+
+    return [reduceAnimatedProps<TProps>(node, props), callbackRef];
+  };
+}
+
+function reduceAnimatedProps<TProps>(
+  node: AnimatedProps,
+  props: TProps,
+): ReducedProps<TProps> {
+  // Force `collapsable` to be false so that the native view is not flattened.
+  // Flattened views cannot be accurately referenced by the native driver.
+  return {
+    ...node.__getValueWithStaticProps(props),
+    collapsable: false,
+  };
+}
+
+function addListenersToPropsValue(
+  propValue: AnimatedValue,
+  accumulator: AnimatedValueListeners,
+) {
+  // propValue can be a scalar value, an array or an object.
+  if (propValue instanceof AnimatedValue) {
+    const listenerId = propValue.addListener(() => {});
+    accumulator.push({propValue, listenerId});
+  } else if (Array.isArray(propValue)) {
+    // An array can be an array of scalar values, arrays of arrays, or arrays of objects
+    for (const prop of propValue) {
+      addListenersToPropsValue(prop, accumulator);
+    }
+  } else if (propValue instanceof Object) {
+    addAnimatedValuesListenersToProps(propValue, accumulator);
+  }
+}
+
+function addAnimatedValuesListenersToProps(
+  props: AnimatedNode,
+  accumulator: AnimatedValueListeners,
+) {
+  for (const propName in props) {
+    // $FlowFixMe[prop-missing] - This is an object contained in a prop, but we don't know the exact type.
+    const propValue = props[propName];
+    addListenersToPropsValue(propValue, accumulator);
+  }
+}
+
+/**
+ * Manages the lifecycle of the supplied `AnimatedProps` by invoking `__attach`
+ * and `__detach`. However, this is more complicated because `AnimatedProps`
+ * uses reference counting to determine when to recursively detach its children
+ * nodes. So in order to optimize this, we avoid detaching until the next attach
+ * unless we are unmounting.
+ */
+function useAnimatedPropsLifecycleWithPrevNodeRef(node: AnimatedProps): void {
+  const prevNodeRef = useRef<?AnimatedProps>(null);
+  const isUnmountingRef = useRef<boolean>(false);
+
+  useInsertionEffect(() => {
+    isUnmountingRef.current = false;
+    return () => {
+      isUnmountingRef.current = true;
+    };
+  }, []);
+
+  useInsertionEffect(() => {
+    node.__attach();
+    if (prevNodeRef.current != null) {
+      const prevNode = prevNodeRef.current;
+      // TODO: Stop restoring default values (unless `reset` is called).
+      prevNode.__restoreDefaultValues();
+      prevNode.__detach();
+      prevNodeRef.current = null;
+    }
+    return () => {
+      if (isUnmountingRef.current) {
+        // NOTE: Do not restore default values on unmount, see D18197735.
+        node.__detach();
+      } else {
+        prevNodeRef.current = node;
+      }
+    };
+  }, [node]);
+}
+
+/**
+ * Manages the lifecycle of the supplied `AnimatedProps` by invoking `__attach`
+ * and `__detach`. However, `__detach` occurs in a microtask for these reasons:
+ *
+ *   1. Optimizes detaching and attaching `AnimatedNode` instances that rely on
+ *      reference counting to cleanup state, by causing detach to be scheduled
+ *      after any subsequent attach.
+ *   2. Avoids calling `detach` during the insertion effect phase (which
+ *      occurs during the commit phase), which may invoke completion callbacks.
+ *
+ * We should avoid invoking completion callbacks during the commit phase because
+ * callbacks may update state, which is unsupported and will force synchronous
+ * updates.
+ */
+function useAnimatedPropsLifecycleWithCleanupInMicrotask(
+  node: AnimatedProps,
+): void {
+  const isMounted = useRef<boolean>(false);
+
+  useInsertionEffect(() => {
+    isMounted.current = true;
+    node.__attach();
+
+    return () => {
+      isMounted.current = false;
+      queueMicrotask(() => {
+        // NOTE: Do not restore default values on unmount, see D18197735.
+        if (isMounted.current) {
+          // TODO: Stop restoring default values (unless `reset` is called).
+          node.__restoreDefaultValues();
+        }
+        node.__detach();
+      });
+    };
+  }, [node]);
+}
+
+function getEventTarget<TInstance>(instance: TInstance): TInstance {
+  return typeof instance === 'object' &&
+    typeof instance?.getScrollableNode === 'function'
+    ? // $FlowFixMe[incompatible-use] - Legacy instance assumptions.
+      instance.getScrollableNode()
+    : instance;
+}
+
+// $FlowFixMe[unclear-type] - Legacy instance assumptions.
+function isFabricInstance(instance: any): boolean {
+  return (
+    isFabricPublicInstance(instance) ||
+    // Some components have a setNativeProps function but aren't a host component
+    // such as lists like FlatList and SectionList. These should also use
+    // forceUpdate in Fabric since setNativeProps doesn't exist on the underlying
+    // host component. This crazy hack is essentially special casing those lists and
+    // ScrollView itself to use forceUpdate in Fabric.
+    // If these components end up using forwardRef then these hacks can go away
+    // as instance would actually be the underlying host component and the above check
+    // would be sufficient.
+    isFabricPublicInstance(instance?.getNativeScrollRef?.()) ||
+    isFabricPublicInstance(
+      instance?.getScrollResponder?.()?.getNativeScrollRef?.(),
+    )
+  );
+}

package/src/private/animated/{useAnimatedPropsMemo.js → createAnimatedPropsMemoHook.js}

@@ -17,8 +17,9 @@ import {AnimatedEvent} from '../../../Libraries/Animated/AnimatedEvent';
 import AnimatedNode from '../../../Libraries/Animated/nodes/AnimatedNode';
 import {isPlainObject} from '../../../Libraries/Animated/nodes/AnimatedObject';
 import flattenStyle from '../../../Libraries/StyleSheet/flattenStyle';
+import * as ReactNativeFeatureFlags from '../featureflags/ReactNativeFeatureFlags';
 import nullthrows from 'nullthrows';
-import {useMemo, useState} from 'react';
+import {useInsertionEffect, useMemo, useRef, useState} from 'react';
 
 type CompositeKey = {
   style?: {[string]: CompositeKeyComponent},
@@ -48,43 +49,94 @@ type $ReadOnlyCompositeKeyComponent =
   | $ReadOnlyArray<$ReadOnlyCompositeKeyComponent | null>
   | $ReadOnly<{[string]: $ReadOnlyCompositeKeyComponent}>;
 
+type AnimatedPropsMemoHook = (
+  () => AnimatedProps,
+  props: $ReadOnly<{[string]: mixed}>,
+) => AnimatedProps;
+
 /**
- * A hook that returns an `AnimatedProps` object that is memoized based on the
- * subset of `props` that are instances of `AnimatedNode` or `AnimatedEvent`.
+ * Creates a hook that returns an `AnimatedProps` object that is memoized based
+ * on the subset of `props` that are instances of `AnimatedNode` or
+ * `AnimatedEvent`.
  */
-export function useAnimatedPropsMemo(
-  create: () => AnimatedProps,
-  // TODO: Make this two separate arguments after the experiment is over. This
-  // is only an array-like structure to make it easier to experiment with this
-  // and `useMemo`.
-  [allowlist, props]: [?AnimatedPropsAllowlist, {[string]: mixed}],
-): AnimatedProps {
-  const compositeKey = useMemo(
-    () => createCompositeKeyForProps(props, allowlist),
-    [allowlist, props],
-  );
-
-  const [state, setState] = useState<{
-    allowlist: ?AnimatedPropsAllowlist,
-    compositeKey: $ReadOnlyCompositeKey | null,
-    value: AnimatedProps,
-  }>(() => ({
-    allowlist,
-    compositeKey,
-    value: create(),
-  }));
-
-  if (
-    state.allowlist !== allowlist ||
-    !areCompositeKeysEqual(state.compositeKey, compositeKey)
-  ) {
-    setState({
+export function createAnimatedPropsMemoHook(
+  allowlist: ?AnimatedPropsAllowlist,
+): AnimatedPropsMemoHook {
+  return function useAnimatedPropsMemo(
+    create: () => AnimatedProps,
+    props: $ReadOnly<{[string]: mixed}>,
+  ): AnimatedProps {
+    // NOTE: This feature flag must be evaluated inside the hook because this
+    // module factory can be evaluated much sooner, before overrides are set.
+    const useAnimatedPropsImpl =
+      ReactNativeFeatureFlags.avoidStateUpdateInAnimatedPropsMemo()
+        ? useAnimatedPropsMemo_ref
+        : useAnimatedPropsMemo_state;
+    return useAnimatedPropsImpl(create, props);
+  };
+
+  function useAnimatedPropsMemo_ref(
+    create: () => AnimatedProps,
+    props: $ReadOnly<{[string]: mixed}>,
+  ): AnimatedProps {
+    const compositeKey = useMemo(
+      () => createCompositeKeyForProps(props, allowlist),
+      [props],
+    );
+
+    const prevRef = useRef<?$ReadOnly<{
+      compositeKey: typeof compositeKey,
+      node: AnimatedProps,
+    }>>();
+    const prev = prevRef.current;
+
+    const next =
+      prev != null &&
+      areCompositeKeysEqual(prev.compositeKey, compositeKey, allowlist)
+        ? prev
+        : {
+            compositeKey,
+            node: create(),
+          };
+
+    useInsertionEffect(() => {
+      prevRef.current = next;
+    }, [next]);
+
+    return next.node;
+  }
+
+  function useAnimatedPropsMemo_state(
+    create: () => AnimatedProps,
+    props: $ReadOnly<{[string]: mixed}>,
+  ): AnimatedProps {
+    const compositeKey = useMemo(
+      () => createCompositeKeyForProps(props, allowlist),
+      [props],
+    );
+
+    const [state, setState] = useState<{
+      allowlist: ?AnimatedPropsAllowlist,
+      compositeKey: $ReadOnlyCompositeKey | null,
+      value: AnimatedProps,
+    }>(() => ({
       allowlist,
       compositeKey,
       value: create(),
-    });
+    }));
+
+    if (
+      state.allowlist !== allowlist ||
+      !areCompositeKeysEqual(state.compositeKey, compositeKey)
+    ) {
+      setState({
+        allowlist,
+        compositeKey,
+        value: create(),
+      });
+    }
+    return state.value;
   }
-  return state.value;
 }
 
 /**

package/src/private/components/HScrollViewNativeComponents.js

@@ -11,13 +11,13 @@
 
 import type {ScrollViewNativeProps} from '../../../Libraries/Components/ScrollView/ScrollViewNativeComponentType';
 import type {ViewProps} from '../../../Libraries/Components/View/ViewPropTypes';
-import type {HostComponent} from '../../../Libraries/Renderer/shims/ReactNativeTypes';
+import type {HostComponent} from '../types/HostComponent';
 
 import AndroidHorizontalScrollViewNativeComponent from '../../../Libraries/Components/ScrollView/AndroidHorizontalScrollViewNativeComponent';
 import ScrollContentViewNativeComponent from '../../../Libraries/Components/ScrollView/ScrollContentViewNativeComponent';
 import ScrollViewNativeComponent from '../../../Libraries/Components/ScrollView/ScrollViewNativeComponent';
 import Platform from '../../../Libraries/Utilities/Platform';
-import AndroidHorizontalScrollContentViewNativeComponent from '../specs/components/AndroidHorizontalScrollContentViewNativeComponent';
+import AndroidHorizontalScrollContentViewNativeComponent from '../specs_DEPRECATED/components/AndroidHorizontalScrollContentViewNativeComponent';
 
 export const HScrollViewNativeComponent: HostComponent<ScrollViewNativeProps> =
   Platform.OS === 'android'

package/src/private/components/SafeAreaView_INTERNAL_DO_NOT_USE.js

@@ -20,10 +20,10 @@ const exported: component(
   ref?: React.RefSetter<React.ElementRef<typeof View>>,
   ...ViewProps
 ) = Platform.select({
-  ios: require('../../../src/private/specs/components/RCTSafeAreaViewNativeComponent')
+  ios: require('../../../src/private/specs_DEPRECATED/components/RCTSafeAreaViewNativeComponent')
     .default,
   android: UIManager.hasViewManagerConfig('RCTSafeAreaView')
-    ? require('../../../src/private/specs/components/RCTSafeAreaViewNativeComponent')
+    ? require('../../../src/private/specs_DEPRECATED/components/RCTSafeAreaViewNativeComponent')
         .default
     : View,
   default: View,