react-native-windows 0.77.0-preview.1 → 0.77.0-preview.2

package/Libraries/Animated/NativeAnimatedAllowlist.js

@@ -106,17 +106,17 @@ export function allowTransformProp(prop: string): void {
 }
 
 export function isSupportedColorStyleProp(prop: string): boolean {
-  return Object.hasOwn(SUPPORTED_COLOR_STYLES, prop);
+  return SUPPORTED_COLOR_STYLES.hasOwnProperty(prop);
 }
 
 export function isSupportedInterpolationParam(param: string): boolean {
-  return Object.hasOwn(SUPPORTED_INTERPOLATION_PARAMS, param);
+  return SUPPORTED_INTERPOLATION_PARAMS.hasOwnProperty(param);
 }
 
 export function isSupportedStyleProp(prop: string): boolean {
-  return Object.hasOwn(SUPPORTED_STYLES, prop);
+  return SUPPORTED_STYLES.hasOwnProperty(prop);
 }
 
 export function isSupportedTransformProp(prop: string): boolean {
-  return Object.hasOwn(SUPPORTED_TRANSFORMS, prop);
+  return SUPPORTED_TRANSFORMS.hasOwnProperty(prop);
 }

package/Libraries/Animated/animations/Animation.js

@@ -165,7 +165,7 @@ export default class Animation {
     const callback = this.#onEnd;
     if (callback != null) {
       this.#onEnd = null;
-      queueMicrotask(() => callback(result));
+      callback(result);
     }
   }
 }

package/Libraries/Animated/nodes/AnimatedProps.js

@@ -37,7 +37,7 @@ function createAnimatedProps(
     const key = keys[ii];
     const value = inputProps[key];
 
-    if (allowlist == null || Object.hasOwn(allowlist, key)) {
+    if (allowlist == null || hasOwn(allowlist, key)) {
       let node;
       if (key === 'style') {
         node = AnimatedStyle.from(value, allowlist?.style);
@@ -271,3 +271,11 @@ export default class AnimatedProps extends AnimatedNode {
     };
   }
 }
+
+// Supported versions of JSC do not implement the newer Object.hasOwn. Remove
+// this shim when they do.
+// $FlowIgnore[method-unbinding]
+const _hasOwnProp = Object.prototype.hasOwnProperty;
+const hasOwn: (obj: $ReadOnly<{...}>, prop: string) => boolean =
+  // $FlowIgnore[method-unbinding]
+  Object.hasOwn ?? ((obj, prop) => _hasOwnProp.call(obj, prop));

package/Libraries/Animated/nodes/AnimatedStyle.js

@@ -35,7 +35,7 @@ function createAnimatedStyle(
     const key = keys[ii];
     const value = inputStyle[key];
 
-    if (allowlist == null || Object.hasOwn(allowlist, key)) {
+    if (allowlist == null || hasOwn(allowlist, key)) {
       let node;
       if (value != null && key === 'transform') {
         node = ReactNativeFeatureFlags.shouldUseAnimatedObjectForTransform()
@@ -241,3 +241,11 @@ export default class AnimatedStyle extends AnimatedWithChildren {
     };
   }
 }
+
+// Supported versions of JSC do not implement the newer Object.hasOwn. Remove
+// this shim when they do.
+// $FlowIgnore[method-unbinding]
+const _hasOwnProp = Object.prototype.hasOwnProperty;
+const hasOwn: (obj: $ReadOnly<{...}>, prop: string) => boolean =
+  // $FlowIgnore[method-unbinding]
+  Object.hasOwn ?? ((obj, prop) => _hasOwnProp.call(obj, prop));

package/Libraries/Core/ReactNativeVersion.js

@@ -17,7 +17,7 @@ const version: $ReadOnly<{
   major: 0,
   minor: 77,
   patch: 0,
-  prerelease: 'rc.0',
+  prerelease: 'rc.4',
 };
 
 module.exports = {version};

package/Libraries/Network/FormData.js

@@ -28,6 +28,15 @@ type FormDataPart =
       ...
     };
 
+/**
+ * Encode a FormData filename compliant with RFC 2183
+ *
+ * https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Disposition#directives
+ */
+function encodeFilename(filename: string): string {
+  return encodeURIComponent(filename.replace(/\//g, '_'));
+}
+
 /**
  * Polyfill for XMLHttpRequest2 FormData API, allowing multipart POST requests
  * with mixed data (string, native files) to be submitted via XMLHttpRequest.
@@ -82,9 +91,8 @@ class FormData {
       // content type (cf. web Blob interface.)
       if (typeof value === 'object' && !Array.isArray(value) && value) {
         if (typeof value.name === 'string') {
-          headers['content-disposition'] += `; filename="${
-            value.name
-          }"; filename*=utf-8''${encodeURI(value.name)}`;
+          headers['content-disposition'] +=
+            `; filename="${encodeFilename(value.name)}"`;
         }
         if (typeof value.type === 'string') {
           headers['content-type'] = value.type;

package/PropertySheets/Generated/PackageVersion.g.props

@@ -10,11 +10,11 @@
 -->
 <Project xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
   <PropertyGroup>
-    <ReactNativeWindowsVersion>0.77.0-preview.1</ReactNativeWindowsVersion>
+    <ReactNativeWindowsVersion>0.77.0-preview.2</ReactNativeWindowsVersion>
     <ReactNativeWindowsMajor>0</ReactNativeWindowsMajor>
     <ReactNativeWindowsMinor>77</ReactNativeWindowsMinor>
     <ReactNativeWindowsPatch>0</ReactNativeWindowsPatch>
     <ReactNativeWindowsCanary>false</ReactNativeWindowsCanary>
-    <ReactNativeWindowsCommitId>feb40d59f360b84675288a1a317b4fae1d1259f4</ReactNativeWindowsCommitId>
+    <ReactNativeWindowsCommitId>e70d4987c0929e4eb4125342c53cf6566e19af00</ReactNativeWindowsCommitId>
   </PropertyGroup>
 </Project>

package/PropertySheets/React.Cpp.props

@@ -66,6 +66,12 @@
       <PreprocessorDefinitions Condition="'$(UseV8)'=='true'">USE_V8;%(PreprocessorDefinitions)</PreprocessorDefinitions>
       <PreprocessorDefinitions Condition="'$(UseFabric)'=='true'">USE_FABRIC;%(PreprocessorDefinitions)</PreprocessorDefinitions>
       <PreprocessorDefinitions>JSI_VERSION=11;%(PreprocessorDefinitions)</PreprocessorDefinitions>
+      <!--
+        To address the crash on the first call to std::mutex::lock.
+        See: https://github.com/microsoft/STL/wiki/Changelog#vs-2022-1710
+             https://stackoverflow.com/questions/78598141/first-stdmutexlock-crashes-in-application-built-with-latest-visual-studio
+      -->
+      <PreprocessorDefinitions>_DISABLE_CONSTEXPR_MUTEX_CONSTRUCTOR;%(PreprocessorDefinitions)</PreprocessorDefinitions>
     </ClCompile>
   </ItemDefinitionGroup>
 

package/ReactCommon/TEMP_UntilReactCommonUpdate/react/runtime/ReactInstance.cpp

@@ -235,47 +235,51 @@ std::string simpleBasename(const std::string& path) {
  */
 void ReactInstance::loadScript(
     std::unique_ptr<const JSBigString> script,
-    const std::string& sourceURL) {
+    const std::string& sourceURL,
+    std::function<void(jsi::Runtime& runtime)>&& completion) {
   auto buffer = std::make_shared<BigStringBuffer>(std::move(script));
   std::string scriptName = simpleBasename(sourceURL);
 
-  runtimeScheduler_->scheduleWork(
-      [this,
-       scriptName,
-       sourceURL,
-       buffer = std::move(buffer),
-       weakBufferedRuntimeExecuter = std::weak_ptr<BufferedRuntimeExecutor>(
-           bufferedRuntimeExecutor_)](jsi::Runtime& runtime) {
-        SystraceSection s("ReactInstance::loadScript");
-        bool hasLogger(ReactMarker::logTaggedMarkerBridgelessImpl);
-        if (hasLogger) {
-          ReactMarker::logTaggedMarkerBridgeless(
-              ReactMarker::RUN_JS_BUNDLE_START, scriptName.c_str());
-        }
+  runtimeScheduler_->scheduleWork([this,
+                                   scriptName,
+                                   sourceURL,
+                                   buffer = std::move(buffer),
+                                   weakBufferedRuntimeExecuter =
+                                       std::weak_ptr<BufferedRuntimeExecutor>(
+                                           bufferedRuntimeExecutor_),
+                                   completion](jsi::Runtime& runtime) {
+    SystraceSection s("ReactInstance::loadScript");
+    bool hasLogger(ReactMarker::logTaggedMarkerBridgelessImpl);
+    if (hasLogger) {
+      ReactMarker::logTaggedMarkerBridgeless(
+          ReactMarker::RUN_JS_BUNDLE_START, scriptName.c_str());
+    }
 
-        runtime.evaluateJavaScript(buffer, sourceURL);
+    runtime.evaluateJavaScript(buffer, sourceURL);
 
-        /**
-         * TODO(T183610671): We need a safe/reliable way to enable the js
-         * pipeline from javascript. Remove this after we figure that out, or
-         * after we just remove the js pipeline.
-         */
-        if (!jsErrorHandler_->hasHandledFatalError()) {
-          jsErrorHandler_->setRuntimeReady();
-        }
+    /**
+     * TODO(T183610671): We need a safe/reliable way to enable the js
+     * pipeline from javascript. Remove this after we figure that out, or
+     * after we just remove the js pipeline.
+     */
+    if (!jsErrorHandler_->hasHandledFatalError()) {
+      jsErrorHandler_->setRuntimeReady();
+    }
 
-        if (hasLogger) {
-          ReactMarker::logTaggedMarkerBridgeless(
-              ReactMarker::RUN_JS_BUNDLE_STOP, scriptName.c_str());
-          ReactMarker::logMarkerBridgeless(
-              ReactMarker::INIT_REACT_RUNTIME_STOP);
-          ReactMarker::logMarkerBridgeless(ReactMarker::APP_STARTUP_STOP);
-        }
-        if (auto strongBufferedRuntimeExecuter =
-                weakBufferedRuntimeExecuter.lock()) {
-          strongBufferedRuntimeExecuter->flush();
-        }
-      });
+    if (hasLogger) {
+      ReactMarker::logTaggedMarkerBridgeless(
+          ReactMarker::RUN_JS_BUNDLE_STOP, scriptName.c_str());
+      ReactMarker::logMarkerBridgeless(ReactMarker::INIT_REACT_RUNTIME_STOP);
+      ReactMarker::logMarkerBridgeless(ReactMarker::APP_STARTUP_STOP);
+    }
+    if (auto strongBufferedRuntimeExecuter =
+            weakBufferedRuntimeExecuter.lock()) {
+      strongBufferedRuntimeExecuter->flush();
+    }
+    if (completion) {
+      completion(runtime);
+    }
+  });
 }
 
 /*

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-windows",
-  "version": "0.77.0-preview.1",
+  "version": "0.77.0-preview.2",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -28,13 +28,13 @@
     "@react-native-community/cli-platform-ios": "15.0.0-alpha.2",
     "@react-native-windows/cli": "0.77.0-preview.1",
     "@react-native/assets": "1.0.0",
-    "@react-native/assets-registry": "0.77.0-rc.0",
-    "@react-native/codegen": "0.77.0-rc.0",
-    "@react-native/community-cli-plugin": "0.77.0-rc.0",
-    "@react-native/gradle-plugin": "0.77.0-rc.0",
-    "@react-native/js-polyfills": "0.77.0-rc.0",
-    "@react-native/normalize-colors": "0.77.0-rc.0",
-    "@react-native/virtualized-lists": "0.77.0-rc.0",
+    "@react-native/assets-registry": "0.77.0-rc.4",
+    "@react-native/codegen": "0.77.0-rc.4",
+    "@react-native/community-cli-plugin": "0.77.0-rc.4",
+    "@react-native/gradle-plugin": "0.77.0-rc.4",
+    "@react-native/js-polyfills": "0.77.0-rc.4",
+    "@react-native/normalize-colors": "0.77.0-rc.4",
+    "@react-native/virtualized-lists": "0.77.0-rc.4",
     "abort-controller": "^3.0.0",
     "anser": "^1.4.9",
     "ansi-regex": "^5.0.0",
@@ -85,7 +85,7 @@
     "just-scripts": "^1.3.3",
     "prettier": "2.8.8",
     "react": "18.3.1",
-    "react-native": "0.77.0-rc.0",
+    "react-native": "0.77.0-rc.4",
     "react-native-platform-override": "^1.9.49",
     "react-refresh": "^0.14.0",
     "typescript": "5.0.4"
@@ -93,7 +93,7 @@
   "peerDependencies": {
     "@types/react": "^18.2.6",
     "react": "^18.2.0",
-    "react-native": "0.77.0-rc.0"
+    "react-native": "0.77.0-rc.4"
   },
   "beachball": {
     "defaultNpmTag": "preview",

package/src/private/animated/useAnimatedPropsMemo.js

@@ -113,7 +113,7 @@ export function createCompositeKeyForProps(
     const key = keys[ii];
     const value = props[key];
 
-    if (allowlist == null || Object.hasOwn(allowlist, key)) {
+    if (allowlist == null || hasOwn(allowlist, key)) {
       let compositeKeyComponent;
       if (key === 'style') {
         // $FlowFixMe[incompatible-call] - `style` is a valid argument.
@@ -205,7 +205,7 @@ function createCompositeKeyForObject(
   for (let ii = 0, length = keys.length; ii < length; ii++) {
     const key = keys[ii];
 
-    if (allowlist == null || Object.hasOwn(allowlist, key)) {
+    if (allowlist == null || hasOwn(allowlist, key)) {
       const value = object[key];
 
       let compositeKeyComponent;
@@ -250,7 +250,7 @@ export function areCompositeKeysEqual(
   }
   for (let ii = 0; ii < length; ii++) {
     const key = keys[ii];
-    if (!Object.hasOwn(next, key)) {
+    if (!hasOwn(next, key)) {
       return false;
     }
     const prevComponent = prev[key];
@@ -336,7 +336,7 @@ function areCompositeKeyComponentsEqual(
     for (let ii = 0; ii < length; ii++) {
       const key = keys[ii];
       if (
-        !Object.hasOwn(nullthrows(next), key) ||
+        !hasOwn(nullthrows(next), key) ||
         !areCompositeKeyComponentsEqual(prev[key], next[key])
       ) {
         return false;
@@ -346,3 +346,11 @@ function areCompositeKeyComponentsEqual(
   }
   return false;
 }
+
+// Supported versions of JSC do not implement the newer Object.hasOwn. Remove
+// this shim when they do.
+// $FlowIgnore[method-unbinding]
+const _hasOwnProp = Object.prototype.hasOwnProperty;
+const hasOwn: (obj: $ReadOnly<{...}>, prop: string) => boolean =
+  // $FlowIgnore[method-unbinding]
+  Object.hasOwn ?? ((obj, prop) => _hasOwnProp.call(obj, prop));

package/Libraries/Animated/NativeAnimatedAllowlist.windows.js

@@ -1,122 +0,0 @@
-/**
- * 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 './nodes/AnimatedProps';
-
-import * as ReactNativeFeatureFlags from '../../src/private/featureflags/ReactNativeFeatureFlags';
-
-/**
- * Styles allowed by the native animated implementation.
- *
- * In general native animated implementation should support any numeric or color property that
- * doesn't need to be updated through the shadow view hierarchy (all non-layout properties).
- */
-const SUPPORTED_COLOR_STYLES: {[string]: true} = {
-  backgroundColor: true,
-  borderBottomColor: true,
-  borderColor: true,
-  borderEndColor: true,
-  borderLeftColor: true,
-  borderRightColor: true,
-  borderStartColor: true,
-  borderTopColor: true,
-  color: true,
-  tintColor: true,
-};
-
-const SUPPORTED_STYLES: {[string]: true} = {
-  ...SUPPORTED_COLOR_STYLES,
-  borderBottomEndRadius: true,
-  borderBottomLeftRadius: true,
-  borderBottomRightRadius: true,
-  borderBottomStartRadius: true,
-  borderEndEndRadius: true,
-  borderEndStartRadius: true,
-  borderRadius: true,
-  borderTopEndRadius: true,
-  borderTopLeftRadius: true,
-  borderTopRightRadius: true,
-  borderTopStartRadius: true,
-  borderStartEndRadius: true,
-  borderStartStartRadius: true,
-  elevation: true,
-  opacity: true,
-  transform: true,
-  zIndex: true,
-  /* ios styles */
-  shadowOpacity: true,
-  shadowRadius: true,
-  /* legacy android transform properties */
-  scaleX: true,
-  scaleY: true,
-  translateX: true,
-  translateY: true,
-};
-
-const SUPPORTED_TRANSFORMS: {[string]: true} = {
-  translateX: true,
-  translateY: true,
-  scale: true,
-  scaleX: true,
-  scaleY: true,
-  rotate: true,
-  rotateX: true,
-  rotateY: true,
-  rotateZ: true,
-  perspective: true,
-  skewX: true,
-  skewY: true,
-  ...(ReactNativeFeatureFlags.shouldUseAnimatedObjectForTransform()
-    ? {matrix: true}
-    : {}),
-};
-
-const SUPPORTED_INTERPOLATION_PARAMS: {[string]: true} = {
-  inputRange: true,
-  outputRange: true,
-  extrapolate: true,
-  extrapolateRight: true,
-  extrapolateLeft: true,
-};
-
-/**
- * Default allowlist for component props that support native animated values.
- */
-export default {
-  style: SUPPORTED_STYLES,
-} as AnimatedPropsAllowlist;
-
-export function allowInterpolationParam(param: string): void {
-  SUPPORTED_INTERPOLATION_PARAMS[param] = true;
-}
-
-export function allowStyleProp(prop: string): void {
-  SUPPORTED_STYLES[prop] = true;
-}
-
-export function allowTransformProp(prop: string): void {
-  SUPPORTED_TRANSFORMS[prop] = true;
-}
-
-export function isSupportedColorStyleProp(prop: string): boolean {
-  return SUPPORTED_COLOR_STYLES.hasOwnProperty(prop);
-}
-
-export function isSupportedInterpolationParam(param: string): boolean {
-  return SUPPORTED_INTERPOLATION_PARAMS.hasOwnProperty(param);
-}
-
-export function isSupportedStyleProp(prop: string): boolean {
-  return SUPPORTED_STYLES.hasOwnProperty(prop);
-}
-
-export function isSupportedTransformProp(prop: string): boolean {
-  return SUPPORTED_TRANSFORMS.hasOwnProperty(prop);
-}

package/Libraries/Animated/nodes/AnimatedProps.windows.js

@@ -1,281 +0,0 @@
-/**
- * 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
- * @format
- */
-
-import type {PlatformConfig} from '../AnimatedPlatformConfig';
-import type {AnimatedStyleAllowlist} from './AnimatedStyle';
-
-import NativeAnimatedHelper from '../../../src/private/animated/NativeAnimatedHelper';
-import {findNodeHandle} from '../../ReactNative/RendererProxy';
-import {AnimatedEvent} from '../AnimatedEvent';
-import AnimatedNode from './AnimatedNode';
-import AnimatedObject from './AnimatedObject';
-import AnimatedStyle from './AnimatedStyle';
-import invariant from 'invariant';
-
-export type AnimatedPropsAllowlist = $ReadOnly<{
-  style?: ?AnimatedStyleAllowlist,
-  [string]: true,
-}>;
-
-function createAnimatedProps(
-  inputProps: {[string]: mixed},
-  allowlist: ?AnimatedPropsAllowlist,
-): [$ReadOnlyArray<string>, $ReadOnlyArray<AnimatedNode>, {[string]: mixed}] {
-  const nodeKeys: Array<string> = [];
-  const nodes: Array<AnimatedNode> = [];
-  const props: {[string]: mixed} = {};
-
-  const keys = Object.keys(inputProps);
-  for (let ii = 0, length = keys.length; ii < length; ii++) {
-    const key = keys[ii];
-    const value = inputProps[key];
-
-    if (allowlist == null || hasOwn(allowlist, key)) {
-      let node;
-      if (key === 'style') {
-        node = AnimatedStyle.from(value, allowlist?.style);
-      } else if (value instanceof AnimatedNode) {
-        node = value;
-      } else {
-        node = AnimatedObject.from(value);
-      }
-      if (node == null) {
-        props[key] = value;
-      } else {
-        nodeKeys.push(key);
-        nodes.push(node);
-        props[key] = node;
-      }
-    } else {
-      if (__DEV__) {
-        // WARNING: This is a potentially expensive check that we should only
-        // do in development. Without this check in development, it might be
-        // difficult to identify which props need to be allowlisted.
-        if (AnimatedObject.from(inputProps[key]) != null) {
-          console.error(
-            `AnimatedProps: ${key} is not allowlisted for animation, but it ` +
-              'contains AnimatedNode values; props allowing animation: ',
-            allowlist,
-          );
-        }
-      }
-      props[key] = value;
-    }
-  }
-
-  return [nodeKeys, nodes, props];
-}
-
-export default class AnimatedProps extends AnimatedNode {
-  #animatedView: any = null;
-  #callback: () => void;
-  #nodeKeys: $ReadOnlyArray<string>;
-  #nodes: $ReadOnlyArray<AnimatedNode>;
-  #props: {[string]: mixed};
-
-  constructor(
-    inputProps: {[string]: mixed},
-    callback: () => void,
-    allowlist?: ?AnimatedPropsAllowlist,
-  ) {
-    super();
-    const [nodeKeys, nodes, props] = createAnimatedProps(inputProps, allowlist);
-    this.#nodeKeys = nodeKeys;
-    this.#nodes = nodes;
-    this.#props = props;
-    this.#callback = callback;
-  }
-
-  __getValue(): Object {
-    const props: {[string]: mixed} = {};
-
-    const keys = Object.keys(this.#props);
-    for (let ii = 0, length = keys.length; ii < length; ii++) {
-      const key = keys[ii];
-      const value = this.#props[key];
-
-      if (value instanceof AnimatedNode) {
-        props[key] = value.__getValue();
-      } else if (value instanceof AnimatedEvent) {
-        props[key] = value.__getHandler();
-      } else {
-        props[key] = value;
-      }
-    }
-
-    return props;
-  }
-
-  /**
-   * Creates a new `props` object that contains the same props as the supplied
-   * `staticProps` object, except with animated nodes for any props that were
-   * created by this `AnimatedProps` instance.
-   */
-  __getValueWithStaticProps(staticProps: Object): Object {
-    const props: {[string]: mixed} = {...staticProps};
-
-    const keys = Object.keys(staticProps);
-    for (let ii = 0, length = keys.length; ii < length; ii++) {
-      const key = keys[ii];
-      const maybeNode = this.#props[key];
-
-      if (key === 'style' && maybeNode instanceof AnimatedStyle) {
-        props[key] = maybeNode.__getValueWithStaticStyle(staticProps.style);
-      } else if (maybeNode instanceof AnimatedNode) {
-        props[key] = maybeNode.__getValue();
-      } else if (maybeNode instanceof AnimatedEvent) {
-        props[key] = maybeNode.__getHandler();
-      }
-    }
-
-    return props;
-  }
-
-  __getAnimatedValue(): Object {
-    const props: {[string]: mixed} = {};
-
-    const nodeKeys = this.#nodeKeys;
-    const nodes = this.#nodes;
-    for (let ii = 0, length = nodes.length; ii < length; ii++) {
-      const key = nodeKeys[ii];
-      const node = nodes[ii];
-      props[key] = node.__getAnimatedValue();
-    }
-
-    return props;
-  }
-
-  __attach(): void {
-    const nodes = this.#nodes;
-    for (let ii = 0, length = nodes.length; ii < length; ii++) {
-      const node = nodes[ii];
-      node.__addChild(this);
-    }
-  }
-
-  __detach(): void {
-    if (this.__isNative && this.#animatedView) {
-      this.__disconnectAnimatedView();
-    }
-    this.#animatedView = null;
-
-    const nodes = this.#nodes;
-    for (let ii = 0, length = nodes.length; ii < length; ii++) {
-      const node = nodes[ii];
-      node.__removeChild(this);
-    }
-
-    super.__detach();
-  }
-
-  update(): void {
-    this.#callback();
-  }
-
-  __makeNative(platformConfig: ?PlatformConfig): void {
-    const nodes = this.#nodes;
-    for (let ii = 0, length = nodes.length; ii < length; ii++) {
-      const node = nodes[ii];
-      node.__makeNative(platformConfig);
-    }
-
-    if (!this.__isNative) {
-      this.__isNative = true;
-
-      // Since this does not call the super.__makeNative, we need to store the
-      // supplied platformConfig here, before calling __connectAnimatedView
-      // where it will be needed to traverse the graph of attached values.
-      super.__setPlatformConfig(platformConfig);
-
-      if (this.#animatedView) {
-        this.__connectAnimatedView();
-      }
-    }
-  }
-
-  setNativeView(animatedView: any): void {
-    if (this.#animatedView === animatedView) {
-      return;
-    }
-    this.#animatedView = animatedView;
-    if (this.__isNative) {
-      this.__connectAnimatedView();
-    }
-  }
-
-  __connectAnimatedView(): void {
-    invariant(this.__isNative, 'Expected node to be marked as "native"');
-    let nativeViewTag: ?number = findNodeHandle(this.#animatedView);
-    if (nativeViewTag == null) {
-      if (process.env.NODE_ENV === 'test') {
-        nativeViewTag = -1;
-      } else {
-        throw new Error('Unable to locate attached view in the native tree');
-      }
-    }
-    NativeAnimatedHelper.API.connectAnimatedNodeToView(
-      this.__getNativeTag(),
-      nativeViewTag,
-    );
-  }
-
-  __disconnectAnimatedView(): void {
-    invariant(this.__isNative, 'Expected node to be marked as "native"');
-    let nativeViewTag: ?number = findNodeHandle(this.#animatedView);
-    if (nativeViewTag == null) {
-      if (process.env.NODE_ENV === 'test') {
-        nativeViewTag = -1;
-      } else {
-        throw new Error('Unable to locate attached view in the native tree');
-      }
-    }
-    NativeAnimatedHelper.API.disconnectAnimatedNodeFromView(
-      this.__getNativeTag(),
-      nativeViewTag,
-    );
-  }
-
-  __restoreDefaultValues(): void {
-    // When using the native driver, view properties need to be restored to
-    // their default values manually since react no longer tracks them. This
-    // is needed to handle cases where a prop driven by native animated is removed
-    // after having been changed natively by an animation.
-    if (this.__isNative) {
-      NativeAnimatedHelper.API.restoreDefaultValues(this.__getNativeTag());
-    }
-  }
-
-  __getNativeConfig(): Object {
-    const platformConfig = this.__getPlatformConfig();
-    const propsConfig: {[string]: number} = {};
-
-    const nodeKeys = this.#nodeKeys;
-    const nodes = this.#nodes;
-    for (let ii = 0, length = nodes.length; ii < length; ii++) {
-      const key = nodeKeys[ii];
-      const node = nodes[ii];
-      node.__makeNative(platformConfig);
-      propsConfig[key] = node.__getNativeTag();
-    }
-
-    return {
-      type: 'props',
-      props: propsConfig,
-    };
-  }
-}
-
-// Supported versions of JSC do not implement the newer Object.hasOwn. Remove
-// this shim when they do.
-// $FlowIgnore[method-unbinding]
-const _hasOwnProp = Object.prototype.hasOwnProperty;
-const hasOwn: (obj: $ReadOnly<{...}>, prop: string) => boolean =
-  // $FlowIgnore[method-unbinding]
-  Object.hasOwn ?? ((obj, prop) => _hasOwnProp.call(obj, prop));

package/Libraries/Animated/nodes/AnimatedStyle.windows.js

@@ -1,251 +0,0 @@
-/**
- * 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
- * @format
- */
-
-import type {PlatformConfig} from '../AnimatedPlatformConfig';
-
-import {validateStyles} from '../../../src/private/animated/NativeAnimatedValidation';
-import * as ReactNativeFeatureFlags from '../../../src/private/featureflags/ReactNativeFeatureFlags';
-import flattenStyle from '../../StyleSheet/flattenStyle';
-import Platform from '../../Utilities/Platform';
-import AnimatedNode from './AnimatedNode';
-import AnimatedObject from './AnimatedObject';
-import AnimatedTransform from './AnimatedTransform';
-import AnimatedWithChildren from './AnimatedWithChildren';
-
-export type AnimatedStyleAllowlist = $ReadOnly<{[string]: true}>;
-
-function createAnimatedStyle(
-  inputStyle: {[string]: mixed},
-  allowlist: ?AnimatedStyleAllowlist,
-  keepUnanimatedValues: boolean,
-): [$ReadOnlyArray<string>, $ReadOnlyArray<AnimatedNode>, {[string]: mixed}] {
-  const nodeKeys: Array<string> = [];
-  const nodes: Array<AnimatedNode> = [];
-  const style: {[string]: mixed} = {};
-
-  const keys = Object.keys(inputStyle);
-  for (let ii = 0, length = keys.length; ii < length; ii++) {
-    const key = keys[ii];
-    const value = inputStyle[key];
-
-    if (allowlist == null || hasOwn(allowlist, key)) {
-      let node;
-      if (value != null && key === 'transform') {
-        node = ReactNativeFeatureFlags.shouldUseAnimatedObjectForTransform()
-          ? AnimatedObject.from(value)
-          : // $FlowFixMe[incompatible-call] - `value` is mixed.
-            AnimatedTransform.from(value);
-      } else if (value instanceof AnimatedNode) {
-        node = value;
-      } else {
-        node = AnimatedObject.from(value);
-      }
-      if (node == null) {
-        if (keepUnanimatedValues) {
-          style[key] = value;
-        }
-      } else {
-        nodeKeys.push(key);
-        nodes.push(node);
-        style[key] = node;
-      }
-    } else {
-      if (__DEV__) {
-        // WARNING: This is a potentially expensive check that we should only
-        // do in development. Without this check in development, it might be
-        // difficult to identify which styles need to be allowlisted.
-        if (AnimatedObject.from(inputStyle[key]) != null) {
-          console.error(
-            `AnimatedStyle: ${key} is not allowlisted for animation, but it ` +
-              'contains AnimatedNode values; styles allowing animation: ',
-            allowlist,
-          );
-        }
-      }
-      if (keepUnanimatedValues) {
-        style[key] = value;
-      }
-    }
-  }
-
-  return [nodeKeys, nodes, style];
-}
-
-export default class AnimatedStyle extends AnimatedWithChildren {
-  #inputStyle: any;
-  #nodeKeys: $ReadOnlyArray<string>;
-  #nodes: $ReadOnlyArray<AnimatedNode>;
-  #style: {[string]: mixed};
-
-  /**
-   * Creates an `AnimatedStyle` if `value` contains `AnimatedNode` instances.
-   * Otherwise, returns `null`.
-   */
-  static from(
-    inputStyle: any,
-    allowlist: ?AnimatedStyleAllowlist,
-  ): ?AnimatedStyle {
-    const flatStyle = flattenStyle(inputStyle);
-    if (flatStyle == null) {
-      return null;
-    }
-    const [nodeKeys, nodes, style] = createAnimatedStyle(
-      flatStyle,
-      allowlist,
-      Platform.OS !== 'web',
-    );
-    if (nodes.length === 0) {
-      return null;
-    }
-    return new AnimatedStyle(nodeKeys, nodes, style, inputStyle);
-  }
-
-  constructor(
-    nodeKeys: $ReadOnlyArray<string>,
-    nodes: $ReadOnlyArray<AnimatedNode>,
-    style: {[string]: mixed},
-    inputStyle: any,
-  ) {
-    super();
-    this.#nodeKeys = nodeKeys;
-    this.#nodes = nodes;
-    this.#style = style;
-    this.#inputStyle = inputStyle;
-  }
-
-  __getValue(): Object | Array<Object> {
-    const style: {[string]: mixed} = {};
-
-    const keys = Object.keys(this.#style);
-    for (let ii = 0, length = keys.length; ii < length; ii++) {
-      const key = keys[ii];
-      const value = this.#style[key];
-
-      if (value instanceof AnimatedNode) {
-        style[key] = value.__getValue();
-      } else {
-        style[key] = value;
-      }
-    }
-
-    /* $FlowFixMe[incompatible-type] Error found due to incomplete typing of
-     * Platform.flow.js */
-    return Platform.OS === 'web' ? [this.#inputStyle, style] : style;
-  }
-
-  /**
-   * Creates a new `style` object that contains the same style properties as
-   * the supplied `staticStyle` object, except with animated nodes for any
-   * style properties that were created by this `AnimatedStyle` instance.
-   */
-  __getValueWithStaticStyle(staticStyle: Object): Object | Array<Object> {
-    const flatStaticStyle = flattenStyle(staticStyle);
-    const style: {[string]: mixed} =
-      flatStaticStyle == null
-        ? {}
-        : flatStaticStyle === staticStyle
-          ? // Copy the input style, since we'll mutate it below.
-            {...flatStaticStyle}
-          : // Reuse `flatStaticStyle` if it is a newly created object.
-            flatStaticStyle;
-
-    const keys = Object.keys(style);
-    for (let ii = 0, length = keys.length; ii < length; ii++) {
-      const key = keys[ii];
-      const maybeNode = this.#style[key];
-
-      if (key === 'transform' && maybeNode instanceof AnimatedTransform) {
-        style[key] = maybeNode.__getValueWithStaticTransforms(
-          // NOTE: This check should not be necessary, but the types are not
-          // enforced as of this writing.
-          Array.isArray(style[key]) ? style[key] : [],
-        );
-      } else if (maybeNode instanceof AnimatedObject) {
-        style[key] = maybeNode.__getValueWithStaticObject(style[key]);
-      } else if (maybeNode instanceof AnimatedNode) {
-        style[key] = maybeNode.__getValue();
-      }
-    }
-
-    /* $FlowFixMe[incompatible-type] Error found due to incomplete typing of
-     * Platform.flow.js */
-    return Platform.OS === 'web' ? [this.#inputStyle, style] : style;
-  }
-
-  __getAnimatedValue(): Object {
-    const style: {[string]: mixed} = {};
-
-    const nodeKeys = this.#nodeKeys;
-    const nodes = this.#nodes;
-    for (let ii = 0, length = nodes.length; ii < length; ii++) {
-      const key = nodeKeys[ii];
-      const node = nodes[ii];
-      style[key] = node.__getAnimatedValue();
-    }
-
-    return style;
-  }
-
-  __attach(): void {
-    const nodes = this.#nodes;
-    for (let ii = 0, length = nodes.length; ii < length; ii++) {
-      const node = nodes[ii];
-      node.__addChild(this);
-    }
-  }
-
-  __detach(): void {
-    const nodes = this.#nodes;
-    for (let ii = 0, length = nodes.length; ii < length; ii++) {
-      const node = nodes[ii];
-      node.__removeChild(this);
-    }
-    super.__detach();
-  }
-
-  __makeNative(platformConfig: ?PlatformConfig) {
-    const nodes = this.#nodes;
-    for (let ii = 0, length = nodes.length; ii < length; ii++) {
-      const node = nodes[ii];
-      node.__makeNative(platformConfig);
-    }
-    super.__makeNative(platformConfig);
-  }
-
-  __getNativeConfig(): Object {
-    const platformConfig = this.__getPlatformConfig();
-    const styleConfig: {[string]: ?number} = {};
-
-    const nodeKeys = this.#nodeKeys;
-    const nodes = this.#nodes;
-    for (let ii = 0, length = nodes.length; ii < length; ii++) {
-      const key = nodeKeys[ii];
-      const node = nodes[ii];
-      node.__makeNative(platformConfig);
-      styleConfig[key] = node.__getNativeTag();
-    }
-
-    if (__DEV__) {
-      validateStyles(styleConfig);
-    }
-    return {
-      type: 'style',
-      style: styleConfig,
-    };
-  }
-}
-
-// Supported versions of JSC do not implement the newer Object.hasOwn. Remove
-// this shim when they do.
-// $FlowIgnore[method-unbinding]
-const _hasOwnProp = Object.prototype.hasOwnProperty;
-const hasOwn: (obj: $ReadOnly<{...}>, prop: string) => boolean =
-  // $FlowIgnore[method-unbinding]
-  Object.hasOwn ?? ((obj, prop) => _hasOwnProp.call(obj, prop));

package/src/private/animated/useAnimatedPropsMemo.windows.js

@@ -1,356 +0,0 @@
-/**
- * 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
- * @oncall react_native
- */
-
-import type AnimatedProps from '../../../Libraries/Animated/nodes/AnimatedProps';
-import type {AnimatedPropsAllowlist} from '../../../Libraries/Animated/nodes/AnimatedProps';
-import type {AnimatedStyleAllowlist} from '../../../Libraries/Animated/nodes/AnimatedStyle';
-
-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 nullthrows from 'nullthrows';
-import {useMemo, useState} from 'react';
-
-type CompositeKey = {
-  style?: {[string]: CompositeKeyComponent},
-  [string]:
-    | CompositeKeyComponent
-    | AnimatedEvent
-    | $ReadOnlyArray<mixed>
-    | $ReadOnly<{[string]: mixed}>,
-};
-
-type CompositeKeyComponent =
-  | AnimatedNode
-  | Array<CompositeKeyComponent | null>
-  | {[string]: CompositeKeyComponent};
-
-type $ReadOnlyCompositeKey = $ReadOnly<{
-  style?: $ReadOnly<{[string]: CompositeKeyComponent}>,
-  [string]:
-    | $ReadOnlyCompositeKeyComponent
-    | AnimatedEvent
-    | $ReadOnlyArray<mixed>
-    | $ReadOnly<{[string]: mixed}>,
-}>;
-
-type $ReadOnlyCompositeKeyComponent =
-  | AnimatedNode
-  | $ReadOnlyArray<$ReadOnlyCompositeKeyComponent | null>
-  | $ReadOnly<{[string]: $ReadOnlyCompositeKeyComponent}>;
-
-/**
- * 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({
-      allowlist,
-      compositeKey,
-      value: create(),
-    });
-  }
-  return state.value;
-}
-
-/**
- * Creates a new composite key for a `props` object that can be used to detect
- * whether a new `AnimatedProps` instance must be created.
- *
- * - With an allowlist, those props are searched for `AnimatedNode` instances.
- * - Without an allowlist, `style` is searched for `AnimatedNode` instances,
- *   but all other objects and arrays are included (not searched). We do not
- *   search objects and arrays without an allowlist in case they are very large
- *   data structures. We safely traverse `style` becuase it is bounded.
- *
- * Any `AnimatedEvent` instances at the first depth are always included.
- *
- * If `props` contains no `AnimatedNode` or `AnimatedEvent` instances, this
- * returns null.
- */
-export function createCompositeKeyForProps(
-  props: $ReadOnly<{[string]: mixed}>,
-  allowlist: ?AnimatedPropsAllowlist,
-): $ReadOnlyCompositeKey | null {
-  let compositeKey: CompositeKey | null = null;
-
-  const keys = Object.keys(props);
-  for (let ii = 0, length = keys.length; ii < length; ii++) {
-    const key = keys[ii];
-    const value = props[key];
-
-    if (allowlist == null || hasOwn(allowlist, key)) {
-      let compositeKeyComponent;
-      if (key === 'style') {
-        // $FlowFixMe[incompatible-call] - `style` is a valid argument.
-        // $FlowFixMe[incompatible-type] - `flattenStyle` returns an object.
-        const flatStyle: ?{[string]: mixed} = flattenStyle(value);
-        if (flatStyle != null) {
-          compositeKeyComponent = createCompositeKeyForObject(
-            flatStyle,
-            allowlist?.style,
-          );
-        }
-      } else if (
-        value instanceof AnimatedNode ||
-        value instanceof AnimatedEvent
-      ) {
-        compositeKeyComponent = value;
-      } else if (Array.isArray(value)) {
-        compositeKeyComponent =
-          allowlist == null ? value : createCompositeKeyForArray(value);
-      } else if (isPlainObject(value)) {
-        compositeKeyComponent =
-          allowlist == null ? value : createCompositeKeyForObject(value);
-      }
-      if (compositeKeyComponent != null) {
-        if (compositeKey == null) {
-          compositeKey = {} as CompositeKey;
-        }
-        compositeKey[key] = compositeKeyComponent;
-      }
-    }
-  }
-
-  return compositeKey;
-}
-
-/**
- * Creates a new composite key for an array that retains all values that are or
- * contain `AnimatedNode` instances, and `null` for the rest.
- *
- * If `array` contains no `AnimatedNode` instances, this returns null.
- */
-function createCompositeKeyForArray(
-  array: $ReadOnlyArray<mixed>,
-): $ReadOnlyArray<$ReadOnlyCompositeKeyComponent | null> | null {
-  let compositeKey: Array<$ReadOnlyCompositeKeyComponent | null> | null = null;
-
-  for (let ii = 0, length = array.length; ii < length; ii++) {
-    const value = array[ii];
-
-    let compositeKeyComponent;
-    if (value instanceof AnimatedNode) {
-      compositeKeyComponent = value;
-    } else if (Array.isArray(value)) {
-      compositeKeyComponent = createCompositeKeyForArray(value);
-    } else if (isPlainObject(value)) {
-      compositeKeyComponent = createCompositeKeyForObject(value);
-    }
-    if (compositeKeyComponent != null) {
-      if (compositeKey == null) {
-        compositeKey = new Array<$ReadOnlyCompositeKeyComponent | null>(
-          array.length,
-        ).fill(null);
-      }
-      compositeKey[ii] = compositeKeyComponent;
-    }
-  }
-
-  return compositeKey;
-}
-
-/**
- * Creates a new composite key for an object that retains only properties that
- * are or contain `AnimatedNode` instances.
- *
- * When used to create composite keys for `style` props:
- *
- * - With an allowlist, those properties are searched.
- * - Without an allowlist, every property is searched.
- *
- * If `object` contains no `AnimatedNode` instances, this returns null.
- */
-function createCompositeKeyForObject(
-  object: $ReadOnly<{[string]: mixed}>,
-  allowlist?: ?AnimatedStyleAllowlist,
-): $ReadOnly<{[string]: $ReadOnlyCompositeKeyComponent}> | null {
-  let compositeKey: {[string]: $ReadOnlyCompositeKeyComponent} | null = null;
-
-  const keys = Object.keys(object);
-  for (let ii = 0, length = keys.length; ii < length; ii++) {
-    const key = keys[ii];
-
-    if (allowlist == null || hasOwn(allowlist, key)) {
-      const value = object[key];
-
-      let compositeKeyComponent;
-      if (value instanceof AnimatedNode) {
-        compositeKeyComponent = value;
-      } else if (Array.isArray(value)) {
-        compositeKeyComponent = createCompositeKeyForArray(value);
-      } else if (isPlainObject(value)) {
-        compositeKeyComponent = createCompositeKeyForObject(value);
-      }
-      if (compositeKeyComponent != null) {
-        if (compositeKey == null) {
-          compositeKey = {} as {[string]: $ReadOnlyCompositeKeyComponent};
-        }
-        compositeKey[key] = compositeKeyComponent;
-      }
-    }
-  }
-
-  return compositeKey;
-}
-
-export function areCompositeKeysEqual(
-  maybePrev: $ReadOnlyCompositeKey | null,
-  maybeNext: $ReadOnlyCompositeKey | null,
-  allowlist: ?AnimatedPropsAllowlist,
-): boolean {
-  if (maybePrev === maybeNext) {
-    return true;
-  }
-  if (maybePrev === null || maybeNext === null) {
-    return false;
-  }
-  // Help Flow retain the type refinements of these.
-  const prev = maybePrev;
-  const next = maybeNext;
-
-  const keys = Object.keys(prev);
-  const length = keys.length;
-  if (length !== Object.keys(next).length) {
-    return false;
-  }
-  for (let ii = 0; ii < length; ii++) {
-    const key = keys[ii];
-    if (!hasOwn(next, key)) {
-      return false;
-    }
-    const prevComponent = prev[key];
-    const nextComponent = next[key];
-
-    if (key === 'style') {
-      // We know style components are objects with non-mixed values.
-      if (
-        !areCompositeKeyComponentsEqual(
-          // $FlowIgnore[incompatible-cast]
-          prevComponent as $ReadOnlyCompositeKeyComponent,
-          // $FlowIgnore[incompatible-cast]
-          nextComponent as $ReadOnlyCompositeKeyComponent,
-        )
-      ) {
-        return false;
-      }
-    } else if (
-      prevComponent instanceof AnimatedNode ||
-      prevComponent instanceof AnimatedEvent
-    ) {
-      if (prevComponent !== nextComponent) {
-        return false;
-      }
-    } else {
-      // When `allowlist` is null, the components must be the same. Otherwise,
-      // we created the components using deep traversal, so deep compare them.
-      if (allowlist == null) {
-        if (prevComponent !== nextComponent) {
-          return false;
-        }
-      } else {
-        if (
-          !areCompositeKeyComponentsEqual(
-            // $FlowIgnore[incompatible-cast]
-            prevComponent as $ReadOnlyCompositeKeyComponent,
-            // $FlowIgnore[incompatible-cast]
-            nextComponent as $ReadOnlyCompositeKeyComponent,
-          )
-        ) {
-          return false;
-        }
-      }
-    }
-  }
-  return true;
-}
-
-function areCompositeKeyComponentsEqual(
-  prev: $ReadOnlyCompositeKeyComponent | null,
-  next: $ReadOnlyCompositeKeyComponent | null,
-): boolean {
-  if (prev === next) {
-    return true;
-  }
-  if (prev instanceof AnimatedNode) {
-    return prev === next;
-  }
-  if (Array.isArray(prev)) {
-    if (!Array.isArray(next)) {
-      return false;
-    }
-    const length = prev.length;
-    if (length !== next.length) {
-      return false;
-    }
-    for (let ii = 0; ii < length; ii++) {
-      if (!areCompositeKeyComponentsEqual(prev[ii], next[ii])) {
-        return false;
-      }
-    }
-    return true;
-  }
-  if (isPlainObject(prev)) {
-    if (!isPlainObject(next)) {
-      return false;
-    }
-    const keys = Object.keys(prev);
-    const length = keys.length;
-    if (length !== Object.keys(next).length) {
-      return false;
-    }
-    for (let ii = 0; ii < length; ii++) {
-      const key = keys[ii];
-      if (
-        !hasOwn(nullthrows(next), key) ||
-        !areCompositeKeyComponentsEqual(prev[key], next[key])
-      ) {
-        return false;
-      }
-    }
-    return true;
-  }
-  return false;
-}
-
-// Supported versions of JSC do not implement the newer Object.hasOwn. Remove
-// this shim when they do.
-// $FlowIgnore[method-unbinding]
-const _hasOwnProp = Object.prototype.hasOwnProperty;
-const hasOwn: (obj: $ReadOnly<{...}>, prop: string) => boolean =
-  // $FlowIgnore[method-unbinding]
-  Object.hasOwn ?? ((obj, prop) => _hasOwnProp.call(obj, prop));