@office-iss/react-native-win32 0.75.2 → 0.76.0-preview.1

package/Libraries/Animated/animations/Animation.js

@@ -14,7 +14,8 @@ import type {PlatformConfig} from '../AnimatedPlatformConfig';
 import type AnimatedNode from '../nodes/AnimatedNode';
 import type AnimatedValue from '../nodes/AnimatedValue';
 
-import NativeAnimatedHelper from '../NativeAnimatedHelper';
+import * as ReactNativeFeatureFlags from '../../../src/private/featureflags/ReactNativeFeatureFlags';
+import NativeAnimatedHelper from '../../../src/private/animated/NativeAnimatedHelper';
 import AnimatedProps from '../nodes/AnimatedProps';
 
 export type EndResult = {finished: boolean, value?: number, ...};
@@ -26,6 +27,7 @@ export type AnimationConfig = {
   platformConfig?: PlatformConfig,
   onComplete?: ?EndCallback,
   iterations?: number,
+  isLooping?: boolean,
 };
 
 let startNativeAnimationNextId = 1;
@@ -38,6 +40,7 @@ export default class Animation {
   __isInteraction: boolean;
   __onEnd: ?EndCallback;
   __iterations: number;
+  __isLooping: ?boolean;
 
   _nativeId: number;
 
@@ -107,6 +110,13 @@ export default class Animation {
           if (value != null) {
             animatedValue.__onAnimatedValueUpdateReceived(value);
 
+            if (
+              ReactNativeFeatureFlags.shouldSkipStateUpdatesForLoopingAnimations() &&
+              this.__isLooping
+            ) {
+              return;
+            }
+
             // Once the JS side node is synced with the updated values, trigger an
             // update on the AnimatedProps nodes to call any registered callbacks.
             this.__findAnimatedPropsNodes(animatedValue).forEach(node =>

package/Libraries/Animated/animations/DecayAnimation.js

@@ -14,7 +14,7 @@ import type {PlatformConfig} from '../AnimatedPlatformConfig';
 import type AnimatedValue from '../nodes/AnimatedValue';
 import type {AnimationConfig, EndCallback} from './Animation';
 
-import NativeAnimatedHelper from '../NativeAnimatedHelper';
+import NativeAnimatedHelper from '../../../src/private/animated/NativeAnimatedHelper';
 import Animation from './Animation';
 
 export type DecayAnimationConfig = {

package/Libraries/Animated/animations/SpringAnimation.js

@@ -16,7 +16,7 @@ import type AnimatedValue from '../nodes/AnimatedValue';
 import type AnimatedValueXY from '../nodes/AnimatedValueXY';
 import type {AnimationConfig, EndCallback} from './Animation';
 
-import NativeAnimatedHelper from '../NativeAnimatedHelper';
+import NativeAnimatedHelper from '../../../src/private/animated/NativeAnimatedHelper';
 import AnimatedColor from '../nodes/AnimatedColor';
 import * as SpringConfig from '../SpringConfig';
 import Animation from './Animation';

package/Libraries/Animated/animations/TimingAnimation.js

@@ -17,7 +17,7 @@ import type AnimatedValue from '../nodes/AnimatedValue';
 import type AnimatedValueXY from '../nodes/AnimatedValueXY';
 import type {AnimationConfig, EndCallback} from './Animation';
 
-import NativeAnimatedHelper from '../NativeAnimatedHelper';
+import NativeAnimatedHelper from '../../../src/private/animated/NativeAnimatedHelper';
 import AnimatedColor from '../nodes/AnimatedColor';
 import Animation from './Animation';
 
@@ -80,6 +80,7 @@ export default class TimingAnimation extends Animation {
     this._useNativeDriver = NativeAnimatedHelper.shouldUseNativeDriver(config);
     this._platformConfig = config.platformConfig;
     this.__isInteraction = config.isInteraction ?? !this._useNativeDriver;
+    this.__isLooping = config.isLooping;
   }
 
   __getNativeAnimationConfig(): any {

package/Libraries/Animated/components/AnimatedScrollView.js

@@ -46,6 +46,7 @@ const AnimatedScrollView: AnimatedComponentType<Props, Instance> =
         props.style != null
       ) {
         return (
+          // $FlowFixMe[prop-missing]
           <AnimatedScrollViewWithInvertedRefreshControl
             scrollEventThrottle={0.0001}
             {...props}
@@ -71,7 +72,7 @@ const AnimatedScrollViewWithInvertedRefreshControl = React.forwardRef(
     props: {
       ...React.ElementConfig<typeof ScrollView>,
       // $FlowFixMe[unclear-type] Same Flow type as `refreshControl` in ScrollView
-      refreshControl: React.Element<any>,
+      refreshControl: ExactReactElement_DEPRECATED<any>,
     },
     forwardedRef:
       | {current: Instance | null, ...}
@@ -97,7 +98,7 @@ const AnimatedScrollViewWithInvertedRefreshControl = React.forwardRef(
     >(intermediatePropsForRefreshControl);
     // NOTE: Assumes that refreshControl.ref` and `refreshControl.style` can be
     // safely clobbered.
-    const refreshControl: React.Element<typeof RefreshControl> =
+    const refreshControl: ExactReactElement_DEPRECATED<typeof RefreshControl> =
       React.cloneElement(props.refreshControl, {
         ...refreshControlAnimatedProps,
         ref: refreshControlRef,

package/Libraries/Animated/createAnimatedComponent.js

@@ -8,21 +8,22 @@
  * @format
  */
 
-import composeStyles from '../../src/private/core/composeStyles';
+import composeStyles from '../../src/private/styles/composeStyles';
 import View from '../Components/View/View';
 import useMergeRefs from '../Utilities/useMergeRefs';
 import useAnimatedProps from './useAnimatedProps';
 import * as React from 'react';
 import {useMemo} from 'react';
 
-// $FlowFixMe[deprecated-type]
-export type AnimatedProps<Props: {...}> = $ObjMap<
-  Props &
-    $ReadOnly<{
-      passthroughAnimatedPropExplicitValues?: React.ElementConfig<typeof View>,
-    }>,
-  () => any,
->;
+export type AnimatedProps<Props: {...}> = {
+  // eslint-disable-next-line no-unused-vars
+  +[_K in keyof (Props &
+      $ReadOnly<{
+        passthroughAnimatedPropExplicitValues?: React.ElementConfig<
+          typeof View,
+        >,
+      }>)]: any,
+};
 
 export type AnimatedComponentType<
   Props: {...},

package/Libraries/Animated/nodes/AnimatedColor.js

@@ -17,7 +17,7 @@ import type {PlatformConfig} from '../AnimatedPlatformConfig';
 
 import normalizeColor from '../../StyleSheet/normalizeColor';
 import {processColorObject} from '../../StyleSheet/PlatformColorValueTypes';
-import NativeAnimatedHelper from '../NativeAnimatedHelper';
+import NativeAnimatedHelper from '../../../src/private/animated/NativeAnimatedHelper';
 import AnimatedValue, {flushValue} from './AnimatedValue';
 import AnimatedWithChildren from './AnimatedWithChildren';
 

package/Libraries/Animated/nodes/AnimatedInterpolation.js

@@ -15,10 +15,11 @@
 import type {PlatformConfig} from '../AnimatedPlatformConfig';
 import type AnimatedNode from './AnimatedNode';
 
+import {validateInterpolation} from '../../../src/private/animated/NativeAnimatedValidation';
 import normalizeColor from '../../StyleSheet/normalizeColor';
 import processColor from '../../StyleSheet/processColor';
 import Easing from '../Easing';
-import NativeAnimatedHelper from '../NativeAnimatedHelper';
+import NativeAnimatedHelper from '../../../src/private/animated/NativeAnimatedHelper';
 import AnimatedWithChildren from './AnimatedWithChildren';
 import invariant from 'invariant';
 
@@ -382,7 +383,7 @@ export default class AnimatedInterpolation<
 
   __getNativeConfig(): any {
     if (__DEV__) {
-      NativeAnimatedHelper.validateInterpolation(this._config);
+      validateInterpolation(this._config);
     }
 
     // Only the `outputRange` can contain strings so we don't need to transform `inputRange` here

package/Libraries/Animated/nodes/AnimatedNode.js

@@ -10,23 +10,31 @@
 
 'use strict';
 
+import type {EventSubscription} from '../../vendor/emitter/EventEmitter';
 import type {PlatformConfig} from '../AnimatedPlatformConfig';
 
-import NativeAnimatedHelper from '../NativeAnimatedHelper';
+import NativeAnimatedHelper from '../../../src/private/animated/NativeAnimatedHelper';
 import invariant from 'invariant';
 
-const NativeAnimatedAPI = NativeAnimatedHelper.API;
+const {startListeningToAnimatedNodeValue, stopListeningToAnimatedNodeValue} =
+  NativeAnimatedHelper.API;
 
 type ValueListenerCallback = (state: {value: number, ...}) => mixed;
 
 let _uniqueId = 1;
+let _assertNativeAnimatedModule: ?() => void = () => {
+  NativeAnimatedHelper.assertNativeAnimatedModule();
+  // We only have to assert that the module exists once. After we've asserted
+  // this, clear out the function so we know to skip it in the future.
+  _assertNativeAnimatedModule = null;
+};
 
 // Note(vjeux): this would be better as an interface but flow doesn't
 // support them yet
 export default class AnimatedNode {
-  _listeners: {[key: string]: ValueListenerCallback, ...};
-  _platformConfig: ?PlatformConfig;
-  __nativeAnimatedValueListener: ?any;
+  #listeners: Map<string, ValueListenerCallback> = new Map();
+  _platformConfig: ?PlatformConfig = undefined;
+  __nativeAnimatedValueListener: ?EventSubscription = null;
   __attach(): void {}
   __detach(): void {
     this.removeAllListeners();
@@ -46,13 +54,9 @@ export default class AnimatedNode {
   }
 
   /* Methods and props used by native Animated impl */
-  __isNative: boolean;
-  __nativeTag: ?number;
-  __shouldUpdateListenersForNewNativeTag: boolean;
-
-  constructor() {
-    this._listeners = {};
-  }
+  __isNative: boolean = false;
+  __nativeTag: ?number = undefined;
+  __shouldUpdateListenersForNewNativeTag: boolean = false;
 
   __makeNative(platformConfig: ?PlatformConfig): void {
     if (!this.__isNative) {
@@ -60,7 +64,7 @@ export default class AnimatedNode {
     }
 
     this._platformConfig = platformConfig;
-    if (this.hasListeners()) {
+    if (this.#listeners.size > 0) {
       this._startListeningToNativeValueUpdates();
     }
   }
@@ -74,7 +78,7 @@ export default class AnimatedNode {
    */
   addListener(callback: (value: any) => mixed): string {
     const id = String(_uniqueId++);
-    this._listeners[id] = callback;
+    this.#listeners.set(id, callback);
     if (this.__isNative) {
       this._startListeningToNativeValueUpdates();
     }
@@ -88,8 +92,8 @@ export default class AnimatedNode {
    * See https://reactnative.dev/docs/animatedvalue#removelistener
    */
   removeListener(id: string): void {
-    delete this._listeners[id];
-    if (this.__isNative && !this.hasListeners()) {
+    this.#listeners.delete(id);
+    if (this.__isNative && this.#listeners.size === 0) {
       this._stopListeningForNativeValueUpdates();
     }
   }
@@ -100,14 +104,14 @@ export default class AnimatedNode {
    * See https://reactnative.dev/docs/animatedvalue#removealllisteners
    */
   removeAllListeners(): void {
-    this._listeners = {};
+    this.#listeners.clear();
     if (this.__isNative) {
       this._stopListeningForNativeValueUpdates();
     }
   }
 
   hasListeners(): boolean {
-    return !!Object.keys(this._listeners).length;
+    return this.#listeners.size > 0;
   }
 
   _startListeningToNativeValueUpdates() {
@@ -123,7 +127,7 @@ export default class AnimatedNode {
       this._stopListeningForNativeValueUpdates();
     }
 
-    NativeAnimatedAPI.startListeningToAnimatedNodeValue(this.__getNativeTag());
+    startListeningToAnimatedNodeValue(this.__getNativeTag());
     this.__nativeAnimatedValueListener =
       NativeAnimatedHelper.nativeEventEmitter.addListener(
         'onAnimatedValueUpdate',
@@ -141,9 +145,10 @@ export default class AnimatedNode {
   }
 
   __callListeners(value: number): void {
-    for (const key in this._listeners) {
-      this._listeners[key]({value});
-    }
+    const event = {value};
+    this.#listeners.forEach(listener => {
+      listener(event);
+    });
   }
 
   _stopListeningForNativeValueUpdates() {
@@ -153,21 +158,24 @@ export default class AnimatedNode {
 
     this.__nativeAnimatedValueListener.remove();
     this.__nativeAnimatedValueListener = null;
-    NativeAnimatedAPI.stopListeningToAnimatedNodeValue(this.__getNativeTag());
+    stopListeningToAnimatedNodeValue(this.__getNativeTag());
   }
 
   __getNativeTag(): number {
-    NativeAnimatedHelper.assertNativeAnimatedModule();
-    invariant(
-      this.__isNative,
-      'Attempt to get native tag from node not marked as "native"',
-    );
-
-    const nativeTag =
-      this.__nativeTag ?? NativeAnimatedHelper.generateNewNodeTag();
+    let nativeTag = this.__nativeTag;
+    if (nativeTag == null) {
+      _assertNativeAnimatedModule?.();
+
+      // `__isNative` is initialized as false and only ever set to true. So we
+      // only need to check it once here when initializing `__nativeTag`.
+      invariant(
+        this.__isNative,
+        'Attempt to get native tag from node not marked as "native"',
+      );
 
-    if (this.__nativeTag == null) {
+      nativeTag = NativeAnimatedHelper.generateNewNodeTag();
       this.__nativeTag = nativeTag;
+
       const config = this.__getNativeConfig();
       if (this._platformConfig) {
         config.platformConfig = this._platformConfig;
@@ -175,9 +183,9 @@ export default class AnimatedNode {
       NativeAnimatedHelper.API.createAnimatedNode(nativeTag, config);
       this.__shouldUpdateListenersForNewNativeTag = true;
     }
-
     return nativeTag;
   }
+
   __getNativeConfig(): Object {
     throw new Error(
       'This JS animated node type cannot be used as native animated node',
@@ -191,6 +199,7 @@ export default class AnimatedNode {
   __getPlatformConfig(): ?PlatformConfig {
     return this._platformConfig;
   }
+
   __setPlatformConfig(platformConfig: ?PlatformConfig) {
     this._platformConfig = platformConfig;
   }

package/Libraries/Animated/nodes/AnimatedObject.js

@@ -19,31 +19,40 @@ import * as React from 'react';
 
 const MAX_DEPTH = 5;
 
-function isPlainObject(value: any): boolean {
+/* $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}> {
   return (
     value !== null &&
     typeof value === 'object' &&
-    Object.getPrototypeOf(value).isPrototypeOf(Object)
+    Object.getPrototypeOf(value).isPrototypeOf(Object) &&
+    !React.isValidElement(value)
   );
 }
 
-// Recurse through values, executing fn for any AnimatedNodes
-function visit(value: any, fn: any => void, depth: number = 0): void {
+function flatAnimatedNodes(
+  value: mixed,
+  nodes: Array<AnimatedNode> = [],
+  depth: number = 0,
+): Array<AnimatedNode> {
   if (depth >= MAX_DEPTH) {
-    return;
+    return nodes;
   }
-
   if (value instanceof AnimatedNode) {
-    fn(value);
+    nodes.push(value);
   } else if (Array.isArray(value)) {
-    value.forEach(element => {
-      visit(element, fn, depth + 1);
-    });
+    for (let ii = 0, length = value.length; ii < length; ii++) {
+      const element = value[ii];
+      flatAnimatedNodes(element, nodes, depth + 1);
+    }
   } else if (isPlainObject(value)) {
-    Object.values(value).forEach(element => {
-      visit(element, fn, depth + 1);
-    });
+    const keys = Object.keys(value);
+    for (let ii = 0, length = keys.length; ii < length; ii++) {
+      const key = keys[ii];
+      flatAnimatedNodes(value[key], nodes, depth + 1);
+    }
   }
+  return nodes;
 }
 
 // Returns a copy of value with a transformation fn applied to any AnimatedNodes
@@ -58,7 +67,9 @@ function mapAnimatedNodes(value: any, fn: any => any, depth: number = 0): any {
     return value.map(element => mapAnimatedNodes(element, fn, depth + 1));
   } else if (isPlainObject(value)) {
     const result: {[string]: any} = {};
-    for (const key in value) {
+    const keys = Object.keys(value);
+    for (let ii = 0, length = keys.length; ii < length; ii++) {
+      const key = keys[ii];
       result[key] = mapAnimatedNodes(value[key], fn, depth + 1);
     }
     return result;
@@ -67,38 +78,28 @@ function mapAnimatedNodes(value: any, fn: any => any, depth: number = 0): any {
   }
 }
 
-export function hasAnimatedNode(value: any, depth: number = 0): boolean {
-  if (depth >= MAX_DEPTH) {
-    return false;
-  }
-
-  if (value instanceof AnimatedNode) {
-    return true;
-  } else if (Array.isArray(value)) {
-    for (const element of value) {
-      if (hasAnimatedNode(element, depth + 1)) {
-        return true;
-      }
-    }
-  } else if (isPlainObject(value)) {
-    // Don't consider React elements
-    if (React.isValidElement(value)) {
-      return false;
-    }
-    for (const key in value) {
-      if (hasAnimatedNode(value[key], depth + 1)) {
-        return true;
-      }
+export default class AnimatedObject extends AnimatedWithChildren {
+  #nodes: $ReadOnlyArray<AnimatedNode>;
+  _value: mixed;
+
+  /**
+   * Creates an `AnimatedObject` if `value` contains `AnimatedNode` instances.
+   * Otherwise, returns `null`.
+   */
+  static from(value: mixed): ?AnimatedObject {
+    const nodes = flatAnimatedNodes(value);
+    if (nodes.length === 0) {
+      return null;
     }
+    return new AnimatedObject(nodes, value);
   }
-  return false;
-}
 
-export default class AnimatedObject extends AnimatedWithChildren {
-  _value: any;
-
-  constructor(value: any) {
+  /**
+   * Should only be called by `AnimatedObject.from`.
+   */
+  constructor(nodes: $ReadOnlyArray<AnimatedNode>, value: mixed) {
     super();
+    this.#nodes = nodes;
     this._value = value;
   }
 
@@ -115,23 +116,28 @@ export default class AnimatedObject extends AnimatedWithChildren {
   }
 
   __attach(): void {
-    super.__attach();
-    visit(this._value, node => {
+    const nodes = this.#nodes;
+    for (let ii = 0, length = nodes.length; ii < length; ii++) {
+      const node = nodes[ii];
       node.__addChild(this);
-    });
+    }
   }
 
   __detach(): void {
-    visit(this._value, node => {
+    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): void {
-    visit(this._value, value => {
-      value.__makeNative(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);
   }