react-native 0.0.0-201c10733 → 0.0.0-268efb102

package/Libraries/Animated/createAnimatedComponent_EXPERIMENTAL.js

@@ -0,0 +1,48 @@
+/**
+ * Copyright (c) Facebook, Inc. and its 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 useAnimatedProps from './useAnimatedProps';
+import useMergeRefs from '../Utilities/useMergeRefs';
+import StyleSheet from '../StyleSheet/StyleSheet';
+import * as React from 'react';
+
+/**
+ * Experimental implementation of `createAnimatedComponent` that is intended to
+ * be compatible with concurrent rendering.
+ */
+export default function createAnimatedComponent<TProps: {...}, TInstance>(
+  Component: React.AbstractComponent<TProps, TInstance>,
+): React.AbstractComponent<TProps, TInstance> {
+  return React.forwardRef((props, forwardedRef) => {
+    const [reducedProps, callbackRef] = useAnimatedProps<TProps, TInstance>(
+      props,
+    );
+    const ref = useMergeRefs<TInstance | null>(callbackRef, forwardedRef);
+
+    // Some components require explicit passthrough values for animation
+    // to work properly. For example, if an animated component is
+    // transformed and Pressable, onPress will not work after transform
+    // without these passthrough values.
+    // $FlowFixMe[prop-missing]
+    const {passthroughAnimatedPropExplicitValues, style} = reducedProps;
+    const {style: passthroughStyle, ...passthroughProps} =
+      passthroughAnimatedPropExplicitValues ?? {};
+    const mergedStyle = StyleSheet.compose(style, passthroughStyle);
+
+    return (
+      <Component
+        {...reducedProps}
+        {...passthroughProps}
+        style={mergedStyle}
+        ref={ref}
+      />
+    );
+  });
+}

package/Libraries/Animated/nodes/AnimatedInterpolation.js

@@ -205,14 +205,12 @@ function createInterpolationFromStringOutputRange(
   //   [200, 250],
   //   [0, 0.5],
   // ]
-  /* $FlowFixMe(>=0.18.0): `outputRange[0].match()` can return `null`. Need to
-   * guard against this possibility.
-   */
+  /* $FlowFixMe[incompatible-use] (>=0.18.0): `outputRange[0].match()` can
+   * return `null`. Need to guard against this possibility. */
   const outputRanges = outputRange[0].match(stringShapeRegex).map(() => []);
   outputRange.forEach(value => {
-    /* $FlowFixMe(>=0.18.0): `value.match()` can return `null`. Need to guard
-     * against this possibility.
-     */
+    /* $FlowFixMe[incompatible-use] (>=0.18.0): `value.match()` can return
+     * `null`. Need to guard against this possibility. */
     value.match(stringShapeRegex).forEach((number, i) => {
       outputRanges[i].push(+number);
     });
@@ -220,8 +218,10 @@ function createInterpolationFromStringOutputRange(
 
   const interpolations = outputRange[0]
     .match(stringShapeRegex)
-    /* $FlowFixMe(>=0.18.0): `outputRange[0].match()` can return `null`. Need
-     * to guard against this possibility. */
+    /* $FlowFixMe[incompatible-use] (>=0.18.0): `outputRange[0].match()` can
+     * return `null`. Need to guard against this possibility. */
+    /* $FlowFixMe[incompatible-call] (>=0.18.0): `outputRange[0].match()` can
+     * return `null`. Need to guard against this possibility. */
     .map((value, i) => {
       return createInterpolation({
         ...config,
@@ -277,12 +277,11 @@ function checkValidInputRange(arr: $ReadOnlyArray<number>) {
   for (let i = 1; i < arr.length; ++i) {
     invariant(
       arr[i] >= arr[i - 1],
-      /* $FlowFixMe(>=0.13.0) - In the addition expression below this comment,
-       * one or both of the operands may be something that doesn't cleanly
-       * convert to a string, like undefined, null, and object, etc. If you really
-       * mean this implicit string conversion, you can do something like
-       * String(myThing)
-       */
+      /* $FlowFixMe[incompatible-type] (>=0.13.0) - In the addition expression
+       * below this comment, one or both of the operands may be something that
+       * doesn't cleanly convert to a string, like undefined, null, and object,
+       * etc. If you really mean this implicit string conversion, you can do
+       * something like String(myThing) */
       'inputRange must be monotonically non-decreasing ' + arr,
     );
   }
@@ -292,12 +291,11 @@ function checkInfiniteRange(name: string, arr: $ReadOnlyArray<number>) {
   invariant(arr.length >= 2, name + ' must have at least 2 elements');
   invariant(
     arr.length !== 2 || arr[0] !== -Infinity || arr[1] !== Infinity,
-    /* $FlowFixMe(>=0.13.0) - In the addition expression below this comment,
-     * one or both of the operands may be something that doesn't cleanly convert
-     * to a string, like undefined, null, and object, etc. If you really mean
-     * this implicit string conversion, you can do something like
-     * String(myThing)
-     */
+    /* $FlowFixMe[incompatible-type] (>=0.13.0) - In the addition expression
+     * below this comment, one or both of the operands may be something that
+     * doesn't cleanly convert to a string, like undefined, null, and object,
+     * etc. If you really mean this implicit string conversion, you can do
+     * something like String(myThing) */
     name + 'cannot be ]-infinity;+infinity[ ' + arr,
   );
 }
@@ -358,8 +356,9 @@ class AnimatedInterpolation extends AnimatedWithChildren {
     return {
       inputRange: this._config.inputRange,
       // Only the `outputRange` can contain strings so we don't need to transform `inputRange` here
-      /* $FlowFixMe(>=0.38.0) - Flow error detected during the deployment of
-       * v0.38.0. To see the error, remove this comment and run flow */
+      /* $FlowFixMe[incompatible-call] (>=0.38.0) - Flow error detected during
+       * the deployment of v0.38.0. To see the error, remove this comment and
+       * run flow */
       outputRange: this.__transformDataType(this._config.outputRange),
       extrapolateLeft:
         this._config.extrapolateLeft || this._config.extrapolate || 'extend',

package/Libraries/Animated/nodes/AnimatedProps.js

@@ -33,7 +33,6 @@ class AnimatedProps extends AnimatedNode {
     }
     this._props = props;
     this._callback = callback;
-    this.__attach();
   }
 
   __getValue(): Object {

package/Libraries/Animated/nodes/AnimatedValue.js

@@ -46,9 +46,9 @@ const NativeAnimatedAPI = NativeAnimatedHelper.API;
 function _flush(rootNode: AnimatedValue): void {
   const animatedStyles = new Set();
   function findAnimatedStyles(node) {
-    /* $FlowFixMe(>=0.68.0 site=react_native_fb) This comment suppresses an
-     * error found when Flow v0.68 was deployed. To see the error delete this
-     * comment and run Flow. */
+    /* $FlowFixMe[prop-missing] (>=0.68.0 site=react_native_fb) This comment
+     * suppresses an error found when Flow v0.68 was deployed. To see the error
+     * delete this comment and run Flow. */
     if (typeof node.update === 'function') {
       animatedStyles.add(node);
     } else {
@@ -56,10 +56,21 @@ function _flush(rootNode: AnimatedValue): void {
     }
   }
   findAnimatedStyles(rootNode);
-  /* $FlowFixMe */
+  // $FlowFixMe[prop-missing]
   animatedStyles.forEach(animatedStyle => animatedStyle.update());
 }
 
+/**
+ * Some operations are executed only on batch end, which is _mostly_ scheduled when
+ * Animated component props change. For some of the changes which require immediate execution
+ * (e.g. setValue), we create a separate batch in case none is scheduled.
+ */
+function _executeAsAnimatedBatch(id: string, operation: () => void) {
+  NativeAnimatedAPI.setWaitingForIdentifier(id);
+  operation();
+  NativeAnimatedAPI.unsetWaitingForIdentifier(id);
+}
+
 /**
  * Standard value for driving animations.  One `Animated.Value` can drive
  * multiple properties in a synchronized fashion, but can only be driven by one
@@ -115,7 +126,9 @@ class AnimatedValue extends AnimatedWithChildren {
       !this.__isNative /* don't perform a flush for natively driven values */,
     );
     if (this.__isNative) {
-      NativeAnimatedAPI.setAnimatedNodeValue(this.__getNativeTag(), value);
+      _executeAsAnimatedBatch(this.__getNativeTag().toString(), () => {
+        NativeAnimatedAPI.setAnimatedNodeValue(this.__getNativeTag(), value);
+      });
     }
   }
 
@@ -183,6 +196,12 @@ class AnimatedValue extends AnimatedWithChildren {
   resetAnimation(callback?: ?(value: number) => void): void {
     this.stopAnimation(callback);
     this._value = this._startingValue;
+    if (this.__isNative) {
+      NativeAnimatedAPI.setAnimatedNodeValue(
+        this.__getNativeTag(),
+        this._startingValue,
+      );
+    }
   }
 
   _onAnimatedValueUpdateReceived(value: number): void {

package/Libraries/Animated/nodes/AnimatedWithChildren.js

@@ -76,6 +76,7 @@ class AnimatedWithChildren extends AnimatedNode {
     super.__callListeners(value);
     if (!this.__isNative) {
       for (const child of this._children) {
+        // $FlowFixMe[method-unbinding] added when improving typing for this parameters
         if (child.__getValue) {
           child.__callListeners(child.__getValue());
         }

package/Libraries/Animated/useAnimatedProps.js

@@ -0,0 +1,211 @@
+/**
+ * Copyright (c) Facebook, Inc. and its 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
+ */
+
+'use strict';
+
+import AnimatedProps from './nodes/AnimatedProps';
+import {AnimatedEvent} from './AnimatedEvent';
+import useRefEffect from '../Utilities/useRefEffect';
+import NativeAnimatedHelper from './NativeAnimatedHelper';
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useReducer,
+  useRef,
+  useState,
+} from 'react';
+
+type ReducedProps<TProps> = {
+  ...TProps,
+  collapsable: boolean,
+  ...
+};
+type CallbackRef<T> = T => mixed;
+
+let animatedComponentNextId = 1;
+
+export default function useAnimatedProps<TProps: {...}, TInstance>(
+  props: TProps,
+): [ReducedProps<TProps>, CallbackRef<TInstance | null>] {
+  const [, scheduleUpdate] = useReducer(count => count + 1, 0);
+  const onUpdateRef = useRef<?() => void>(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],
+  );
+  useAnimatedPropsLifecycle(node);
+
+  // TODO: This "effect" does three things:
+  //
+  //   1) Call `setNativeView`.
+  //   2) Update `onUpdateRef`.
+  //   3) Update listeners for `AnimatedEvent` props.
+  //
+  // Ideally, each of these would be separat "effects" so that they are not
+  // unnecessarily re-run when irrelevant dependencies change. For example, we
+  // should be able to hoist all `AnimatedEvent` props and only do #3 if either
+  // the `AnimatedEvent` props change or `instance` changes.
+  //
+  // But there is no way to transparently compose three separate callback refs,
+  // so we just combine them all into one for now.
+  const refEffect = useCallback(
+    instance => {
+      // NOTE: This may be called more often than necessary (e.g. when `props`
+      // changes), but `setNativeView` already optimizes for that.
+      node.setNativeView(instance);
+
+      // NOTE: This callback is only used by the JavaScript animation driver.
+      onUpdateRef.current = () => {
+        if (
+          process.env.NODE_ENV === 'test' ||
+          typeof instance !== 'object' ||
+          typeof instance?.setNativeProps !== 'function' ||
+          isFabricInstance(instance)
+        ) {
+          // Schedule an update for this component to update `reducedProps`,
+          // but do not compute it immediately. If a parent also updated, we
+          // need to merge those new props in before updating.
+          scheduleUpdate();
+        } else if (!node.__isNative) {
+          // $FlowIgnore[not-a-function] - Assume it's still a function.
+          instance.setNativeProps(node.__getAnimatedValue());
+        } else {
+          throw new Error(
+            'Attempting to run JS driven animation on animated node ' +
+              'that has been moved to "native" earlier by starting an ' +
+              'animation with `useNativeDriver: true`',
+          );
+        }
+      };
+
+      const target = getEventTarget(instance);
+      const events = [];
+
+      for (const propName in props) {
+        const propValue = props[propName];
+        if (propValue instanceof AnimatedEvent && propValue.__isNative) {
+          propValue.__attach(target, propName);
+          events.push([propName, propValue]);
+        }
+      }
+
+      return () => {
+        onUpdateRef.current = null;
+
+        for (const [propName, propValue] of events) {
+          propValue.__detach(target, propName);
+        }
+      };
+    },
+    [props, node],
+  );
+  const callbackRef = useRefEffect<TInstance>(refEffect);
+
+  return [reduceAnimatedProps<TProps>(node), callbackRef];
+}
+
+function reduceAnimatedProps<TProps>(
+  node: AnimatedProps,
+): 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(),
+    collapsable: false,
+  };
+}
+
+/**
+ * Manages the lifecycle of the supplied `AnimatedProps` by invoking `__attach`
+ * and `__detach`. However, this is more complicated because `AnimatedProps`
+ * 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.
+ */
+function useAnimatedPropsLifecycle(node: AnimatedProps): void {
+  const prevNodeRef = useRef<?AnimatedProps>(null);
+  const isUnmountingRef = useRef<boolean>(false);
+
+  const [animatedComponentId] = useState(
+    () => `${animatedComponentNextId++}:animatedComponent`,
+  );
+
+  useLayoutEffect(() => {
+    NativeAnimatedHelper.API.setWaitingForIdentifier(animatedComponentId);
+  });
+
+  useEffect(() => {
+    NativeAnimatedHelper.API.unsetWaitingForIdentifier(animatedComponentId);
+  });
+
+  useLayoutEffect(() => {
+    isUnmountingRef.current = false;
+    return () => {
+      isUnmountingRef.current = true;
+    };
+  }, []);
+
+  useLayoutEffect(() => {
+    node.__attach();
+    if (prevNodeRef.current != null) {
+      const prevNode = prevNodeRef.current;
+      // TODO: Stop restoring default values (unless `reset` is called).
+      prevNode.__restoreDefaultValues();
+      prevNode.__detach();
+      prevNodeRef.current = null;
+    }
+    return () => {
+      if (isUnmountingRef.current) {
+        // NOTE: Do not restore default values on unmount, see D18197735.
+        node.__detach();
+      } else {
+        prevNodeRef.current = node;
+      }
+    };
+  }, [node]);
+}
+
+function getEventTarget<TInstance>(instance: TInstance): TInstance {
+  return typeof instance === 'object' &&
+    typeof instance?.getScrollableNode === 'function'
+    ? // $FlowFixMe[incompatible-use] - Legacy instance assumptions.
+      instance.getScrollableNode()
+    : instance;
+}
+
+// $FlowFixMe[unclear-type] - Legacy instance assumptions.
+function isFabricInstance(instance: any): boolean {
+  return (
+    hasFabricHandle(instance) ||
+    // Some components have a setNativeProps function but aren't a host component
+    // such as lists like FlatList and SectionList. These should also use
+    // forceUpdate in Fabric since setNativeProps doesn't exist on the underlying
+    // host component. This crazy hack is essentially special casing those lists and
+    // ScrollView itself to use forceUpdate in Fabric.
+    // If these components end up using forwardRef then these hacks can go away
+    // as instance would actually be the underlying host component and the above check
+    // would be sufficient.
+    hasFabricHandle(instance?.getNativeScrollRef?.()) ||
+    hasFabricHandle(instance?.getScrollResponder?.()?.getNativeScrollRef?.())
+  );
+}
+
+// $FlowFixMe[unclear-type] - Legacy instance assumptions.
+function hasFabricHandle(instance: any): boolean {
+  // eslint-disable-next-line dot-notation
+  return instance?.['_internalInstanceHandle']?.stateNode?.canonical != null;
+}