react-native 0.71.6 → 0.72.0-rc.1

package/Libraries/Animated/nodes/AnimatedColor.js

@@ -18,7 +18,7 @@ import type {PlatformConfig} from '../AnimatedPlatformConfig';
 import normalizeColor from '../../StyleSheet/normalizeColor';
 import {processColorObject} from '../../StyleSheet/PlatformColorValueTypes';
 import NativeAnimatedHelper from '../NativeAnimatedHelper';
-import AnimatedValue from './AnimatedValue';
+import AnimatedValue, {flushValue} from './AnimatedValue';
 import AnimatedWithChildren from './AnimatedWithChildren';
 
 export type AnimatedColorConfig = $ReadOnly<{
@@ -43,10 +43,11 @@ type RgbaAnimatedValue = {
   ...
 };
 
+export type InputValue = ?(RgbaValue | RgbaAnimatedValue | ColorValue);
+
 const NativeAnimatedAPI = NativeAnimatedHelper.API;
 
 const defaultColor: RgbaValue = {r: 0, g: 0, b: 0, a: 1.0};
-let _uniqueId = 1;
 
 /* eslint no-bitwise: 0 */
 function processColor(
@@ -113,22 +114,12 @@ export default class AnimatedColor extends AnimatedWithChildren {
   b: AnimatedValue;
   a: AnimatedValue;
   nativeColor: ?NativeColorValue;
-  _listeners: {
-    [key: string]: {
-      r: string,
-      g: string,
-      b: string,
-      a: string,
-      ...
-    },
-    ...
-  } = {};
-
-  constructor(
-    valueIn?: ?(RgbaValue | RgbaAnimatedValue | ColorValue),
-    config?: ?AnimatedColorConfig,
-  ) {
+
+  _suspendCallbacks: number = 0;
+
+  constructor(valueIn?: InputValue, config?: ?AnimatedColorConfig) {
     super();
+
     let value: RgbaValue | RgbaAnimatedValue | ColorValue =
       valueIn ?? defaultColor;
     if (isRgbaAnimatedValue(value)) {
@@ -156,7 +147,8 @@ export default class AnimatedColor extends AnimatedWithChildren {
       this.b = new AnimatedValue(initColor.b);
       this.a = new AnimatedValue(initColor.a);
     }
-    if (this.nativeColor || (config && config.useNativeDriver)) {
+
+    if (config?.useNativeDriver) {
       this.__makeNative();
     }
   }
@@ -174,25 +166,27 @@ export default class AnimatedColor extends AnimatedWithChildren {
 
     const processedColor: RgbaValue | NativeColorValue =
       processColor(value) ?? defaultColor;
-    if (isRgbaValue(processedColor)) {
-      // $FlowIgnore[incompatible-type] - Type is verified above
-      const rgbaValue: RgbaValue = processedColor;
-      this.r.setValue(rgbaValue.r);
-      this.g.setValue(rgbaValue.g);
-      this.b.setValue(rgbaValue.b);
-      this.a.setValue(rgbaValue.a);
-      if (this.nativeColor != null) {
-        this.nativeColor = null;
-        shouldUpdateNodeConfig = true;
-      }
-    } else {
-      // $FlowIgnore[incompatible-type] - Type is verified above
-      const nativeColor: NativeColorValue = processedColor;
-      if (this.nativeColor !== nativeColor) {
-        this.nativeColor = nativeColor;
-        shouldUpdateNodeConfig = true;
+    this._withSuspendedCallbacks(() => {
+      if (isRgbaValue(processedColor)) {
+        // $FlowIgnore[incompatible-type] - Type is verified above
+        const rgbaValue: RgbaValue = processedColor;
+        this.r.setValue(rgbaValue.r);
+        this.g.setValue(rgbaValue.g);
+        this.b.setValue(rgbaValue.b);
+        this.a.setValue(rgbaValue.a);
+        if (this.nativeColor != null) {
+          this.nativeColor = null;
+          shouldUpdateNodeConfig = true;
+        }
+      } else {
+        // $FlowIgnore[incompatible-type] - Type is verified above
+        const nativeColor: NativeColorValue = processedColor;
+        if (this.nativeColor !== nativeColor) {
+          this.nativeColor = nativeColor;
+          shouldUpdateNodeConfig = true;
+        }
       }
-    }
+    });
 
     if (this.__isNative) {
       const nativeTag = this.__getNativeTag();
@@ -203,7 +197,12 @@ export default class AnimatedColor extends AnimatedWithChildren {
         );
       }
       NativeAnimatedAPI.unsetWaitingForIdentifier(nativeTag.toString());
+    } else {
+      flushValue(this);
     }
+
+    // $FlowFixMe[incompatible-call]
+    this.__callListeners(this.__getValue());
   }
 
   /**
@@ -240,50 +239,6 @@ export default class AnimatedColor extends AnimatedWithChildren {
     this.a.extractOffset();
   }
 
-  /**
-   * Adds an asynchronous listener to the value so you can observe updates from
-   * animations.  This is useful because there is no way to synchronously read
-   * the value because it might be driven natively.
-   *
-   * Returns a string that serves as an identifier for the listener.
-   */
-  addListener(callback: ColorListenerCallback): string {
-    const id = String(_uniqueId++);
-    const jointCallback = ({value: number}: any) => {
-      callback(this.__getValue());
-    };
-    this._listeners[id] = {
-      r: this.r.addListener(jointCallback),
-      g: this.g.addListener(jointCallback),
-      b: this.b.addListener(jointCallback),
-      a: this.a.addListener(jointCallback),
-    };
-    return id;
-  }
-
-  /**
-   * Unregister a listener. The `id` param shall match the identifier
-   * previously returned by `addListener()`.
-   */
-  removeListener(id: string): void {
-    this.r.removeListener(this._listeners[id].r);
-    this.g.removeListener(this._listeners[id].g);
-    this.b.removeListener(this._listeners[id].b);
-    this.a.removeListener(this._listeners[id].a);
-    delete this._listeners[id];
-  }
-
-  /**
-   * Remove all registered listeners.
-   */
-  removeAllListeners(): void {
-    this.r.removeAllListeners();
-    this.g.removeAllListeners();
-    this.b.removeAllListeners();
-    this.a.removeAllListeners();
-    this._listeners = {};
-  }
-
   /**
    * Stops any running animation or tracking. `callback` is invoked with the
    * final value after stopping the animation, which is useful for updating
@@ -332,6 +287,18 @@ export default class AnimatedColor extends AnimatedWithChildren {
     super.__detach();
   }
 
+  _withSuspendedCallbacks(callback: () => void) {
+    this._suspendCallbacks++;
+    callback();
+    this._suspendCallbacks--;
+  }
+
+  __callListeners(value: number): void {
+    if (this._suspendCallbacks === 0) {
+      super.__callListeners(value);
+    }
+  }
+
   __makeNative(platformConfig: ?PlatformConfig) {
     this.r.__makeNative(platformConfig);
     this.g.__makeNative(platformConfig);

package/Libraries/Animated/nodes/AnimatedInterpolation.js

@@ -16,6 +16,8 @@ import type {PlatformConfig} from '../AnimatedPlatformConfig';
 import type AnimatedNode from './AnimatedNode';
 
 import normalizeColor from '../../StyleSheet/normalizeColor';
+import processColor from '../../StyleSheet/processColor';
+import Easing from '../Easing';
 import NativeAnimatedHelper from '../NativeAnimatedHelper';
 import AnimatedWithChildren from './AnimatedWithChildren';
 import invariant from 'invariant';
@@ -31,39 +33,17 @@ export type InterpolationConfigType<OutputT: number | string> = $ReadOnly<{
   extrapolateRight?: ExtrapolateType,
 }>;
 
-const linear = (t: number) => t;
-
 /**
  * Very handy helper to map input ranges to output ranges with an easing
  * function and custom behavior outside of the ranges.
  */
-function createInterpolation<OutputT: number | string>(
-  config: InterpolationConfigType<OutputT>,
-): (input: number) => OutputT {
-  if (config.outputRange && typeof config.outputRange[0] === 'string') {
-    return (createInterpolationFromStringOutputRange((config: any)): any);
-  }
-
+function createNumericInterpolation(
+  config: InterpolationConfigType<number>,
+): (input: number) => number {
   const outputRange: $ReadOnlyArray<number> = (config.outputRange: any);
-
   const inputRange = config.inputRange;
 
-  if (__DEV__) {
-    checkInfiniteRange('outputRange', outputRange);
-    checkInfiniteRange('inputRange', inputRange);
-    checkValidInputRange(inputRange);
-
-    invariant(
-      inputRange.length === outputRange.length,
-      'inputRange (' +
-        inputRange.length +
-        ') and outputRange (' +
-        outputRange.length +
-        ') must have the same length',
-    );
-  }
-
-  const easing = config.easing || linear;
+  const easing = config.easing || Easing.linear;
 
   let extrapolateLeft: ExtrapolateType = 'extend';
   if (config.extrapolateLeft !== undefined) {
@@ -167,24 +147,49 @@ function interpolate(
   return result;
 }
 
-function colorToRgba(input: string): string {
-  let normalizedColor = normalizeColor(input);
-  if (normalizedColor === null || typeof normalizedColor !== 'number') {
-    return input;
-  }
+const numericComponentRegex = /[+-]?(?:\d+\.?\d*|\.\d+)(?:[eE][+-]?\d+)?/g;
 
-  normalizedColor = normalizedColor || 0;
-
-  const r = (normalizedColor & 0xff000000) >>> 24;
-  const g = (normalizedColor & 0x00ff0000) >>> 16;
-  const b = (normalizedColor & 0x0000ff00) >>> 8;
-  const a = (normalizedColor & 0x000000ff) / 255;
+// Maps string inputs an RGBA color or an array of numeric components
+function mapStringToNumericComponents(
+  input: string,
+):
+  | {isColor: true, components: [number, number, number, number]}
+  | {isColor: false, components: $ReadOnlyArray<number | string>} {
+  let normalizedColor = normalizeColor(input);
+  invariant(
+    normalizedColor == null || typeof normalizedColor !== 'object',
+    'PlatformColors are not supported',
+  );
 
-  return `rgba(${r}, ${g}, ${b}, ${a})`;
+  if (typeof normalizedColor === 'number') {
+    normalizedColor = normalizedColor || 0;
+    const r = (normalizedColor & 0xff000000) >>> 24;
+    const g = (normalizedColor & 0x00ff0000) >>> 16;
+    const b = (normalizedColor & 0x0000ff00) >>> 8;
+    const a = (normalizedColor & 0x000000ff) / 255;
+    return {isColor: true, components: [r, g, b, a]};
+  } else {
+    const components: Array<string | number> = [];
+    let lastMatchEnd = 0;
+    let match: RegExp$matchResult;
+    while ((match = (numericComponentRegex.exec(input): any)) != null) {
+      if (match.index > lastMatchEnd) {
+        components.push(input.substring(lastMatchEnd, match.index));
+      }
+      components.push(parseFloat(match[0]));
+      lastMatchEnd = match.index + match[0].length;
+    }
+    invariant(
+      components.length > 0,
+      'outputRange must contain color or value with numeric component',
+    );
+    if (lastMatchEnd < input.length) {
+      components.push(input.substring(lastMatchEnd, input.length));
+    }
+    return {isColor: false, components};
+  }
 }
 
-const stringShapeRegex = /[+-]?(?:\d+\.?\d*|\.\d+)(?:[eE][+-]?\d+)?/g;
-
 /**
  * Supports string shapes by extracting numbers so new values can be computed,
  * and recombines those values into new strings of the same shape.  Supports
@@ -193,77 +198,70 @@ const stringShapeRegex = /[+-]?(?:\d+\.?\d*|\.\d+)(?:[eE][+-]?\d+)?/g;
  *   rgba(123, 42, 99, 0.36) // colors
  *   -45deg                  // values with units
  */
-function createInterpolationFromStringOutputRange(
+function createStringInterpolation(
   config: InterpolationConfigType<string>,
 ): (input: number) => string {
-  let outputRange: Array<string> = (config.outputRange: any);
-  invariant(outputRange.length >= 2, 'Bad output range');
-  outputRange = outputRange.map(colorToRgba);
-  checkPattern(outputRange);
-
-  // ['rgba(0, 100, 200, 0)', 'rgba(50, 150, 250, 0.5)']
-  // ->
-  // [
-  //   [0, 50],
-  //   [100, 150],
-  //   [200, 250],
-  //   [0, 0.5],
-  // ]
-  /* $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[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);
-    });
-  });
-
-  const interpolations = outputRange[0]
-    .match(stringShapeRegex)
-    /* $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,
-        outputRange: outputRanges[i],
-      });
-    });
+  invariant(config.outputRange.length >= 2, 'Bad output range');
+  const outputRange = config.outputRange.map(mapStringToNumericComponents);
 
-  // rgba requires that the r,g,b are integers.... so we want to round them, but we *dont* want to
-  // round the opacity (4th column).
-  const shouldRound = isRgbOrRgba(outputRange[0]);
-
-  return input => {
-    let i = 0;
-    // 'rgba(0, 100, 200, 0)'
-    // ->
-    // 'rgba(${interpolations[0](input)}, ${interpolations[1](input)}, ...'
-    return outputRange[0].replace(stringShapeRegex, () => {
-      let val = +interpolations[i++](input);
-      if (shouldRound) {
-        val = i < 4 ? Math.round(val) : Math.round(val * 1000) / 1000;
-      }
-      return String(val);
-    });
-  };
-}
-
-function isRgbOrRgba(range: string) {
-  return typeof range === 'string' && range.startsWith('rgb');
-}
-
-function checkPattern(arr: $ReadOnlyArray<string>) {
-  const pattern = arr[0].replace(stringShapeRegex, '');
-  for (let i = 1; i < arr.length; ++i) {
+  const isColor = outputRange[0].isColor;
+  if (__DEV__) {
     invariant(
-      pattern === arr[i].replace(stringShapeRegex, ''),
-      'invalid pattern ' + arr[0] + ' and ' + arr[i],
+      outputRange.every(output => output.isColor === isColor),
+      'All elements of output range should either be a color or a string with numeric components',
+    );
+    const firstOutput = outputRange[0].components;
+    invariant(
+      outputRange.every(
+        output => output.components.length === firstOutput.length,
+      ),
+      'All elements of output range should have the same number of components',
+    );
+    invariant(
+      outputRange.every(output =>
+        output.components.every(
+          (component, i) =>
+            // $FlowIgnoreMe[invalid-compare]
+            typeof component === 'number' || component === firstOutput[i],
+        ),
+      ),
+      'All elements of output range should have the same non-numeric components',
     );
   }
+
+  const numericComponents: $ReadOnlyArray<$ReadOnlyArray<number>> =
+    outputRange.map(output =>
+      isColor
+        ? // $FlowIgnoreMe[incompatible-call]
+          output.components
+        : // $FlowIgnoreMe[incompatible-call]
+          output.components.filter(c => typeof c === 'number'),
+    );
+  const interpolations = numericComponents[0].map((_, i) =>
+    createNumericInterpolation({
+      ...config,
+      outputRange: numericComponents.map(components => components[i]),
+    }),
+  );
+  if (!isColor) {
+    return input => {
+      const values = interpolations.map(interpolation => interpolation(input));
+      let i = 0;
+      return outputRange[0].components
+        .map(c => (typeof c === 'number' ? values[i++] : c))
+        .join('');
+    };
+  } else {
+    return input => {
+      const result = interpolations.map((interpolation, i) => {
+        const value = interpolation(input);
+        // rgba requires that the r,g,b are integers.... so we want to round them, but we *dont* want to
+        // round the opacity (4th column).
+        return i < 3 ? Math.round(value) : Math.round(value * 1000) / 1000;
+      });
+      return `rgba(${result[0]}, ${result[1]}, ${result[2]}, ${result[3]})`;
+    };
+  }
 }
 
 function findRange(input: number, inputRange: $ReadOnlyArray<number>) {
@@ -276,6 +274,24 @@ function findRange(input: number, inputRange: $ReadOnlyArray<number>) {
   return i - 1;
 }
 
+function checkValidRanges<OutputT: number | string>(
+  inputRange: $ReadOnlyArray<number>,
+  outputRange: $ReadOnlyArray<OutputT>,
+) {
+  checkInfiniteRange('outputRange', outputRange);
+  checkInfiniteRange('inputRange', inputRange);
+  checkValidInputRange(inputRange);
+
+  invariant(
+    inputRange.length === outputRange.length,
+    'inputRange (' +
+      inputRange.length +
+      ') and outputRange (' +
+      outputRange.length +
+      ') must have the same length',
+  );
+}
+
 function checkValidInputRange(arr: $ReadOnlyArray<number>) {
   invariant(arr.length >= 2, 'inputRange must have at least 2 elements');
   const message =
@@ -285,7 +301,10 @@ function checkValidInputRange(arr: $ReadOnlyArray<number>) {
   }
 }
 
-function checkInfiniteRange(name: string, arr: $ReadOnlyArray<number>) {
+function checkInfiniteRange<OutputT: number | string>(
+  name: string,
+  arr: $ReadOnlyArray<OutputT>,
+) {
   invariant(arr.length >= 2, name + ' must have at least 2 elements');
   invariant(
     arr.length !== 2 || arr[0] !== -Infinity || arr[1] !== Infinity,
@@ -294,6 +313,7 @@ function checkInfiniteRange(name: string, arr: $ReadOnlyArray<number>) {
      * 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[unsafe-addition]
     name + 'cannot be ]-infinity;+infinity[ ' + arr,
   );
 }
@@ -301,20 +321,34 @@ function checkInfiniteRange(name: string, arr: $ReadOnlyArray<number>) {
 export default class AnimatedInterpolation<
   OutputT: number | string,
 > extends AnimatedWithChildren {
-  // Export for testing.
-  static __createInterpolation: (
-    config: InterpolationConfigType<OutputT>,
-  ) => (input: number) => OutputT = createInterpolation;
-
   _parent: AnimatedNode;
   _config: InterpolationConfigType<OutputT>;
-  _interpolation: (input: number) => OutputT;
+  _interpolation: ?(input: number) => OutputT;
 
   constructor(parent: AnimatedNode, config: InterpolationConfigType<OutputT>) {
     super();
     this._parent = parent;
     this._config = config;
-    this._interpolation = createInterpolation(config);
+
+    if (__DEV__) {
+      checkValidRanges(config.inputRange, config.outputRange);
+
+      // Create interpolation eagerly in dev, so we can signal errors faster
+      // even when using the native driver
+      this._getInterpolation();
+    }
+  }
+
+  _getInterpolation(): number => OutputT {
+    if (!this._interpolation) {
+      const config = this._config;
+      if (config.outputRange && typeof config.outputRange[0] === 'string') {
+        this._interpolation = (createStringInterpolation((config: any)): any);
+      } else {
+        this._interpolation = (createNumericInterpolation((config: any)): any);
+      }
+    }
+    return this._interpolation;
   }
 
   __makeNative(platformConfig: ?PlatformConfig) {
@@ -322,13 +356,13 @@ export default class AnimatedInterpolation<
     super.__makeNative(platformConfig);
   }
 
-  __getValue(): number | string {
+  __getValue(): OutputT {
     const parentValue: number = this._parent.__getValue();
     invariant(
       typeof parentValue === 'number',
       'Cannot interpolate an input which is not a number.',
     );
-    return this._interpolation(parentValue);
+    return this._getInterpolation()(parentValue);
   }
 
   interpolate<NewOutputT: number | string>(
@@ -346,19 +380,31 @@ export default class AnimatedInterpolation<
     super.__detach();
   }
 
-  __transformDataType(range: $ReadOnlyArray<OutputT>): Array<any> {
-    return range.map(NativeAnimatedHelper.transformDataType);
-  }
-
   __getNativeConfig(): any {
     if (__DEV__) {
       NativeAnimatedHelper.validateInterpolation(this._config);
     }
 
+    // Only the `outputRange` can contain strings so we don't need to transform `inputRange` here
+    let outputRange = this._config.outputRange;
+    let outputType = null;
+    if (typeof outputRange[0] === 'string') {
+      // $FlowIgnoreMe[incompatible-cast]
+      outputRange = ((outputRange: $ReadOnlyArray<string>).map(value => {
+        const processedColor = processColor(value);
+        if (typeof processedColor === 'number') {
+          outputType = 'color';
+          return processedColor;
+        } else {
+          return NativeAnimatedHelper.transformDataType(value);
+        }
+      }): any);
+    }
+
     return {
       inputRange: this._config.inputRange,
-      // Only the `outputRange` can contain strings so we don't need to transform `inputRange` here
-      outputRange: this.__transformDataType(this._config.outputRange),
+      outputRange,
+      outputType,
       extrapolateLeft:
         this._config.extrapolateLeft || this._config.extrapolate || 'extend',
       extrapolateRight:

package/Libraries/Animated/nodes/AnimatedNode.js

@@ -12,7 +12,6 @@
 
 import type {PlatformConfig} from '../AnimatedPlatformConfig';
 
-import ReactNativeFeatureFlags from '../../ReactNative/ReactNativeFeatureFlags';
 import NativeAnimatedHelper from '../NativeAnimatedHelper';
 import invariant from 'invariant';
 
@@ -30,9 +29,7 @@ export default class AnimatedNode {
   __nativeAnimatedValueListener: ?any;
   __attach(): void {}
   __detach(): void {
-    if (ReactNativeFeatureFlags.removeListenersOnDetach()) {
-      this.removeAllListeners();
-    }
+    this.removeAllListeners();
     if (this.__isNative && this.__nativeTag != null) {
       NativeAnimatedHelper.API.dropAnimatedNode(this.__nativeTag);
       this.__nativeTag = undefined;
@@ -44,7 +41,7 @@ export default class AnimatedNode {
   }
   __addChild(child: AnimatedNode) {}
   __removeChild(child: AnimatedNode) {}
-  __getChildren(): Array<AnimatedNode> {
+  __getChildren(): $ReadOnlyArray<AnimatedNode> {
     return [];
   }
 
@@ -186,6 +183,7 @@ export default class AnimatedNode {
       'This JS animated node type cannot be used as native animated node',
     );
   }
+
   toJSON(): any {
     return this.__getValue();
   }

package/Libraries/Animated/nodes/AnimatedProps.js

@@ -90,14 +90,15 @@ 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);
+      }
+    }
+
     if (!this.__isNative) {
       this.__isNative = true;
-      for (const key in this._props) {
-        const value = this._props[key];
-        if (value instanceof AnimatedNode) {
-          value.__makeNative(platformConfig);
-        }
-      }
 
       // Since this does not call the super.__makeNative, we need to store the
       // supplied platformConfig here, before calling __connectAnimatedView