@office-iss/react-native-win32 0.71.5 → 0.72.0-preview.1

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

package/Libraries/Animated/nodes/AnimatedStyle.js

@@ -13,24 +13,54 @@
 import type {PlatformConfig} from '../AnimatedPlatformConfig';
 
 import flattenStyle from '../../StyleSheet/flattenStyle';
+import Platform from '../../Utilities/Platform';
 import NativeAnimatedHelper from '../NativeAnimatedHelper';
 import AnimatedNode from './AnimatedNode';
 import AnimatedTransform from './AnimatedTransform';
 import AnimatedWithChildren from './AnimatedWithChildren';
 
+function createAnimatedStyle(inputStyle: any): Object {
+  // $FlowFixMe[underconstrained-implicit-instantiation]
+  const style = flattenStyle(inputStyle);
+  const animatedStyles: any = {};
+  for (const key in style) {
+    const value = style[key];
+    if (key === 'transform') {
+      animatedStyles[key] = new AnimatedTransform(value);
+    } else if (value instanceof AnimatedNode) {
+      animatedStyles[key] = value;
+    } else if (value && !Array.isArray(value) && typeof value === 'object') {
+      animatedStyles[key] = createAnimatedStyle(value);
+    }
+  }
+  return animatedStyles;
+}
+
+function createStyleWithAnimatedTransform(inputStyle: any): Object {
+  // $FlowFixMe[underconstrained-implicit-instantiation]
+  let style = flattenStyle(inputStyle) || ({}: {[string]: any});
+
+  if (style.transform) {
+    style = {
+      ...style,
+      transform: new AnimatedTransform(style.transform),
+    };
+  }
+  return style;
+}
+
 export default class AnimatedStyle extends AnimatedWithChildren {
+  _inputStyle: any;
   _style: Object;
 
   constructor(style: any) {
     super();
-    style = flattenStyle(style) || ({}: {[string]: any});
-    if (style.transform) {
-      style = {
-        ...style,
-        transform: new AnimatedTransform(style.transform),
-      };
+    if (Platform.OS === 'web') {
+      this._inputStyle = style;
+      this._style = createAnimatedStyle(style);
+    } else {
+      this._style = createStyleWithAnimatedTransform(style);
     }
-    this._style = style;
   }
 
   // Recursively get values for nested styles (like iOS's shadowOffset)
@@ -50,7 +80,11 @@ export default class AnimatedStyle extends AnimatedWithChildren {
     return updatedStyle;
   }
 
-  __getValue(): Object {
+  __getValue(): Object | Array<Object> {
+    if (Platform.OS === 'web') {
+      return [this._inputStyle, this._walkStyleAndGetValues(this._style)];
+    }
+
     return this._walkStyleAndGetValues(this._style);
   }
 

package/Libraries/Animated/nodes/AnimatedTransform.js

@@ -68,7 +68,7 @@ export default class AnimatedTransform extends AnimatedWithChildren {
   }
 
   __getNativeConfig(): any {
-    const transConfigs = [];
+    const transConfigs: Array<any> = [];
 
     this._transforms.forEach(transform => {
       for (const key in transform) {

package/Libraries/Animated/nodes/AnimatedValue.js

@@ -48,21 +48,18 @@ const NativeAnimatedAPI = NativeAnimatedHelper.API;
  * this two-phases process is to deal with composite props such as
  * transform which can receive values from multiple parents.
  */
-function _flush(rootNode: AnimatedValue): void {
-  const animatedStyles = new Set<AnimatedValue | AnimatedNode>();
-  function findAnimatedStyles(node: AnimatedValue | AnimatedNode) {
-    /* $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. */
+export function flushValue(rootNode: AnimatedNode): void {
+  const leaves = new Set<{update: () => void, ...}>();
+  function findAnimatedStyles(node: AnimatedNode) {
+    // $FlowFixMe[prop-missing]
     if (typeof node.update === 'function') {
-      animatedStyles.add(node);
+      leaves.add((node: any));
     } else {
       node.__getChildren().forEach(findAnimatedStyles);
     }
   }
   findAnimatedStyles(rootNode);
-  // $FlowFixMe[prop-missing]
-  animatedStyles.forEach(animatedStyle => animatedStyle.update());
+  leaves.forEach(leaf => leaf.update());
 }
 
 /**
@@ -91,7 +88,6 @@ export default class AnimatedValue extends AnimatedWithChildren {
   _animation: ?Animation;
   _tracking: ?AnimatedTracking;
 
-  // $FlowFixMe[missing-local-annot]
   constructor(value: number, config?: ?AnimatedValueConfig) {
     super();
     if (typeof value !== 'number') {
@@ -291,9 +287,9 @@ export default class AnimatedValue extends AnimatedWithChildren {
 
     this._value = value;
     if (flush) {
-      _flush(this);
+      flushValue(this);
     }
-    super.__callListeners(this.__getValue());
+    this.__callListeners(this.__getValue());
   }
 
   __getNativeConfig(): Object {

package/Libraries/Animated/nodes/AnimatedWithChildren.js

@@ -70,7 +70,7 @@ export default class AnimatedWithChildren extends AnimatedNode {
     }
   }
 
-  __getChildren(): Array<AnimatedNode> {
+  __getChildren(): $ReadOnlyArray<AnimatedNode> {
     return this._children;
   }
 

package/Libraries/Animated/useAnimatedProps.js

@@ -10,6 +10,7 @@
 
 'use strict';
 
+import {isPublicInstance as isFabricPublicInstance} from '../Renderer/public/ReactFabricPublicInstanceUtils';
 import useRefEffect from '../Utilities/useRefEffect';
 import {AnimatedEvent} from './AnimatedEvent';
 import NativeAnimatedHelper from './NativeAnimatedHelper';
@@ -52,7 +53,7 @@ export default function useAnimatedProps<TProps: {...}, TInstance>(
   //   2) Update `onUpdateRef`.
   //   3) Update listeners for `AnimatedEvent` props.
   //
-  // Ideally, each of these would be separat "effects" so that they are not
+  // Ideally, each of these would be separate "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.
@@ -183,7 +184,7 @@ function getEventTarget<TInstance>(instance: TInstance): TInstance {
 // $FlowFixMe[unclear-type] - Legacy instance assumptions.
 function isFabricInstance(instance: any): boolean {
   return (
-    hasFabricHandle(instance) ||
+    isFabricPublicInstance(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
@@ -192,13 +193,9 @@ function isFabricInstance(instance: any): boolean {
     // 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?.())
+    isFabricPublicInstance(instance?.getNativeScrollRef?.()) ||
+    isFabricPublicInstance(
+      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;
-}

package/Libraries/BatchedBridge/MessageQueue.js

@@ -207,7 +207,7 @@ class MessageQueue {
           });
           warnOnce(
             'excessive-number-of-pending-callbacks',
-            `Please report: Excessive number of pending callbacks: ${
+            `Excessive number of pending callbacks: ${
               this._successCallbacks.size
             }. Some pending callbacks that might have leaked by never being called from native code: ${stringifySafe(
               info,
@@ -381,6 +381,7 @@ class MessageQueue {
     return (
       // $FlowFixMe[cannot-resolve-name]
       typeof DebuggerInternal !== 'undefined' &&
+      // $FlowFixMe[cannot-resolve-name]
       DebuggerInternal.shouldPauseOnThrow === true
     );
   }

package/Libraries/BatchedBridge/NativeModules.d.ts

@@ -8,7 +8,7 @@
  */
 
 /**
- * Interface for NativeModules which allows to augment NativeModules with type informations.
+ * Interface for NativeModules which allows to augment NativeModules with type information.
  * See react-native-sensor-manager for example.
  */
 interface NativeModulesStatic {

package/Libraries/BatchedBridge/NativeModules.js

@@ -134,6 +134,7 @@ function genMethod(moduleID: number, methodID: number, type: MethodType) {
       const onSuccess: ?(mixed) => void = hasSuccessCallback ? lastArg : null;
       // $FlowFixMe[incompatible-type]
       const onFail: ?(mixed) => void = hasErrorCallback ? secondLastArg : null;
+      // $FlowFixMe[unsafe-addition]
       const callbackCount = hasSuccessCallback + hasErrorCallback;
       const newArgs = args.slice(0, args.length - callbackCount);
       if (type === 'sync') {