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

package/Libraries/Animated/nodes/AnimatedProps.js

@@ -8,9 +8,8 @@
  * @format
  */
 
-'use strict';
-
 import type {PlatformConfig} from '../AnimatedPlatformConfig';
+import type {AnimatedStyleAllowlist} from './AnimatedStyle';
 
 import {findNodeHandle} from '../../ReactNative/RendererProxy';
 import {AnimatedEvent} from '../AnimatedEvent';
@@ -20,30 +19,33 @@ import AnimatedObject from './AnimatedObject';
 import AnimatedStyle from './AnimatedStyle';
 import invariant from 'invariant';
 
+export type AnimatedPropsAllowlist = $ReadOnly<{
+  style?: ?AnimatedStyleAllowlist,
+  [string]: true,
+}>;
+
 function createAnimatedProps(
-  inputProps: Object,
-): [$ReadOnlyArray<string>, $ReadOnlyArray<AnimatedNode>, Object] {
+  inputProps: {[string]: mixed},
+  allowlist: ?AnimatedPropsAllowlist,
+): [$ReadOnlyArray<string>, $ReadOnlyArray<AnimatedNode>, {[string]: mixed}] {
   const nodeKeys: Array<string> = [];
   const nodes: Array<AnimatedNode> = [];
-  const props: Object = {};
+  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 (key === 'style') {
-      const node = new AnimatedStyle(value);
-      nodeKeys.push(key);
-      nodes.push(node);
-      props[key] = node;
-    } else if (value instanceof AnimatedNode) {
-      const node = value;
-      nodeKeys.push(key);
-      nodes.push(node);
-      props[key] = node;
-    } else {
-      const node = AnimatedObject.from(value);
+    if (allowlist == null || Object.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 {
@@ -51,6 +53,20 @@ function createAnimatedProps(
         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;
     }
   }
 
@@ -58,29 +74,32 @@ function createAnimatedProps(
 }
 
 export default class AnimatedProps extends AnimatedNode {
+  #animatedView: any = null;
+  #callback: () => void;
   #nodeKeys: $ReadOnlyArray<string>;
   #nodes: $ReadOnlyArray<AnimatedNode>;
+  #props: {[string]: mixed};
 
-  _animatedView: any = null;
-  _props: Object;
-  _callback: () => void;
-
-  constructor(inputProps: Object, callback: () => void) {
+  constructor(
+    inputProps: {[string]: mixed},
+    callback: () => void,
+    allowlist?: ?AnimatedPropsAllowlist,
+  ) {
     super();
-    const [nodeKeys, nodes, props] = createAnimatedProps(inputProps);
+    const [nodeKeys, nodes, props] = createAnimatedProps(inputProps, allowlist);
     this.#nodeKeys = nodeKeys;
     this.#nodes = nodes;
-    this._props = props;
-    this._callback = callback;
+    this.#props = props;
+    this.#callback = callback;
   }
 
   __getValue(): Object {
-    const props: {[string]: any | ((...args: any) => void)} = {};
+    const props: {[string]: mixed} = {};
 
-    const keys = Object.keys(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];
+      const value = this.#props[key];
 
       if (value instanceof AnimatedNode) {
         props[key] = value.__getValue();
@@ -94,8 +113,33 @@ export default class AnimatedProps extends AnimatedNode {
     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]: any} = {};
+    const props: {[string]: mixed} = {};
 
     const nodeKeys = this.#nodeKeys;
     const nodes = this.#nodes;
@@ -117,10 +161,10 @@ export default class AnimatedProps extends AnimatedNode {
   }
 
   __detach(): void {
-    if (this.__isNative && this._animatedView) {
+    if (this.__isNative && this.#animatedView) {
       this.__disconnectAnimatedView();
     }
-    this._animatedView = null;
+    this.#animatedView = null;
 
     const nodes = this.#nodes;
     for (let ii = 0, length = nodes.length; ii < length; ii++) {
@@ -132,7 +176,7 @@ export default class AnimatedProps extends AnimatedNode {
   }
 
   update(): void {
-    this._callback();
+    this.#callback();
   }
 
   __makeNative(platformConfig: ?PlatformConfig): void {
@@ -150,17 +194,17 @@ export default class AnimatedProps extends AnimatedNode {
       // where it will be needed to traverse the graph of attached values.
       super.__setPlatformConfig(platformConfig);
 
-      if (this._animatedView) {
+      if (this.#animatedView) {
         this.__connectAnimatedView();
       }
     }
   }
 
   setNativeView(animatedView: any): void {
-    if (this._animatedView === animatedView) {
+    if (this.#animatedView === animatedView) {
       return;
     }
-    this._animatedView = animatedView;
+    this.#animatedView = animatedView;
     if (this.__isNative) {
       this.__connectAnimatedView();
     }
@@ -168,7 +212,7 @@ export default class AnimatedProps extends AnimatedNode {
 
   __connectAnimatedView(): void {
     invariant(this.__isNative, 'Expected node to be marked as "native"');
-    const nativeViewTag: ?number = findNodeHandle(this._animatedView);
+    const nativeViewTag: ?number = findNodeHandle(this.#animatedView);
     invariant(
       nativeViewTag != null,
       'Unable to locate attached view in the native tree',
@@ -181,7 +225,7 @@ export default class AnimatedProps extends AnimatedNode {
 
   __disconnectAnimatedView(): void {
     invariant(this.__isNative, 'Expected node to be marked as "native"');
-    const nativeViewTag: ?number = findNodeHandle(this._animatedView);
+    const nativeViewTag: ?number = findNodeHandle(this.#animatedView);
     invariant(
       nativeViewTag != null,
       'Unable to locate attached view in the native tree',

package/Libraries/Animated/nodes/AnimatedStyle.js

@@ -8,8 +8,6 @@
  * @format
  */
 
-'use strict';
-
 import type {PlatformConfig} from '../AnimatedPlatformConfig';
 
 import {validateStyles} from '../../../src/private/animated/NativeAnimatedValidation';
@@ -21,24 +19,34 @@ 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>, Object] {
+): [$ReadOnlyArray<string>, $ReadOnlyArray<AnimatedNode>, {[string]: mixed}] {
   const nodeKeys: Array<string> = [];
   const nodes: Array<AnimatedNode> = [];
-  const style: {[string]: any} = {};
+  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 (value != null && key === 'transform') {
-      const node = ReactNativeFeatureFlags.shouldUseAnimatedObjectForTransform()
-        ? AnimatedObject.from(value)
-        : // $FlowFixMe[incompatible-call] - `value` is mixed.
-          new AnimatedTransform(value);
+    if (allowlist == null || Object.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;
@@ -48,21 +56,21 @@ function createAnimatedStyle(
         nodes.push(node);
         style[key] = node;
       }
-    } else if (value instanceof AnimatedNode) {
-      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;
+      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,
+          );
         }
-      } else {
-        nodeKeys.push(key);
-        nodes.push(node);
-        style[key] = node;
+      }
+      if (keepUnanimatedValues) {
+        style[key] = value;
       }
     }
   }
@@ -71,34 +79,54 @@ function createAnimatedStyle(
 }
 
 export default class AnimatedStyle extends AnimatedWithChildren {
+  #inputStyle: any;
   #nodeKeys: $ReadOnlyArray<string>;
   #nodes: $ReadOnlyArray<AnimatedNode>;
-
-  _inputStyle: any;
-  _style: {[string]: any};
-
-  constructor(inputStyle: any) {
-    super();
-    this._inputStyle = inputStyle;
+  #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(
-      // 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) ?? {},
+      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.#style = style;
+    this.#inputStyle = inputStyle;
   }
 
   __getValue(): Object | Array<Object> {
-    const style: {[string]: any} = {};
+    const style: {[string]: mixed} = {};
 
-    const keys = Object.keys(this._style);
+    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];
+      const value = this.#style[key];
 
       if (value instanceof AnimatedNode) {
         style[key] = value.__getValue();
@@ -107,11 +135,48 @@ export default class AnimatedStyle extends AnimatedWithChildren {
       }
     }
 
-    return Platform.OS === 'web' ? [this._inputStyle, style] : style;
+    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();
+      }
+    }
+
+    return Platform.OS === 'web' ? [this.#inputStyle, style] : style;
   }
 
   __getAnimatedValue(): Object {
-    const style: {[string]: any} = {};
+    const style: {[string]: mixed} = {};
 
     const nodeKeys = this.#nodeKeys;
     const nodes = this.#nodes;

package/Libraries/Animated/nodes/AnimatedTransform.js

@@ -26,37 +26,58 @@ type Transform<T = AnimatedNode> = {
     | {[string]: number | string | T},
 };
 
+function flatAnimatedNodes(
+  transforms: $ReadOnlyArray<Transform<>>,
+): Array<AnimatedNode> {
+  const nodes = [];
+  for (let ii = 0, length = transforms.length; ii < length; ii++) {
+    const transform = transforms[ii];
+    // There should be exactly one property in `transform`.
+    for (const key in transform) {
+      const value = transform[key];
+      if (value instanceof AnimatedNode) {
+        nodes.push(value);
+      }
+    }
+  }
+  return nodes;
+}
+
 export default class AnimatedTransform extends AnimatedWithChildren {
   // NOTE: For potentially historical reasons, some operations only operate on
   // the first level of AnimatedNode instances. This optimizes that bevavior.
-  #shallowNodes: $ReadOnlyArray<AnimatedNode>;
+  #nodes: $ReadOnlyArray<AnimatedNode>;
 
   _transforms: $ReadOnlyArray<Transform<>>;
 
-  constructor(transforms: $ReadOnlyArray<Transform<>>) {
+  /**
+   * Creates an `AnimatedTransform` if `transforms` contains `AnimatedNode`
+   * instances. Otherwise, returns `null`.
+   */
+  static from(transforms: $ReadOnlyArray<Transform<>>): ?AnimatedTransform {
+    const nodes = flatAnimatedNodes(
+      // NOTE: This check should not be necessary, but the types are not
+      // enforced as of this writing. This check should be hoisted to
+      // instantiation sites.
+      Array.isArray(transforms) ? transforms : [],
+    );
+    if (nodes.length === 0) {
+      return null;
+    }
+    return new AnimatedTransform(nodes, transforms);
+  }
+
+  constructor(
+    nodes: $ReadOnlyArray<AnimatedNode>,
+    transforms: $ReadOnlyArray<Transform<>>,
+  ) {
     super();
+    this.#nodes = nodes;
     this._transforms = transforms;
-
-    const shallowNodes = [];
-    // NOTE: This check should not be necessary, but the types are not enforced
-    // as of this writing. This check should be hoisted to instantiation sites.
-    if (Array.isArray(transforms)) {
-      for (let ii = 0, length = transforms.length; ii < length; ii++) {
-        const transform = transforms[ii];
-        // There should be exactly one property in `transform`.
-        for (const key in transform) {
-          const value = transform[key];
-          if (value instanceof AnimatedNode) {
-            shallowNodes.push(value);
-          }
-        }
-      }
-    }
-    this.#shallowNodes = shallowNodes;
   }
 
   __makeNative(platformConfig: ?PlatformConfig) {
-    const nodes = this.#shallowNodes;
+    const nodes = this.#nodes;
     for (let ii = 0, length = nodes.length; ii < length; ii++) {
       const node = nodes[ii];
       node.__makeNative(platformConfig);
@@ -70,6 +91,18 @@ export default class AnimatedTransform extends AnimatedWithChildren {
     );
   }
 
+  __getValueWithStaticTransforms(
+    staticTransforms: $ReadOnlyArray<Object>,
+  ): $ReadOnlyArray<Object> {
+    const values = [];
+    mapTransforms(this._transforms, node => {
+      values.push(node.__getValue());
+    });
+    // NOTE: We can depend on `this._transforms` and `staticTransforms` sharing
+    // a structure because of `useAnimatedPropsMemo`.
+    return mapTransforms(staticTransforms, () => values.shift());
+  }
+
   __getAnimatedValue(): $ReadOnlyArray<Transform<any>> {
     return mapTransforms(this._transforms, animatedNode =>
       animatedNode.__getAnimatedValue(),
@@ -77,7 +110,7 @@ export default class AnimatedTransform extends AnimatedWithChildren {
   }
 
   __attach(): void {
-    const nodes = this.#shallowNodes;
+    const nodes = this.#nodes;
     for (let ii = 0, length = nodes.length; ii < length; ii++) {
       const node = nodes[ii];
       node.__addChild(this);
@@ -85,7 +118,7 @@ export default class AnimatedTransform extends AnimatedWithChildren {
   }
 
   __detach(): void {
-    const nodes = this.#shallowNodes;
+    const nodes = this.#nodes;
     for (let ii = 0, length = nodes.length; ii < length; ii++) {
       const node = nodes[ii];
       node.__removeChild(this);

package/Libraries/Animated/nodes/AnimatedWithChildren.js

@@ -28,12 +28,10 @@ export default class AnimatedWithChildren extends AnimatedNode {
       const children = this._children;
       let length = children.length;
       if (length > 0) {
-        const nativeTag = this.__getNativeTag();
-
         for (let ii = 0; ii < length; ii++) {
           const child = children[ii];
           child.__makeNative(platformConfig);
-          connectAnimatedNodes(nativeTag, child.__getNativeTag());
+          connectAnimatedNodes(this.__getNativeTag(), child.__getNativeTag());
         }
       }
     }

package/Libraries/Animated/useAnimatedProps.js

@@ -8,8 +8,7 @@
  * @format
  */
 
-'use strict';
-
+import type {AnimatedPropsAllowlist} from './nodes/AnimatedProps';
 import type {EventSubscription} from '../EventEmitter/NativeEventEmitter';
 
 import * as ReactNativeFeatureFlags from '../../src/private/featureflags/ReactNativeFeatureFlags';
@@ -23,11 +22,13 @@ import AnimatedValue from './nodes/AnimatedValue';
 import {
   useCallback,
   useEffect,
+  useInsertionEffect,
   useLayoutEffect,
   useMemo,
   useReducer,
   useRef,
 } from 'react';
+import {useAnimatedPropsMemo} from '../../src/private/animated/useAnimatedPropsMemo';
 
 type ReducedProps<TProps> = {
   ...TProps,
@@ -36,34 +37,48 @@ type ReducedProps<TProps> = {
 };
 type CallbackRef<T> = T => mixed;
 
+type UpdateCallback = () => void;
+
 type AnimatedValueListeners = Array<{
   propValue: AnimatedValue,
   listenerId: string,
 }>;
 
+const useMemoOrAnimatedPropsMemo =
+  ReactNativeFeatureFlags.enableAnimatedPropsMemo()
+    ? useAnimatedPropsMemo
+    : useMemo;
+
 export default function useAnimatedProps<TProps: {...}, TInstance>(
   props: TProps,
+  allowlist?: ?AnimatedPropsAllowlist,
 ): [ReducedProps<TProps>, CallbackRef<TInstance | null>] {
   const [, scheduleUpdate] = useReducer<number, void>(count => count + 1, 0);
-  const onUpdateRef = useRef<?() => void>(null);
+  const onUpdateRef = useRef<UpdateCallback | null>(null);
   const timerRef = useRef<TimeoutID | null>(null);
 
-  // TODO: Only invalidate `node` if animated props or `style` change. In the
-  // previous implementation, we permitted `style` to override props with the
-  // same name property name as styles, so we can probably continue doing that.
-  // The ordering of other props *should* not matter.
-  const node = useMemo(
-    () => new AnimatedProps(props, () => onUpdateRef.current?.()),
-    [props],
+  const allowlistIfEnabled = ReactNativeFeatureFlags.enableAnimatedAllowlist()
+    ? allowlist
+    : null;
+
+  const node = useMemoOrAnimatedPropsMemo(
+    () =>
+      new AnimatedProps(
+        props,
+        () => onUpdateRef.current?.(),
+        allowlistIfEnabled,
+      ),
+    [allowlistIfEnabled, props],
   );
+
   const useNativePropsInFabric =
     ReactNativeFeatureFlags.shouldUseSetNativePropsInFabric();
   const useSetNativePropsInNativeAnimationsInFabric =
     ReactNativeFeatureFlags.shouldUseSetNativePropsInNativeAnimationsInFabric();
 
   const useAnimatedPropsLifecycle =
-    ReactNativeFeatureFlags.usePassiveEffectsForAnimations()
-      ? useAnimatedPropsLifecycle_passiveEffects
+    ReactNativeFeatureFlags.useInsertionEffectsForAnimations()
+      ? useAnimatedPropsLifecycle_insertionEffects
       : useAnimatedPropsLifecycle_layoutEffects;
 
   useAnimatedPropsLifecycle(node);
@@ -195,14 +210,19 @@ export default function useAnimatedProps<TProps: {...}, TInstance>(
   );
   const callbackRef = useRefEffect<TInstance>(refEffect);
 
-  return [reduceAnimatedProps<TProps>(node), callbackRef];
+  return [reduceAnimatedProps<TProps>(node, props), callbackRef];
 }
 
-function reduceAnimatedProps<TProps>(node: AnimatedNode): ReducedProps<TProps> {
+function reduceAnimatedProps<TProps>(
+  node: AnimatedProps,
+  props: TProps,
+): ReducedProps<TProps> {
   // Force `collapsable` to be false so that the native view is not flattened.
   // Flattened views cannot be accurately referenced by the native driver.
   return {
-    ...node.__getValue(),
+    ...(ReactNativeFeatureFlags.enableAnimatedPropsMemo()
+      ? node.__getValueWithStaticProps(props)
+      : node.__getValue()),
     collapsable: false,
   };
 }
@@ -301,10 +321,8 @@ function useAnimatedPropsLifecycle_layoutEffects(node: AnimatedProps): void {
  * uses reference counting to determine when to recursively detach its children
  * nodes. So in order to optimize this, we avoid detaching until the next attach
  * unless we are unmounting.
- *
- * NOTE: unlike `useAnimatedPropsLifecycle_layoutEffects`, this version uses passive effects to setup animation graph.
  */
-function useAnimatedPropsLifecycle_passiveEffects(node: AnimatedProps): void {
+function useAnimatedPropsLifecycle_insertionEffects(node: AnimatedProps): void {
   const prevNodeRef = useRef<?AnimatedProps>(null);
   const isUnmountingRef = useRef<boolean>(false);
 
@@ -315,14 +333,14 @@ function useAnimatedPropsLifecycle_passiveEffects(node: AnimatedProps): void {
     NativeAnimatedHelper.API.flushQueue();
   });
 
-  useEffect(() => {
+  useInsertionEffect(() => {
     isUnmountingRef.current = false;
     return () => {
       isUnmountingRef.current = true;
     };
   }, []);
 
-  useEffect(() => {
+  useInsertionEffect(() => {
     node.__attach();
     let drivenAnimationEndedListener: ?EventSubscription = null;