@office-iss/react-native-win32 0.0.0-canary.264 → 0.0.0-canary.266

package/.flowconfig

@@ -160,4 +160,4 @@ untyped-import
 untyped-type-import
 
 [version]
-^0.245.2
+^0.246.0

package/CHANGELOG.json

@@ -2,9 +2,63 @@
   "name": "@office-iss/react-native-win32",
   "entries": [
     {
-      "date": "Thu, 26 Sep 2024 16:04:45 GMT",
-      "version": "0.0.0-canary.264",
-      "tag": "@office-iss/react-native-win32_v0.0.0-canary.264",
+      "date": "Thu, 10 Oct 2024 05:15:29 GMT",
+      "version": "0.0.0-canary.266",
+      "tag": "@office-iss/react-native-win32_v0.0.0-canary.266",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "jthysell@microsoft.com",
+            "package": "@office-iss/react-native-win32",
+            "commit": "61bde52b38ce5f74aa09d68974dcda306023f378",
+            "comment": "Update to @react-native-community/cli@15.0.0-alpha.2"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 07 Oct 2024 19:54:26 GMT",
+      "version": "0.0.0-canary.265",
+      "tag": "@office-iss/react-native-win32_v0.0.0-canary.265",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "tatianakapos@microsoft.com",
+            "package": "@office-iss/react-native-win32",
+            "commit": "eb6b345ee2128d56f32c85f1702bb093e0375a1f",
+            "comment": "integrate RN nightly 0.77.0-nightly-20240921-1747f57c6"
+          },
+          {
+            "author": "beachball",
+            "package": "@office-iss/react-native-win32",
+            "comment": "Bump @rnw-scripts/eslint-config to v1.2.29",
+            "commit": "not available"
+          },
+          {
+            "author": "beachball",
+            "package": "@office-iss/react-native-win32",
+            "comment": "Bump @rnw-scripts/jest-out-of-tree-snapshot-resolver to v1.1.33",
+            "commit": "not available"
+          },
+          {
+            "author": "beachball",
+            "package": "@office-iss/react-native-win32",
+            "comment": "Bump @rnw-scripts/just-task to v2.3.46",
+            "commit": "not available"
+          },
+          {
+            "author": "beachball",
+            "package": "@office-iss/react-native-win32",
+            "comment": "Bump react-native-platform-override to v1.9.48",
+            "commit": "not available"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 26 Sep 2024 17:38:26 GMT",
+      "version": "0.0.0-canary.263",
+      "tag": "@office-iss/react-native-win32_v0.0.0-canary.263",
       "comments": {
         "prerelease": [
           {
@@ -16,25 +70,25 @@
           {
             "author": "beachball",
             "package": "@office-iss/react-native-win32",
-            "comment": "Bump @rnw-scripts/eslint-config to v1.2.28",
+            "comment": "Bump @rnw-scripts/eslint-config to v1.2.27",
             "commit": "not available"
           },
           {
             "author": "beachball",
             "package": "@office-iss/react-native-win32",
-            "comment": "Bump @rnw-scripts/jest-out-of-tree-snapshot-resolver to v1.1.32",
+            "comment": "Bump @rnw-scripts/jest-out-of-tree-snapshot-resolver to v1.1.31",
             "commit": "not available"
           },
           {
             "author": "beachball",
             "package": "@office-iss/react-native-win32",
-            "comment": "Bump @rnw-scripts/just-task to v2.3.45",
+            "comment": "Bump @rnw-scripts/just-task to v2.3.44",
             "commit": "not available"
           },
           {
             "author": "beachball",
             "package": "@office-iss/react-native-win32",
-            "comment": "Bump react-native-platform-override to v1.9.47",
+            "comment": "Bump react-native-platform-override to v1.9.46",
             "commit": "not available"
           }
         ]

package/CHANGELOG.md

@@ -1,21 +1,41 @@
 # Change Log - @office-iss/react-native-win32
 
-<!-- This log was last generated on Thu, 26 Sep 2024 16:04:45 GMT and should not be manually modified. -->
+<!-- This log was last generated on Thu, 10 Oct 2024 05:15:29 GMT and should not be manually modified. -->
 
 <!-- Start content -->
 
-## 0.0.0-canary.264
+## 0.0.0-canary.266
 
-Thu, 26 Sep 2024 16:04:45 GMT
+Thu, 10 Oct 2024 05:15:29 GMT
 
 ### Changes
 
-- RN Integration 9/9 (1422161+marlenecota@users.noreply.github.com)
-- Bump @rnw-scripts/eslint-config to v1.2.28
-- Bump @rnw-scripts/jest-out-of-tree-snapshot-resolver to v1.1.32
-- Bump @rnw-scripts/just-task to v2.3.45
-- Bump react-native-platform-override to v1.9.47
+- Update to @react-native-community/cli@15.0.0-alpha.2 (jthysell@microsoft.com)
 
+## 0.0.0-canary.265
+
+Mon, 07 Oct 2024 19:54:26 GMT
+
+### Changes
+
+- integrate RN nightly 0.77.0-nightly-20240921-1747f57c6 (tatianakapos@microsoft.com)
+- Bump @rnw-scripts/eslint-config to v1.2.29
+- Bump @rnw-scripts/jest-out-of-tree-snapshot-resolver to v1.1.33
+- Bump @rnw-scripts/just-task to v2.3.46
+- Bump react-native-platform-override to v1.9.48
+
+## 0.0.0-canary.263
+
+Thu, 26 Sep 2024 17:38:26 GMT
+
+### Changes
+
+- RN Integration 9/9 (1422161+marlenecota@users.noreply.github.com)
+- Bump @rnw-scripts/eslint-config to v1.2.27
+- Bump @rnw-scripts/jest-out-of-tree-snapshot-resolver to v1.1.31
+- Bump @rnw-scripts/just-task to v2.3.44
+- Bump react-native-platform-override to v1.9.46
+
 ## 0.0.0-canary.262
 
 Sat, 07 Sep 2024 05:14:10 GMT

package/Libraries/Animated/AnimatedImplementation.js

@@ -373,7 +373,7 @@ const parallel = function (
   const stopTogether = !(config && config.stopTogether === false);
 
   const result = {
-    start: function (callback?: ?EndCallback) {
+    start: function (callback?: ?EndCallback, isLooping?: boolean) {
       if (doneCount === animations.length) {
         callback && callback({finished: true});
         return;
@@ -397,7 +397,7 @@ const parallel = function (
         if (!animation) {
           cb({finished: true});
         } else {
-          animation.start(cb);
+          animation.start(cb, isLooping);
         }
       });
     },

package/Libraries/Animated/NativeAnimatedAllowlist.js

@@ -8,6 +8,8 @@
  * @format
  */
 
+import type {AnimatedPropsAllowlist} from './nodes/AnimatedProps';
+
 import * as ReactNativeFeatureFlags from '../../src/private/featureflags/ReactNativeFeatureFlags';
 
 /**
@@ -16,7 +18,7 @@ import * as ReactNativeFeatureFlags from '../../src/private/featureflags/ReactNa
  * 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]: boolean} = {
+const SUPPORTED_COLOR_STYLES: {[string]: true} = {
   backgroundColor: true,
   borderBottomColor: true,
   borderColor: true,
@@ -29,7 +31,7 @@ const SUPPORTED_COLOR_STYLES: {[string]: boolean} = {
   tintColor: true,
 };
 
-const SUPPORTED_STYLES: {[string]: boolean} = {
+const SUPPORTED_STYLES: {[string]: true} = {
   ...SUPPORTED_COLOR_STYLES,
   borderBottomEndRadius: true,
   borderBottomLeftRadius: true,
@@ -58,7 +60,7 @@ const SUPPORTED_STYLES: {[string]: boolean} = {
   translateY: true,
 };
 
-const SUPPORTED_TRANSFORMS: {[string]: boolean} = {
+const SUPPORTED_TRANSFORMS: {[string]: true} = {
   translateX: true,
   translateY: true,
   scale: true,
@@ -71,10 +73,12 @@ const SUPPORTED_TRANSFORMS: {[string]: boolean} = {
   perspective: true,
   skewX: true,
   skewY: true,
-  matrix: ReactNativeFeatureFlags.shouldUseAnimatedObjectForTransform(),
+  ...(ReactNativeFeatureFlags.shouldUseAnimatedObjectForTransform()
+    ? {matrix: true}
+    : {}),
 };
 
-const SUPPORTED_INTERPOLATION_PARAMS: {[string]: boolean} = {
+const SUPPORTED_INTERPOLATION_PARAMS: {[string]: true} = {
   inputRange: true,
   outputRange: true,
   extrapolate: true,
@@ -82,6 +86,13 @@ const SUPPORTED_INTERPOLATION_PARAMS: {[string]: boolean} = {
   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;
 }
@@ -95,17 +106,17 @@ export function allowTransformProp(prop: string): void {
 }
 
 export function isSupportedColorStyleProp(prop: string): boolean {
-  return SUPPORTED_COLOR_STYLES[prop] === true;
+  return Object.hasOwn(SUPPORTED_COLOR_STYLES, prop);
 }
 
 export function isSupportedInterpolationParam(param: string): boolean {
-  return SUPPORTED_INTERPOLATION_PARAMS[param] === true;
+  return Object.hasOwn(SUPPORTED_INTERPOLATION_PARAMS, param);
 }
 
 export function isSupportedStyleProp(prop: string): boolean {
-  return SUPPORTED_STYLES[prop] === true;
+  return Object.hasOwn(SUPPORTED_STYLES, prop);
 }
 
 export function isSupportedTransformProp(prop: string): boolean {
-  return SUPPORTED_TRANSFORMS[prop] === true;
+  return Object.hasOwn(SUPPORTED_TRANSFORMS, prop);
 }

package/Libraries/Animated/animations/Animation.js

@@ -110,10 +110,7 @@ export default class Animation {
           if (value != null) {
             animatedValue.__onAnimatedValueUpdateReceived(value);
 
-            if (
-              ReactNativeFeatureFlags.shouldSkipStateUpdatesForLoopingAnimations() &&
-              this.__isLooping
-            ) {
+            if (this.__isLooping) {
               return;
             }
 

package/Libraries/Animated/createAnimatedComponent.js

@@ -8,6 +8,8 @@
  * @format
  */
 
+import type {AnimatedPropsAllowlist} from './nodes/AnimatedProps';
+
 import composeStyles from '../../src/private/styles/composeStyles';
 import View from '../Components/View/View';
 import useMergeRefs from '../Utilities/useMergeRefs';
@@ -32,12 +34,23 @@ export type AnimatedComponentType<
 
 export default function createAnimatedComponent<TProps: {...}, TInstance>(
   Component: React.AbstractComponent<TProps, TInstance>,
+): AnimatedComponentType<TProps, TInstance> {
+  return unstable_createAnimatedComponentWithAllowlist(Component, null);
+}
+
+export function unstable_createAnimatedComponentWithAllowlist<
+  TProps: {...},
+  TInstance,
+>(
+  Component: React.AbstractComponent<TProps, TInstance>,
+  allowlist: ?AnimatedPropsAllowlist,
 ): AnimatedComponentType<TProps, TInstance> {
   const AnimatedComponent = React.forwardRef<AnimatedProps<TProps>, TInstance>(
     (props, forwardedRef) => {
       const [reducedProps, callbackRef] = useAnimatedProps<TProps, TInstance>(
         // $FlowFixMe[incompatible-call]
         props,
+        allowlist,
       );
       const ref = useMergeRefs<TInstance>(callbackRef, forwardedRef);
 

package/Libraries/Animated/nodes/AnimatedNode.js

@@ -8,8 +8,6 @@
  * @format
  */
 
-'use strict';
-
 import type {EventSubscription} from '../../vendor/emitter/EventEmitter';
 import type {PlatformConfig} from '../AnimatedPlatformConfig';
 
@@ -29,12 +27,11 @@ let _assertNativeAnimatedModule: ?() => void = () => {
   _assertNativeAnimatedModule = null;
 };
 
-// Note(vjeux): this would be better as an interface but flow doesn't
-// support them yet
 export default class AnimatedNode {
   #listeners: Map<string, ValueListenerCallback> = new Map();
+  #updateSubscription: ?EventSubscription = null;
+
   _platformConfig: ?PlatformConfig = undefined;
-  __nativeAnimatedValueListener: ?EventSubscription = null;
   __attach(): void {}
   __detach(): void {
     this.removeAllListeners();
@@ -56,16 +53,17 @@ export default class AnimatedNode {
   /* Methods and props used by native Animated impl */
   __isNative: boolean = false;
   __nativeTag: ?number = undefined;
-  __shouldUpdateListenersForNewNativeTag: boolean = false;
 
   __makeNative(platformConfig: ?PlatformConfig): void {
-    if (!this.__isNative) {
-      throw new Error('This node cannot be made a "native" animated node');
-    }
+    // Subclasses are expected to set `__isNative` to true before this.
+    invariant(
+      this.__isNative,
+      'This node cannot be made a "native" animated node',
+    );
 
     this._platformConfig = platformConfig;
     if (this.#listeners.size > 0) {
-      this._startListeningToNativeValueUpdates();
+      this.#ensureUpdateSubscriptionExists();
     }
   }
 
@@ -80,7 +78,7 @@ export default class AnimatedNode {
     const id = String(_uniqueId++);
     this.#listeners.set(id, callback);
     if (this.__isNative) {
-      this._startListeningToNativeValueUpdates();
+      this.#ensureUpdateSubscriptionExists();
     }
     return id;
   }
@@ -94,7 +92,7 @@ export default class AnimatedNode {
   removeListener(id: string): void {
     this.#listeners.delete(id);
     if (this.__isNative && this.#listeners.size === 0) {
-      this._stopListeningForNativeValueUpdates();
+      this.#updateSubscription?.remove();
     }
   }
 
@@ -106,7 +104,7 @@ export default class AnimatedNode {
   removeAllListeners(): void {
     this.#listeners.clear();
     if (this.__isNative) {
-      this._stopListeningForNativeValueUpdates();
+      this.#updateSubscription?.remove();
     }
   }
 
@@ -114,33 +112,36 @@ export default class AnimatedNode {
     return this.#listeners.size > 0;
   }
 
-  _startListeningToNativeValueUpdates() {
-    if (
-      this.__nativeAnimatedValueListener &&
-      !this.__shouldUpdateListenersForNewNativeTag
-    ) {
+  #ensureUpdateSubscriptionExists(): void {
+    if (this.#updateSubscription != null) {
       return;
     }
-
-    if (this.__shouldUpdateListenersForNewNativeTag) {
-      this.__shouldUpdateListenersForNewNativeTag = false;
-      this._stopListeningForNativeValueUpdates();
-    }
-
-    startListeningToAnimatedNodeValue(this.__getNativeTag());
-    this.__nativeAnimatedValueListener =
+    const nativeTag = this.__getNativeTag();
+    startListeningToAnimatedNodeValue(nativeTag);
+    const subscription: EventSubscription =
       NativeAnimatedHelper.nativeEventEmitter.addListener(
         'onAnimatedValueUpdate',
         data => {
-          if (data.tag !== this.__getNativeTag()) {
-            return;
+          if (data.tag === nativeTag) {
+            this.__onAnimatedValueUpdateReceived(data.value);
           }
-          this.__onAnimatedValueUpdateReceived(data.value);
         },
       );
+
+    this.#updateSubscription = {
+      remove: () => {
+        // Only this function assigns to `this.#updateSubscription`.
+        if (this.#updateSubscription == null) {
+          return;
+        }
+        this.#updateSubscription = null;
+        subscription.remove();
+        stopListeningToAnimatedNodeValue(nativeTag);
+      },
+    };
   }
 
-  __onAnimatedValueUpdateReceived(value: number) {
+  __onAnimatedValueUpdateReceived(value: number): void {
     this.__callListeners(value);
   }
 
@@ -151,16 +152,6 @@ export default class AnimatedNode {
     });
   }
 
-  _stopListeningForNativeValueUpdates() {
-    if (!this.__nativeAnimatedValueListener) {
-      return;
-    }
-
-    this.__nativeAnimatedValueListener.remove();
-    this.__nativeAnimatedValueListener = null;
-    stopListeningToAnimatedNodeValue(this.__getNativeTag());
-  }
-
   __getNativeTag(): number {
     let nativeTag = this.__nativeTag;
     if (nativeTag == null) {
@@ -181,7 +172,6 @@ export default class AnimatedNode {
         config.platformConfig = this._platformConfig;
       }
       NativeAnimatedHelper.API.createAnimatedNode(nativeTag, config);
-      this.__shouldUpdateListenersForNewNativeTag = true;
     }
     return nativeTag;
   }
@@ -192,10 +182,6 @@ export default class AnimatedNode {
     );
   }
 
-  toJSON(): any {
-    return this.__getValue();
-  }
-
   __getPlatformConfig(): ?PlatformConfig {
     return this._platformConfig;
   }
@@ -203,4 +189,12 @@ export default class AnimatedNode {
   __setPlatformConfig(platformConfig: ?PlatformConfig) {
     this._platformConfig = platformConfig;
   }
+
+  /**
+   * NOTE: This is intended to prevent `JSON.stringify` from throwing "cyclic
+   * structure" errors in React DevTools. Avoid depending on this!
+   */
+  toJSON(): mixed {
+    return this.__getValue();
+  }
 }

package/Libraries/Animated/nodes/AnimatedObject.js

@@ -19,9 +19,11 @@ import * as React from 'react';
 
 const MAX_DEPTH = 5;
 
-/* $FlowIssue[incompatible-type-guard] - Flow does not know that the prototype
-   and ReactElement checks preserve the type refinement of `value`. */
-function isPlainObject(value: mixed): value is $ReadOnly<{[string]: mixed}> {
+export function isPlainObject(
+  value: mixed,
+  /* $FlowIssue[incompatible-type-guard] - Flow does not know that the prototype
+     and ReactElement checks preserve the type refinement of `value`. */
+): value is $ReadOnly<{[string]: mixed}> {
   return (
     value !== null &&
     typeof value === 'object' &&
@@ -109,6 +111,14 @@ export default class AnimatedObject extends AnimatedWithChildren {
     });
   }
 
+  __getValueWithStaticObject(staticObject: mixed): any {
+    const nodes = this.#nodes;
+    let index = 0;
+    // NOTE: We can depend on `this._value` and `staticObject` sharing a
+    // structure because of `useAnimatedPropsMemo`.
+    return mapAnimatedNodes(staticObject, () => nodes[index++].__getValue());
+  }
+
   __getAnimatedValue(): any {
     return mapAnimatedNodes(this._value, node => {
       return node.__getAnimatedValue();