react-native-windows 0.70.9 → 0.71.0-preview.2

package/Libraries/Interaction/PanResponder.flow.js

@@ -0,0 +1,257 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ * @format
+ */
+
+'use strict';
+
+import type {PressEvent} from '../Types/CoreEventTypes';
+
+/**
+ * `PanResponder` reconciles several touches into a single gesture. It makes
+ * single-touch gestures resilient to extra touches, and can be used to
+ * recognize simple multi-touch gestures.
+ *
+ * By default, `PanResponder` holds an `InteractionManager` handle to block
+ * long-running JS events from interrupting active gestures.
+ *
+ * It provides a predictable wrapper of the responder handlers provided by the
+ * [gesture responder system](docs/gesture-responder-system.html).
+ * For each handler, it provides a new `gestureState` object alongside the
+ * native event object:
+ *
+ * ```
+ * onPanResponderMove: (event, gestureState) => {}
+ * ```
+ *
+ * A native event is a synthetic touch event with the following form:
+ *
+ *  - `nativeEvent`
+ *      + `changedTouches` - Array of all touch events that have changed since the last event
+ *      + `identifier` - The ID of the touch
+ *      + `locationX` - The X position of the touch, relative to the element
+ *      + `locationY` - The Y position of the touch, relative to the element
+ *      + `pageX` - The X position of the touch, relative to the root element
+ *      + `pageY` - The Y position of the touch, relative to the root element
+ *      + `target` - The node id of the element receiving the touch event
+ *      + `timestamp` - A time identifier for the touch, useful for velocity calculation
+ *      + `touches` - Array of all current touches on the screen
+ *
+ * A `gestureState` object has the following:
+ *
+ *  - `stateID` - ID of the gestureState- persisted as long as there at least
+ *     one touch on screen
+ *  - `moveX` - the latest screen coordinates of the recently-moved touch
+ *  - `moveY` - the latest screen coordinates of the recently-moved touch
+ *  - `x0` - the screen coordinates of the responder grant
+ *  - `y0` - the screen coordinates of the responder grant
+ *  - `dx` - accumulated distance of the gesture since the touch started
+ *  - `dy` - accumulated distance of the gesture since the touch started
+ *  - `vx` - current velocity of the gesture
+ *  - `vy` - current velocity of the gesture
+ *  - `numberActiveTouches` - Number of touches currently on screen
+ *
+ * ### Basic Usage
+ *
+ * ```
+ *   componentWillMount: function() {
+ *     this._panResponder = PanResponder.create({
+ *       // Ask to be the responder:
+ *       onStartShouldSetPanResponder: (evt, gestureState) => true,
+ *       onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
+ *       onMoveShouldSetPanResponder: (evt, gestureState) => true,
+ *       onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,
+ *
+ *       onPanResponderGrant: (evt, gestureState) => {
+ *         // The gesture has started. Show visual feedback so the user knows
+ *         // what is happening!
+ *
+ *         // gestureState.d{x,y} will be set to zero now
+ *       },
+ *       onPanResponderMove: (evt, gestureState) => {
+ *         // The most recent move distance is gestureState.move{X,Y}
+ *
+ *         // The accumulated gesture distance since becoming responder is
+ *         // gestureState.d{x,y}
+ *       },
+ *       onPanResponderTerminationRequest: (evt, gestureState) => true,
+ *       onPanResponderRelease: (evt, gestureState) => {
+ *         // The user has released all touches while this view is the
+ *         // responder. This typically means a gesture has succeeded
+ *       },
+ *       onPanResponderTerminate: (evt, gestureState) => {
+ *         // Another component has become the responder, so this gesture
+ *         // should be cancelled
+ *       },
+ *       onShouldBlockNativeResponder: (evt, gestureState) => {
+ *         // Returns whether this component should block native components from becoming the JS
+ *         // responder. Returns true by default. Is currently only supported on android.
+ *         return true;
+ *       },
+ *     });
+ *   },
+ *
+ *   render: function() {
+ *     return (
+ *       <View {...this._panResponder.panHandlers} />
+ *     );
+ *   },
+ *
+ * ```
+ *
+ * ### Working Example
+ *
+ * To see it in action, try the
+ * [PanResponder example in RNTester](https://github.com/facebook/react-native/blob/HEAD/packages/rn-tester/js/examples/PanResponder/PanResponderExample.js)
+ */
+
+export type GestureState = {|
+  /**
+   * ID of the gestureState - persisted as long as there at least one touch on screen
+   */
+  stateID: number,
+
+  /**
+   * The latest screen coordinates of the recently-moved touch
+   */
+  moveX: number,
+
+  /**
+   * The latest screen coordinates of the recently-moved touch
+   */
+  moveY: number,
+
+  /**
+   * The screen coordinates of the responder grant
+   */
+  x0: number,
+
+  /**
+   * The screen coordinates of the responder grant
+   */
+  y0: number,
+
+  /**
+   * Accumulated distance of the gesture since the touch started
+   */
+  dx: number,
+
+  /**
+   * Accumulated distance of the gesture since the touch started
+   */
+  dy: number,
+
+  /**
+   * Current velocity of the gesture
+   */
+  vx: number,
+
+  /**
+   * Current velocity of the gesture
+   */
+  vy: number,
+
+  /**
+   * Number of touches currently on screen
+   */
+  numberActiveTouches: number,
+
+  /**
+   * All `gestureState` accounts for timeStamps up until this value
+   *
+   * @private
+   */
+  _accountsForMovesUpTo: number,
+|};
+
+type ActiveCallback = (
+  event: PressEvent,
+  gestureState: GestureState,
+) => boolean;
+
+type PassiveCallback = (event: PressEvent, gestureState: GestureState) => mixed;
+
+type PanHandlers = {|
+  onMoveShouldSetResponder: (event: PressEvent) => boolean,
+  onMoveShouldSetResponderCapture: (event: PressEvent) => boolean,
+  onResponderEnd: (event: PressEvent) => void,
+  onResponderGrant: (event: PressEvent) => boolean,
+  onResponderMove: (event: PressEvent) => void,
+  onResponderReject: (event: PressEvent) => void,
+  onResponderRelease: (event: PressEvent) => void,
+  onResponderStart: (event: PressEvent) => void,
+  onResponderTerminate: (event: PressEvent) => void,
+  onResponderTerminationRequest: (event: PressEvent) => boolean,
+  onStartShouldSetResponder: (event: PressEvent) => boolean,
+  onStartShouldSetResponderCapture: (event: PressEvent) => boolean,
+|};
+
+type PanResponderConfig = $ReadOnly<{|
+  onMoveShouldSetPanResponder?: ?ActiveCallback,
+  onMoveShouldSetPanResponderCapture?: ?ActiveCallback,
+  onStartShouldSetPanResponder?: ?ActiveCallback,
+  onStartShouldSetPanResponderCapture?: ?ActiveCallback,
+  /**
+   * The body of `onResponderGrant` returns a bool, but the vast majority of
+   * callsites return void and this TODO notice is found in it:
+   *   TODO: t7467124 investigate if this can be removed
+   */
+  onPanResponderGrant?: ?(PassiveCallback | ActiveCallback),
+  onPanResponderReject?: ?PassiveCallback,
+  onPanResponderStart?: ?PassiveCallback,
+  onPanResponderEnd?: ?PassiveCallback,
+  onPanResponderRelease?: ?PassiveCallback,
+  onPanResponderMove?: ?PassiveCallback,
+  onPanResponderTerminate?: ?PassiveCallback,
+  onPanResponderTerminationRequest?: ?ActiveCallback,
+  onShouldBlockNativeResponder?: ?ActiveCallback,
+|}>;
+
+export type PanResponderType = {
+  _initializeGestureState: (gestureState: GestureState) => void,
+  _updateGestureStateOnMove: (
+    gestureState: GestureState,
+    touchHistory: $PropertyType<PressEvent, 'touchHistory'>,
+  ) => void,
+  /**
+   * @param {object} config Enhanced versions of all of the responder callbacks
+   * that provide not only the typical `ResponderSyntheticEvent`, but also the
+   * `PanResponder` gesture state.  Simply replace the word `Responder` with
+   * `PanResponder` in each of the typical `onResponder*` callbacks. For
+   * example, the `config` object would look like:
+   *
+   *  - `onMoveShouldSetPanResponder: (e, gestureState) => {...}`
+   *  - `onMoveShouldSetPanResponderCapture: (e, gestureState) => {...}`
+   *  - `onStartShouldSetPanResponder: (e, gestureState) => {...}`
+   *  - `onStartShouldSetPanResponderCapture: (e, gestureState) => {...}`
+   *  - `onPanResponderReject: (e, gestureState) => {...}`
+   *  - `onPanResponderGrant: (e, gestureState) => {...}`
+   *  - `onPanResponderStart: (e, gestureState) => {...}`
+   *  - `onPanResponderEnd: (e, gestureState) => {...}`
+   *  - `onPanResponderRelease: (e, gestureState) => {...}`
+   *  - `onPanResponderMove: (e, gestureState) => {...}`
+   *  - `onPanResponderTerminate: (e, gestureState) => {...}`
+   *  - `onPanResponderTerminationRequest: (e, gestureState) => {...}`
+   *  - `onShouldBlockNativeResponder: (e, gestureState) => {...}`
+   *
+   *  In general, for events that have capture equivalents, we update the
+   *  gestureState once in the capture phase and can use it in the bubble phase
+   *  as well.
+   *
+   *  Be careful with onStartShould* callbacks. They only reflect updated
+   *  `gestureState` for start/end events that bubble/capture to the Node.
+   *  Once the node is the responder, you can rely on every start/end event
+   *  being processed by the gesture and `gestureState` being updated
+   *  accordingly. (numberActiveTouches) may not be totally accurate unless you
+   *  are the responder.
+   */
+  create: (config: PanResponderConfig) => {
+    getInteractionHandle: () => ?number,
+    panHandlers: PanHandlers,
+  },
+};

package/Libraries/Interaction/PanResponder.js

@@ -10,11 +10,12 @@
 
 'use strict';
 
+import type {PressEvent} from '../Types/CoreEventTypes';
+import type {PanResponderType} from './PanResponder.flow.js';
+
 const InteractionManager = require('./InteractionManager');
 const TouchHistoryMath = require('./TouchHistoryMath');
 
-import type {PressEvent} from '../Types/CoreEventTypes';
-
 const currentCentroidXOfTouchesChangedAfter =
   TouchHistoryMath.currentCentroidXOfTouchesChangedAfter;
 const currentCentroidYOfTouchesChangedAfter =
@@ -226,7 +227,7 @@ type PanResponderConfig = $ReadOnly<{|
   onShouldBlockNativeResponder?: ?ActiveCallback,
 |}>;
 
-const PanResponder = {
+const PanResponder: PanResponderType = {
   /**
    *
    * A graphical explanation of the touch data flow:

package/Libraries/JSInspector/JSInspector.js

@@ -19,9 +19,6 @@ interface Agent {
 // Flow doesn't support static declarations in interface
 type AgentClass = Class<Agent> & {DOMAIN: string, ...};
 
-declare function __registerInspectorAgent(type: AgentClass): void;
-declare function __inspectorTimestamp(): number;
-
 const JSInspector = {
   registerAgent(type: AgentClass) {
     if (global.__registerInspectorAgent) {

package/Libraries/JSInspector/NetworkAgent.js

@@ -10,11 +10,11 @@
 
 'use strict';
 
+import type EventSender from './InspectorAgent';
+
+const XMLHttpRequest = require('../Network/XMLHttpRequest');
 const InspectorAgent = require('./InspectorAgent');
 const JSInspector = require('./JSInspector');
-const XMLHttpRequest = require('../Network/XMLHttpRequest');
-
-import type EventSender from './InspectorAgent';
 
 type RequestId = string;
 

package/Libraries/LayoutAnimation/LayoutAnimation.d.ts

@@ -0,0 +1,84 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+export type LayoutAnimationType =
+  | 'spring'
+  | 'linear'
+  | 'easeInEaseOut'
+  | 'easeIn'
+  | 'easeOut'
+  | 'keyboard';
+
+export type LayoutAnimationTypes = {
+  [type in LayoutAnimationType]: type;
+};
+
+export type LayoutAnimationProperty =
+  | 'opacity'
+  | 'scaleX'
+  | 'scaleY'
+  | 'scaleXY';
+
+export type LayoutAnimationProperties = {
+  [prop in LayoutAnimationProperty]: prop;
+};
+
+export interface LayoutAnimationAnim {
+  duration?: number | undefined;
+  delay?: number | undefined;
+  springDamping?: number | undefined;
+  initialVelocity?: number | undefined;
+  type?: LayoutAnimationType | undefined;
+  property?: LayoutAnimationProperty | undefined;
+}
+
+export interface LayoutAnimationConfig {
+  duration: number;
+  create?: LayoutAnimationAnim | undefined;
+  update?: LayoutAnimationAnim | undefined;
+  delete?: LayoutAnimationAnim | undefined;
+}
+
+/** Automatically animates views to their new positions when the next layout happens.
+ * A common way to use this API is to call LayoutAnimation.configureNext before
+ * calling setState. */
+export interface LayoutAnimationStatic {
+  /** Schedules an animation to happen on the next layout.
+   * @param config Specifies animation properties:
+   * `duration` in milliseconds
+   * `create`, config for animating in new views (see Anim type)
+   * `update`, config for animating views that have been updated (see Anim type)
+   * @param onAnimationDidEnd Called when the animation finished. Only supported on iOS.
+   */
+  configureNext: (
+    config: LayoutAnimationConfig,
+    onAnimationDidEnd?: () => void,
+    onAnimationDidFail?: () => void,
+  ) => void;
+  /** Helper for creating a config for configureNext. */
+  create: (
+    duration: number,
+    type?: LayoutAnimationType,
+    creationProp?: LayoutAnimationProperty,
+  ) => LayoutAnimationConfig;
+  Types: LayoutAnimationTypes;
+  Properties: LayoutAnimationProperties;
+  configChecker: (shapeTypes: {[key: string]: any}) => any;
+  Presets: {
+    easeInEaseOut: LayoutAnimationConfig;
+    linear: LayoutAnimationConfig;
+    spring: LayoutAnimationConfig;
+  };
+  easeInEaseOut: (onAnimationDidEnd?: () => void) => void;
+  linear: (onAnimationDidEnd?: () => void) => void;
+  spring: (onAnimationDidEnd?: () => void) => void;
+}
+
+export const LayoutAnimation: LayoutAnimationStatic;
+export type LayoutAnimation = LayoutAnimationStatic;

package/Libraries/LayoutAnimation/LayoutAnimation.js

@@ -10,16 +10,17 @@
 
 'use strict';
 
-const UIManager = require('../ReactNative/UIManager');
 import type {Spec as FabricUIManagerSpec} from '../ReactNative/FabricUIManager';
 import type {
   LayoutAnimationConfig as LayoutAnimationConfig_,
-  LayoutAnimationType,
   LayoutAnimationProperty,
+  LayoutAnimationType,
 } from '../Renderer/shims/ReactNativeTypes';
 
-import Platform from '../Utilities/Platform';
 import ReactNativeFeatureFlags from '../ReactNative/ReactNativeFeatureFlags';
+import Platform from '../Utilities/Platform';
+
+const UIManager = require('../ReactNative/UIManager');
 
 // Reexport type
 export type LayoutAnimationConfig = LayoutAnimationConfig_;

package/Libraries/Linking/Linking.d.ts

@@ -0,0 +1,61 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import {NativeEventEmitter} from '../EventEmitter/NativeEventEmitter';
+import {EmitterSubscription} from '../vendor/emitter/EventEmitter';
+
+export interface LinkingStatic extends NativeEventEmitter {
+  /**
+   * Add a handler to Linking changes by listening to the `url` event type
+   * and providing the handler
+   */
+  addEventListener(
+    type: 'url',
+    handler: (event: {url: string}) => void,
+  ): EmitterSubscription;
+
+  /**
+   * Try to open the given url with any of the installed apps.
+   * You can use other URLs, like a location (e.g. "geo:37.484847,-122.148386"), a contact, or any other URL that can be opened with the installed apps.
+   * NOTE: This method will fail if the system doesn't know how to open the specified URL. If you're passing in a non-http(s) URL, it's best to check {@code canOpenURL} first.
+   * NOTE: For web URLs, the protocol ("http://", "https://") must be set accordingly!
+   */
+  openURL(url: string): Promise<any>;
+
+  /**
+   * Determine whether or not an installed app can handle a given URL.
+   * NOTE: For web URLs, the protocol ("http://", "https://") must be set accordingly!
+   * NOTE: As of iOS 9, your app needs to provide the LSApplicationQueriesSchemes key inside Info.plist.
+   * @param URL the URL to open
+   */
+  canOpenURL(url: string): Promise<boolean>;
+
+  /**
+   * If the app launch was triggered by an app link with, it will give the link url, otherwise it will give null
+   * NOTE: To support deep linking on Android, refer http://developer.android.com/training/app-indexing/deep-linking.html#handling-intents
+   */
+  getInitialURL(): Promise<string | null>;
+
+  /**
+   * Open the Settings app and displays the app’s custom settings, if it has any.
+   */
+  openSettings(): Promise<void>;
+
+  /**
+   * Sends an Android Intent - a broad surface to express Android functions.  Useful for deep-linking to settings pages,
+   * opening an SMS app with a message draft in place, and more.  See https://developer.android.com/reference/kotlin/android/content/Intent?hl=en
+   */
+  sendIntent(
+    action: string,
+    extras?: Array<{key: string; value: string | number | boolean}>,
+  ): Promise<void>;
+}
+
+export const Linking: LinkingStatic;
+export type Linking = LinkingStatic;

package/Libraries/Linking/Linking.js

@@ -9,11 +9,12 @@
  */
 
 import type {EventSubscription} from '../vendor/emitter/EventEmitter';
+
 import NativeEventEmitter from '../EventEmitter/NativeEventEmitter';
 import InteractionManager from '../Interaction/InteractionManager';
 import Platform from '../Utilities/Platform';
-import NativeLinkingManager from './NativeLinkingManager';
 import NativeIntentAndroid from './NativeIntentAndroid';
+import NativeLinkingManager from './NativeLinkingManager';
 import invariant from 'invariant';
 import nullthrows from 'nullthrows';
 
@@ -123,7 +124,7 @@ class Linking extends NativeEventEmitter<LinkingEventDefinitions> {
     }
   }
 
-  _validateURL(url: string) {
+  _validateURL(url: string): void {
     invariant(
       typeof url === 'string',
       'Invalid URL: should be a string. Was: ' + url,

package/Libraries/Linking/NativeIntentAndroid.js

@@ -9,6 +9,7 @@
  */
 
 import type {TurboModule} from '../TurboModule/RCTExport';
+
 import * as TurboModuleRegistry from '../TurboModule/TurboModuleRegistry';
 
 export interface Spec extends TurboModule {

package/Libraries/Linking/NativeLinkingManager.js

@@ -9,6 +9,7 @@
  */
 
 import type {TurboModule} from '../TurboModule/RCTExport';
+
 import * as TurboModuleRegistry from '../TurboModule/TurboModuleRegistry';
 
 export interface Spec extends TurboModule {

package/Libraries/Lists/CellRenderMask.js

@@ -45,16 +45,22 @@ export class CellRenderMask {
     return this._regions;
   }
 
-  addCells(cells: {first: number, last: number}) {
+  addCells(cells: {first: number, last: number}): void {
     invariant(
       cells.first >= 0 &&
         cells.first < this._numCells &&
-        cells.last >= 0 &&
+        cells.last >= -1 &&
         cells.last < this._numCells &&
-        cells.last >= cells.first,
+        cells.last >= cells.first - 1,
       'CellRenderMask.addCells called with invalid cell range',
     );
 
+    // VirtualizedList uses inclusive ranges, where zero-count states are
+    // possible. E.g. [0, -1] for no cells, starting at 0.
+    if (cells.last < cells.first) {
+      return;
+    }
+
     const [firstIntersect, firstIntersectIdx] = this._findRegion(cells.first);
     const [lastIntersect, lastIntersectIdx] = this._findRegion(cells.last);
 
@@ -110,6 +116,10 @@ export class CellRenderMask {
     );
   }
 
+  numCells(): number {
+    return this._numCells;
+  }
+
   equals(other: CellRenderMask): boolean {
     return (
       this._numCells === other._numCells &&

package/Libraries/Lists/ChildListCollection.js

@@ -0,0 +1,72 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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
+ * @format
+ */
+
+import invariant from 'invariant';
+
+export default class ChildListCollection<TList> {
+  _cellKeyToChildren: Map<string, Set<TList>> = new Map();
+  _childrenToCellKey: Map<TList, string> = new Map();
+
+  add(list: TList, cellKey: string): void {
+    invariant(
+      !this._childrenToCellKey.has(list),
+      'Trying to add already present child list',
+    );
+
+    const cellLists = this._cellKeyToChildren.get(cellKey) ?? new Set();
+    cellLists.add(list);
+    this._cellKeyToChildren.set(cellKey, cellLists);
+
+    this._childrenToCellKey.set(list, cellKey);
+  }
+
+  remove(list: TList): void {
+    const cellKey = this._childrenToCellKey.get(list);
+    invariant(cellKey != null, 'Trying to remove non-present child list');
+    this._childrenToCellKey.delete(list);
+
+    const cellLists = this._cellKeyToChildren.get(cellKey);
+    invariant(cellLists, '_cellKeyToChildren should contain cellKey');
+    cellLists.delete(list);
+
+    if (cellLists.size === 0) {
+      this._cellKeyToChildren.delete(cellKey);
+    }
+  }
+
+  forEach(fn: TList => void): void {
+    for (const listSet of this._cellKeyToChildren.values()) {
+      for (const list of listSet) {
+        fn(list);
+      }
+    }
+  }
+
+  forEachInCell(cellKey: string, fn: TList => void): void {
+    const listSet = this._cellKeyToChildren.get(cellKey) ?? [];
+    for (const list of listSet) {
+      fn(list);
+    }
+  }
+
+  anyInCell(cellKey: string, fn: TList => boolean): boolean {
+    const listSet = this._cellKeyToChildren.get(cellKey) ?? [];
+    for (const list of listSet) {
+      if (fn(list)) {
+        return true;
+      }
+    }
+    return false;
+  }
+
+  size(): number {
+    return this._childrenToCellKey.size;
+  }
+}