react-native-windows 0.75.3 → 0.76.0-preview.1

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);
   }
 

package/Libraries/Animated/nodes/AnimatedProps.js

@@ -14,44 +14,74 @@ import type {PlatformConfig} from '../AnimatedPlatformConfig';
 
 import {findNodeHandle} from '../../ReactNative/RendererProxy';
 import {AnimatedEvent} from '../AnimatedEvent';
-import NativeAnimatedHelper from '../NativeAnimatedHelper';
+import NativeAnimatedHelper from '../../../src/private/animated/NativeAnimatedHelper';
 import AnimatedNode from './AnimatedNode';
-import AnimatedObject, {hasAnimatedNode} from './AnimatedObject';
+import AnimatedObject from './AnimatedObject';
 import AnimatedStyle from './AnimatedStyle';
 import invariant from 'invariant';
 
-function createAnimatedProps(inputProps: Object): Object {
+function createAnimatedProps(
+  inputProps: Object,
+): [$ReadOnlyArray<string>, $ReadOnlyArray<AnimatedNode>, Object] {
+  const nodeKeys: Array<string> = [];
+  const nodes: Array<AnimatedNode> = [];
   const props: Object = {};
-  for (const key in inputProps) {
+
+  const keys = Object.keys(inputProps);
+  for (let ii = 0, length = keys.length; ii < length; ii++) {
+    const key = keys[ii];
     const value = inputProps[key];
+
     if (key === 'style') {
-      props[key] = new AnimatedStyle(value);
+      const node = new AnimatedStyle(value);
+      nodeKeys.push(key);
+      nodes.push(node);
+      props[key] = node;
     } else if (value instanceof AnimatedNode) {
-      props[key] = value;
-    } else if (hasAnimatedNode(value)) {
-      props[key] = new AnimatedObject(value);
+      const node = value;
+      nodeKeys.push(key);
+      nodes.push(node);
+      props[key] = node;
     } else {
-      props[key] = value;
+      const node = AnimatedObject.from(value);
+      if (node == null) {
+        props[key] = value;
+      } else {
+        nodeKeys.push(key);
+        nodes.push(node);
+        props[key] = node;
+      }
     }
   }
-  return props;
+
+  return [nodeKeys, nodes, props];
 }
 
 export default class AnimatedProps extends AnimatedNode {
+  #nodeKeys: $ReadOnlyArray<string>;
+  #nodes: $ReadOnlyArray<AnimatedNode>;
+
+  _animatedView: any = null;
   _props: Object;
-  _animatedView: any;
   _callback: () => void;
 
-  constructor(props: Object, callback: () => void) {
+  constructor(inputProps: Object, callback: () => void) {
     super();
-    this._props = createAnimatedProps(props);
+    const [nodeKeys, nodes, props] = createAnimatedProps(inputProps);
+    this.#nodeKeys = nodeKeys;
+    this.#nodes = nodes;
+    this._props = props;
     this._callback = callback;
   }
 
   __getValue(): Object {
     const props: {[string]: any | ((...args: any) => void)} = {};
-    for (const key in this._props) {
+
+    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) {
@@ -66,21 +96,23 @@ export default class AnimatedProps extends AnimatedNode {
 
   __getAnimatedValue(): Object {
     const props: {[string]: any} = {};
-    for (const key in this._props) {
-      const value = this._props[key];
-      if (value instanceof AnimatedNode) {
-        props[key] = value.__getAnimatedValue();
-      }
+
+    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 {
-    for (const key in this._props) {
-      const value = this._props[key];
-      if (value instanceof AnimatedNode) {
-        value.__addChild(this);
-      }
+    const nodes = this.#nodes;
+    for (let ii = 0, length = nodes.length; ii < length; ii++) {
+      const node = nodes[ii];
+      node.__addChild(this);
     }
   }
 
@@ -88,12 +120,14 @@ export default class AnimatedProps extends AnimatedNode {
     if (this.__isNative && this._animatedView) {
       this.__disconnectAnimatedView();
     }
-    for (const key in this._props) {
-      const value = this._props[key];
-      if (value instanceof AnimatedNode) {
-        value.__removeChild(this);
-      }
+    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();
   }
 
@@ -102,11 +136,10 @@ export default class AnimatedProps extends AnimatedNode {
   }
 
   __makeNative(platformConfig: ?PlatformConfig): void {
-    for (const key in this._props) {
-      const value = this._props[key];
-      if (value instanceof AnimatedNode) {
-        value.__makeNative(platformConfig);
-      }
+    const nodes = this.#nodes;
+    for (let ii = 0, length = nodes.length; ii < length; ii++) {
+      const node = nodes[ii];
+      node.__makeNative(platformConfig);
     }
 
     if (!this.__isNative) {
@@ -170,14 +203,18 @@ export default class AnimatedProps extends AnimatedNode {
   }
 
   __getNativeConfig(): Object {
+    const platformConfig = this.__getPlatformConfig();
     const propsConfig: {[string]: number} = {};
-    for (const propKey in this._props) {
-      const value = this._props[propKey];
-      if (value instanceof AnimatedNode) {
-        value.__makeNative(this.__getPlatformConfig());
-        propsConfig[propKey] = value.__getNativeTag();
-      }
+
+    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,

package/Libraries/Animated/nodes/AnimatedStyle.js

@@ -12,116 +12,160 @@
 
 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 NativeAnimatedHelper from '../NativeAnimatedHelper';
 import AnimatedNode from './AnimatedNode';
-import AnimatedObject, {hasAnimatedNode} from './AnimatedObject';
+import AnimatedObject from './AnimatedObject';
 import AnimatedTransform from './AnimatedTransform';
 import AnimatedWithChildren from './AnimatedWithChildren';
 
 function createAnimatedStyle(
-  inputStyle: any,
+  inputStyle: {[string]: mixed},
   keepUnanimatedValues: boolean,
-): Object {
-  // $FlowFixMe[underconstrained-implicit-instantiation]
-  const style = flattenStyle(inputStyle);
-  const animatedStyles: any = {};
-  for (const key in style) {
-    const value = style[key];
+): [$ReadOnlyArray<string>, $ReadOnlyArray<AnimatedNode>, Object] {
+  const nodeKeys: Array<string> = [];
+  const nodes: Array<AnimatedNode> = [];
+  const style: {[string]: any} = {};
+
+  const keys = Object.keys(inputStyle);
+  for (let ii = 0, length = keys.length; ii < length; ii++) {
+    const key = keys[ii];
+    const value = inputStyle[key];
+
     if (value != null && key === 'transform') {
-      animatedStyles[key] =
-        ReactNativeFeatureFlags.shouldUseAnimatedObjectForTransform()
-          ? new AnimatedObject(value)
-          : new AnimatedTransform(value);
+      const node = ReactNativeFeatureFlags.shouldUseAnimatedObjectForTransform()
+        ? AnimatedObject.from(value)
+        : // $FlowFixMe[incompatible-call] - `value` is mixed.
+          new AnimatedTransform(value);
+      if (node == null) {
+        if (keepUnanimatedValues) {
+          style[key] = value;
+        }
+      } else {
+        nodeKeys.push(key);
+        nodes.push(node);
+        style[key] = node;
+      }
     } else if (value instanceof AnimatedNode) {
-      animatedStyles[key] = value;
-    } else if (hasAnimatedNode(value)) {
-      animatedStyles[key] = new AnimatedObject(value);
-    } else if (keepUnanimatedValues) {
-      animatedStyles[key] = value;
+      const node = value;
+      nodeKeys.push(key);
+      nodes.push(node);
+      style[key] = value;
+    } else {
+      const node = AnimatedObject.from(value);
+      if (node == null) {
+        if (keepUnanimatedValues) {
+          style[key] = value;
+        }
+      } else {
+        nodeKeys.push(key);
+        nodes.push(node);
+        style[key] = node;
+      }
     }
   }
-  return animatedStyles;
+
+  return [nodeKeys, nodes, style];
 }
 
 export default class AnimatedStyle extends AnimatedWithChildren {
+  #nodeKeys: $ReadOnlyArray<string>;
+  #nodes: $ReadOnlyArray<AnimatedNode>;
+
   _inputStyle: any;
-  _style: Object;
+  _style: {[string]: any};
 
-  constructor(style: any) {
+  constructor(inputStyle: any) {
     super();
-    this._inputStyle = style;
-    this._style = createAnimatedStyle(style, Platform.OS !== 'web');
+    this._inputStyle = inputStyle;
+    const [nodeKeys, nodes, style] = createAnimatedStyle(
+      // NOTE: This null check should not be necessary, but the types are not
+      // strong nor enforced as of this writing. This check should be hoisted
+      // to instantiation sites.
+      flattenStyle(inputStyle) ?? {},
+      Platform.OS !== 'web',
+    );
+    this.#nodeKeys = nodeKeys;
+    this.#nodes = nodes;
+    this._style = style;
   }
 
   __getValue(): Object | Array<Object> {
-    const result: {[string]: any} = {};
-    for (const key in this._style) {
+    const style: {[string]: any} = {};
+
+    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) {
-        result[key] = value.__getValue();
+        style[key] = value.__getValue();
       } else {
-        result[key] = value;
+        style[key] = value;
       }
     }
 
-    return Platform.OS === 'web' ? [this._inputStyle, result] : result;
+    return Platform.OS === 'web' ? [this._inputStyle, style] : style;
   }
 
   __getAnimatedValue(): Object {
-    const result: {[string]: any} = {};
-    for (const key in this._style) {
-      const value = this._style[key];
-      if (value instanceof AnimatedNode) {
-        result[key] = value.__getAnimatedValue();
-      }
+    const style: {[string]: any} = {};
+
+    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 result;
+
+    return style;
   }
 
   __attach(): void {
-    for (const key in this._style) {
-      const value = this._style[key];
-      if (value instanceof AnimatedNode) {
-        value.__addChild(this);
-      }
+    const nodes = this.#nodes;
+    for (let ii = 0, length = nodes.length; ii < length; ii++) {
+      const node = nodes[ii];
+      node.__addChild(this);
     }
   }
 
   __detach(): void {
-    for (const key in this._style) {
-      const value = this._style[key];
-      if (value instanceof AnimatedNode) {
-        value.__removeChild(this);
-      }
+    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) {
-    for (const key in this._style) {
-      const value = this._style[key];
-      if (value instanceof AnimatedNode) {
-        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);
   }
 
   __getNativeConfig(): Object {
+    const platformConfig = this.__getPlatformConfig();
     const styleConfig: {[string]: ?number} = {};
-    for (const styleKey in this._style) {
-      if (this._style[styleKey] instanceof AnimatedNode) {
-        const style = this._style[styleKey];
-        style.__makeNative(this.__getPlatformConfig());
-        styleConfig[styleKey] = style.__getNativeTag();
-      }
-      // Non-animated styles are set using `setNativeProps`, no need
-      // to pass those as a part of the node config
+
+    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);
     }
-    NativeAnimatedHelper.validateStyles(styleConfig);
     return {
       type: 'style',
       style: styleConfig,

package/Libraries/Animated/nodes/AnimatedTracking.js

@@ -14,7 +14,7 @@ import type {PlatformConfig} from '../AnimatedPlatformConfig';
 import type {EndCallback} from '../animations/Animation';
 import type AnimatedValue from './AnimatedValue';
 
-import NativeAnimatedHelper from '../NativeAnimatedHelper';
+import NativeAnimatedHelper from '../../../src/private/animated/NativeAnimatedHelper';
 import AnimatedNode from './AnimatedNode';
 
 export default class AnimatedTracking extends AnimatedNode {