@office-iss/react-native-win32 0.0.0-canary.288 → 0.0.0-canary.289

package/src/private/animated/createAnimatedPropsHook.js

@@ -24,6 +24,7 @@ import {
   useCallback,
   useEffect,
   useInsertionEffect,
+  useMemo,
   useReducer,
   useRef,
 } from 'react';
@@ -51,6 +52,31 @@ export default function createAnimatedPropsHook(
 ): AnimatedPropsHook {
   const useAnimatedPropsMemo = createAnimatedPropsMemoHook(allowlist);
 
+  const useNativePropsInFabric =
+    ReactNativeFeatureFlags.shouldUseSetNativePropsInFabric();
+
+  const useNativeAnimatedEvents: <TProps: {...}>(
+    node: AnimatedProps,
+    props: TProps,
+  ) => $ReadOnlyArray<[string, AnimatedEvent]> =
+    ReactNativeFeatureFlags.avoidAnimatedRefInvalidation()
+      ? function useNativeAnimatedEventsFromAnimatedProps(node, props) {
+          return useMemo(() => node.__getNativeAnimatedEventTuples(), [node]);
+        }
+      : function useNativeAnimatedEventsFromProps(node, props) {
+          return useMemo(() => {
+            const tuples = [];
+            for (const propName in props) {
+              // $FlowFixMe[invalid-computed-prop]
+              const propValue = props[propName];
+              if (propValue instanceof AnimatedEvent && propValue.__isNative) {
+                tuples.push([propName, propValue]);
+              }
+            }
+            return tuples;
+          }, [props]);
+        };
+
   return function useAnimatedProps<TProps: {...}, TInstance>(
     props: TProps,
   ): [ReducedProps<TProps>, CallbackRef<TInstance | null>] {
@@ -63,9 +89,6 @@ export default function createAnimatedPropsHook(
       props,
     );
 
-    const useNativePropsInFabric =
-      ReactNativeFeatureFlags.shouldUseSetNativePropsInFabric();
-
     useEffect(() => {
       // If multiple components call `flushQueue`, the first one will flush the
       // queue and subsequent ones will do nothing.
@@ -95,6 +118,8 @@ export default function createAnimatedPropsHook(
 
     useAnimatedPropsLifecycle(node);
 
+    const eventTuples = useNativeAnimatedEvents(node, props);
+
     // TODO: This "effect" does three things:
     //
     //   1) Call `setNativeView`.
@@ -182,24 +207,18 @@ export default function createAnimatedPropsHook(
         };
 
         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);
-          }
+        for (const [propName, propValue] of eventTuples) {
+          propValue.__attach(target, propName);
+          // $FlowFixMe[incompatible-call] - the `addListenersToPropsValue` drills down the propValue.
+          addListenersToPropsValue(propValue, animatedValueListeners);
         }
 
         return () => {
           onUpdateRef.current = null;
 
-          for (const [propName, propValue] of events) {
+          for (const [propName, propValue] of eventTuples) {
             propValue.__detach(target, propName);
           }
 
@@ -208,7 +227,7 @@ export default function createAnimatedPropsHook(
           }
         };
       },
-      [node, useNativePropsInFabric, props],
+      [eventTuples, node],
     );
     const callbackRef = useRefEffect<TInstance>(refEffect);
 

package/src/private/featureflags/ReactNativeFeatureFlags.js

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<3e68d888bf4d8ac71b63571a639d265b>>
+ * @generated SignedSource<<e76d584cb67e2feae209795beb2009d6>>
  * @flow strict
  */
 
@@ -30,18 +30,16 @@ export type ReactNativeFeatureFlagsJsOnly = $ReadOnly<{
   jsOnlyTestFlag: Getter<boolean>,
   animatedShouldDebounceQueueFlush: Getter<boolean>,
   animatedShouldUseSingleOp: Getter<boolean>,
+  avoidAnimatedRefInvalidation: Getter<boolean>,
   avoidStateUpdateInAnimatedPropsMemo: Getter<boolean>,
   disableInteractionManager: Getter<boolean>,
   enableAccessToHostTreeInFabric: Getter<boolean>,
-  enableAnimatedClearImmediateFix: Getter<boolean>,
-  enableDOMDocumentAPI: Getter<boolean>,
   fixVirtualizeListCollapseWindowSize: Getter<boolean>,
   isLayoutAnimationEnabled: Getter<boolean>,
   scheduleAnimatedCleanupInMicrotask: Getter<boolean>,
   shouldUseAnimatedObjectForTransform: Getter<boolean>,
   shouldUseRemoveClippedSubviewsAsDefaultOnIOS: Getter<boolean>,
   shouldUseSetNativePropsInFabric: Getter<boolean>,
-  useRefsForTextInputState: Getter<boolean>,
 }>;
 
 export type ReactNativeFeatureFlagsJsOnlyOverrides = OverridesFor<ReactNativeFeatureFlagsJsOnly>;
@@ -50,6 +48,7 @@ export type ReactNativeFeatureFlags = $ReadOnly<{
   ...ReactNativeFeatureFlagsJsOnly,
   commonTestFlag: Getter<boolean>,
   commonTestFlagWithoutNativeImplementation: Getter<boolean>,
+  animatedShouldSignalBatch: Getter<boolean>,
   disableMountItemReorderingAndroid: Getter<boolean>,
   enableAccumulatedUpdatesInRawPropsAndroid: Getter<boolean>,
   enableBridgelessArchitecture: Getter<boolean>,
@@ -65,7 +64,6 @@ export type ReactNativeFeatureFlags = $ReadOnly<{
   enableLongTaskAPI: Getter<boolean>,
   enableNativeCSSParsing: Getter<boolean>,
   enableNewBackgroundAndBorderDrawables: Getter<boolean>,
-  enablePreciseSchedulingForPremountItemsOnAndroid: Getter<boolean>,
   enablePropsUpdateReconciliationAndroid: Getter<boolean>,
   enableReportEventPaintTime: Getter<boolean>,
   enableSynchronousStateUpdates: Getter<boolean>,
@@ -74,7 +72,6 @@ export type ReactNativeFeatureFlags = $ReadOnly<{
   enableViewRecycling: Getter<boolean>,
   enableViewRecyclingForText: Getter<boolean>,
   enableViewRecyclingForView: Getter<boolean>,
-  excludeYogaFromRawProps: Getter<boolean>,
   fixDifferentiatorEmittingUpdatesWithWrongParentTag: Getter<boolean>,
   fixMappingOfEventPrioritiesBetweenFabricAndReact: Getter<boolean>,
   fixMountingCoordinatorReportedPendingTransactionsOnAndroid: Getter<boolean>,
@@ -109,6 +106,11 @@ export const animatedShouldDebounceQueueFlush: Getter<boolean> = createJavaScrip
  */
 export const animatedShouldUseSingleOp: Getter<boolean> = createJavaScriptFlagGetter('animatedShouldUseSingleOp', false);
 
+/**
+ * Changes `useAnimatedProps` to avoid invalidating the callback ref whenever `props` changes.
+ */
+export const avoidAnimatedRefInvalidation: Getter<boolean> = createJavaScriptFlagGetter('avoidAnimatedRefInvalidation', false);
+
 /**
  * Changes `useAnimatedPropsMemo` to avoid state updates to invalidate the cached `AnimatedProps`.
  */
@@ -124,16 +126,6 @@ export const disableInteractionManager: Getter<boolean> = createJavaScriptFlagGe
  */
 export const enableAccessToHostTreeInFabric: Getter<boolean> = createJavaScriptFlagGetter('enableAccessToHostTreeInFabric', false);
 
-/**
- * Enables an experimental to use the proper clearIntermediate instead of calling the wrong clearTimeout and canceling another timer.
- */
-export const enableAnimatedClearImmediateFix: Getter<boolean> = createJavaScriptFlagGetter('enableAnimatedClearImmediateFix', true);
-
-/**
- * Enables the DOM Document API, exposing instaces of document through `getRootNode` and `ownerDocument`, and providing access to the `documentElement` representing the root node. This flag will be short-lived, only to test the Document API specifically, and then it will be collapsed into the enableAccessToHostTreeInFabric flag.
- */
-export const enableDOMDocumentAPI: Getter<boolean> = createJavaScriptFlagGetter('enableDOMDocumentAPI', false);
-
 /**
  * Fixing an edge case where the current window size is not properly calculated with fast scrolling. Window size collapsed to 1 element even if windowSize more than the current amount of elements
  */
@@ -164,11 +156,6 @@ export const shouldUseRemoveClippedSubviewsAsDefaultOnIOS: Getter<boolean> = cre
  */
 export const shouldUseSetNativePropsInFabric: Getter<boolean> = createJavaScriptFlagGetter('shouldUseSetNativePropsInFabric', true);
 
-/**
- * Enable a variant of TextInput that moves some state to refs to avoid unnecessary re-renders
- */
-export const useRefsForTextInputState: Getter<boolean> = createJavaScriptFlagGetter('useRefsForTextInputState', false);
-
 /**
  * Common flag for testing. Do NOT modify.
  */
@@ -177,6 +164,10 @@ export const commonTestFlag: Getter<boolean> = createNativeFlagGetter('commonTes
  * Common flag for testing (without native implementation). Do NOT modify.
  */
 export const commonTestFlagWithoutNativeImplementation: Getter<boolean> = createNativeFlagGetter('commonTestFlagWithoutNativeImplementation', false);
+/**
+ * Enables start- and finishOperationBatch on any platform.
+ */
+export const animatedShouldSignalBatch: Getter<boolean> = createNativeFlagGetter('animatedShouldSignalBatch', false);
 /**
  * Prevent FabricMountingManager from reordering mountitems, which may lead to invalid state on the UI thread
  */
@@ -186,7 +177,7 @@ export const disableMountItemReorderingAndroid: Getter<boolean> = createNativeFl
  */
 export const enableAccumulatedUpdatesInRawPropsAndroid: Getter<boolean> = createNativeFlagGetter('enableAccumulatedUpdatesInRawPropsAndroid', false);
 /**
- * Feature flag to enable the new bridgeless architecture. Note: Enabling this will force enable the following flags: `useTurboModules` & `enableFabricRenderer.
+ * Feature flag to enable the new bridgeless architecture. Note: Enabling this will force enable the following flags: `useTurboModules` & `enableFabricRenderer`.
  */
 export const enableBridgelessArchitecture: Getter<boolean> = createNativeFlagGetter('enableBridgelessArchitecture', false);
 /**
@@ -237,10 +228,6 @@ export const enableNativeCSSParsing: Getter<boolean> = createNativeFlagGetter('e
  * Use BackgroundDrawable and BorderDrawable instead of CSSBackgroundDrawable
  */
 export const enableNewBackgroundAndBorderDrawables: Getter<boolean> = createNativeFlagGetter('enableNewBackgroundAndBorderDrawables', false);
-/**
- * Moves execution of pre-mount items to outside the choregrapher in the main thread, so we can estimate idle time more precisely (Android only).
- */
-export const enablePreciseSchedulingForPremountItemsOnAndroid: Getter<boolean> = createNativeFlagGetter('enablePreciseSchedulingForPremountItemsOnAndroid', false);
 /**
  * When enabled, Android will receive prop updates based on the differences between the last rendered shadow node and the last committed shadow node.
  */
@@ -273,10 +260,6 @@ export const enableViewRecyclingForText: Getter<boolean> = createNativeFlagGette
  * Enables View Recycling for <View> via ReactViewGroup/ReactViewManager.
  */
 export const enableViewRecyclingForView: Getter<boolean> = createNativeFlagGetter('enableViewRecyclingForView', true);
-/**
- * When enabled, rawProps in Props will not include Yoga specific props.
- */
-export const excludeYogaFromRawProps: Getter<boolean> = createNativeFlagGetter('excludeYogaFromRawProps', false);
 /**
  * Fixes a bug in Differentiator where parent views may be referenced before they're created
  */
@@ -294,7 +277,7 @@ export const fixMountingCoordinatorReportedPendingTransactionsOnAndroid: Getter<
  */
 export const fuseboxEnabledRelease: Getter<boolean> = createNativeFlagGetter('fuseboxEnabledRelease', false);
 /**
- * Enable network inspection support in the React Native DevTools CDP backend. This flag is global and should not be changed across React Host lifetimes.
+ * Enable network inspection support in the React Native DevTools CDP backend. Requires `enableBridgelessArchitecture`. This flag is global and should not be changed across React Host lifetimes.
  */
 export const fuseboxNetworkInspectionEnabled: Getter<boolean> = createNativeFlagGetter('fuseboxNetworkInspectionEnabled', false);
 /**

package/src/private/featureflags/ReactNativeFeatureFlagsBase.js

@@ -96,9 +96,17 @@ export function setOverrides(
 }
 
 const reportedConfigNames: Set<string> = new Set();
+const hasTurboModules =
+  global.RN$Bridgeless === true || global.__turboModuleProxy != null;
 
 function maybeLogUnavailableNativeModuleError(configName: string): void {
-  if (!NativeReactNativeFeatureFlags && !reportedConfigNames.has(configName)) {
+  if (
+    !NativeReactNativeFeatureFlags &&
+    // Don't log more than once per config
+    !reportedConfigNames.has(configName) &&
+    // Don't log in the legacy architecture.
+    hasTurboModules
+  ) {
     reportedConfigNames.add(configName);
     console.error(
       `Could not access feature flag '${configName}' because native module method was not available`,

package/src/private/featureflags/specs/NativeReactNativeFeatureFlags.js

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<0d611c17d522627c59a68d083eb6b6dc>>
+ * @generated SignedSource<<22d8e7623a2eee5182c786f2ec914401>>
  * @flow strict
  */
 
@@ -25,6 +25,7 @@ import * as TurboModuleRegistry from '../../../../Libraries/TurboModule/TurboMod
 export interface Spec extends TurboModule {
   +commonTestFlag?: () => boolean;
   +commonTestFlagWithoutNativeImplementation?: () => boolean;
+  +animatedShouldSignalBatch?: () => boolean;
   +disableMountItemReorderingAndroid?: () => boolean;
   +enableAccumulatedUpdatesInRawPropsAndroid?: () => boolean;
   +enableBridgelessArchitecture?: () => boolean;
@@ -40,7 +41,6 @@ export interface Spec extends TurboModule {
   +enableLongTaskAPI?: () => boolean;
   +enableNativeCSSParsing?: () => boolean;
   +enableNewBackgroundAndBorderDrawables?: () => boolean;
-  +enablePreciseSchedulingForPremountItemsOnAndroid?: () => boolean;
   +enablePropsUpdateReconciliationAndroid?: () => boolean;
   +enableReportEventPaintTime?: () => boolean;
   +enableSynchronousStateUpdates?: () => boolean;
@@ -49,7 +49,6 @@ export interface Spec extends TurboModule {
   +enableViewRecycling?: () => boolean;
   +enableViewRecyclingForText?: () => boolean;
   +enableViewRecyclingForView?: () => boolean;
-  +excludeYogaFromRawProps?: () => boolean;
   +fixDifferentiatorEmittingUpdatesWithWrongParentTag?: () => boolean;
   +fixMappingOfEventPrioritiesBetweenFabricAndReact?: () => boolean;
   +fixMountingCoordinatorReportedPendingTransactionsOnAndroid?: () => boolean;

package/src/private/webapis/dom/nodes/ReadOnlyNode.js

@@ -188,25 +188,12 @@ export default class ReadOnlyNode {
   }
 
   getRootNode(): ReadOnlyNode {
-    if (ReactNativeFeatureFlags.enableDOMDocumentAPI()) {
-      if (this.isConnected) {
-        // If this is the document node, then the root node is itself.
-        return this.ownerDocument ?? this;
-      }
-
-      return this;
-    } else {
-      // eslint-disable-next-line consistent-this
-      let lastKnownParent: ReadOnlyNode = this;
-      let nextPossibleParent: ?ReadOnlyNode = this.parentNode;
-
-      while (nextPossibleParent != null) {
-        lastKnownParent = nextPossibleParent;
-        nextPossibleParent = nextPossibleParent.parentNode;
-      }
-
-      return lastKnownParent;
+    if (this.isConnected) {
+      // If this is the document node, then the root node is itself.
+      return this.ownerDocument ?? this;
     }
+
+    return this;
   }
 
   hasChildNodes(): boolean {

package/src/private/webapis/dom/nodes/internals/NodeInternals.js

@@ -129,6 +129,12 @@ export function getNativeElementReference(
   // $FlowExpectedError[incompatible-cast] We know ReadOnlyElement instances provide InternalInstanceHandle
   const instanceHandle = getInstanceHandle(node) as InternalInstanceHandle;
 
+  if (isReactNativeDocumentElementInstanceHandle(instanceHandle)) {
+    return getNativeElementReferenceFromReactNativeDocumentElementInstanceHandle(
+      instanceHandle,
+    );
+  }
+
   // $FlowExpectedError[incompatible-return]
   return getRendererProxy().getNodeFromInternalInstanceHandle(instanceHandle);
 }