react-native 0.71.3 → 0.72.0-rc.0

package/Libraries/Lists/VirtualizedListProps.js

@@ -1,279 +0,0 @@
-/**
- * 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
- */
-
-import typeof ScrollView from '../Components/ScrollView/ScrollView';
-import type {ViewStyleProp} from '../StyleSheet/StyleSheet';
-import type {
-  ViewabilityConfig,
-  ViewabilityConfigCallbackPair,
-  ViewToken,
-} from './ViewabilityHelper';
-
-import * as React from 'react';
-
-export type Item = any;
-
-export type Separators = {
-  highlight: () => void,
-  unhighlight: () => void,
-  updateProps: (select: 'leading' | 'trailing', newProps: Object) => void,
-  ...
-};
-
-export type RenderItemProps<ItemT> = {
-  item: ItemT,
-  index: number,
-  separators: Separators,
-  ...
-};
-
-export type RenderItemType<ItemT> = (
-  info: RenderItemProps<ItemT>,
-) => React.Node;
-
-type RequiredProps = {|
-  /**
-   * The default accessor functions assume this is an Array<{key: string} | {id: string}> but you can override
-   * getItem, getItemCount, and keyExtractor to handle any type of index-based data.
-   */
-  data?: any,
-  /**
-   * A generic accessor for extracting an item from any sort of data blob.
-   */
-  getItem: (data: any, index: number) => ?Item,
-  /**
-   * Determines how many items are in the data blob.
-   */
-  getItemCount: (data: any) => number,
-|};
-type OptionalProps = {|
-  renderItem?: ?RenderItemType<Item>,
-  /**
-   * `debug` will turn on extra logging and visual overlays to aid with debugging both usage and
-   * implementation, but with a significant perf hit.
-   */
-  debug?: ?boolean,
-  /**
-   * DEPRECATED: Virtualization provides significant performance and memory optimizations, but fully
-   * unmounts react instances that are outside of the render window. You should only need to disable
-   * this for debugging purposes. Defaults to false.
-   */
-  disableVirtualization?: ?boolean,
-  /**
-   * A marker property for telling the list to re-render (since it implements `PureComponent`). If
-   * any of your `renderItem`, Header, Footer, etc. functions depend on anything outside of the
-   * `data` prop, stick it here and treat it immutably.
-   */
-  extraData?: any,
-  // e.g. height, y
-  getItemLayout?: (
-    data: any,
-    index: number,
-  ) => {
-    length: number,
-    offset: number,
-    index: number,
-    ...
-  },
-  horizontal?: ?boolean,
-  /**
-   * How many items to render in the initial batch. This should be enough to fill the screen but not
-   * much more. Note these items will never be unmounted as part of the windowed rendering in order
-   * to improve perceived performance of scroll-to-top actions.
-   */
-  initialNumToRender?: ?number,
-  /**
-   * Instead of starting at the top with the first item, start at `initialScrollIndex`. This
-   * disables the "scroll to top" optimization that keeps the first `initialNumToRender` items
-   * always rendered and immediately renders the items starting at this initial index. Requires
-   * `getItemLayout` to be implemented.
-   */
-  initialScrollIndex?: ?number,
-  /**
-   * Reverses the direction of scroll. Uses scale transforms of -1.
-   */
-  inverted?: ?boolean,
-  keyExtractor?: ?(item: Item, index: number) => string,
-  /**
-   * Each cell is rendered using this element. Can be a React Component Class,
-   * or a render function. Defaults to using View.
-   */
-  CellRendererComponent?: ?React.ComponentType<any>,
-  /**
-   * Rendered in between each item, but not at the top or bottom. By default, `highlighted` and
-   * `leadingItem` props are provided. `renderItem` provides `separators.highlight`/`unhighlight`
-   * which will update the `highlighted` prop, but you can also add custom props with
-   * `separators.updateProps`.
-   */
-  ItemSeparatorComponent?: ?React.ComponentType<any>,
-  /**
-   * Takes an item from `data` and renders it into the list. Example usage:
-   *
-   *     <FlatList
-   *       ItemSeparatorComponent={Platform.OS !== 'android' && ({highlighted}) => (
-   *         <View style={[style.separator, highlighted && {marginLeft: 0}]} />
-   *       )}
-   *       data={[{title: 'Title Text', key: 'item1'}]}
-   *       ListItemComponent={({item, separators}) => (
-   *         <TouchableHighlight
-   *           onPress={() => this._onPress(item)}
-   *           onShowUnderlay={separators.highlight}
-   *           onHideUnderlay={separators.unhighlight}>
-   *           <View style={{backgroundColor: 'white'}}>
-   *             <Text>{item.title}</Text>
-   *           </View>
-   *         </TouchableHighlight>
-   *       )}
-   *     />
-   *
-   * Provides additional metadata like `index` if you need it, as well as a more generic
-   * `separators.updateProps` function which let's you set whatever props you want to change the
-   * rendering of either the leading separator or trailing separator in case the more common
-   * `highlight` and `unhighlight` (which set the `highlighted: boolean` prop) are insufficient for
-   * your use-case.
-   */
-  ListItemComponent?: ?(React.ComponentType<any> | React.Element<any>),
-  /**
-   * Rendered when the list is empty. Can be a React Component Class, a render function, or
-   * a rendered element.
-   */
-  ListEmptyComponent?: ?(React.ComponentType<any> | React.Element<any>),
-  /**
-   * Rendered at the bottom of all the items. Can be a React Component Class, a render function, or
-   * a rendered element.
-   */
-  ListFooterComponent?: ?(React.ComponentType<any> | React.Element<any>),
-  /**
-   * Styling for internal View for ListFooterComponent
-   */
-  ListFooterComponentStyle?: ViewStyleProp,
-  /**
-   * Rendered at the top of all the items. Can be a React Component Class, a render function, or
-   * a rendered element.
-   */
-  ListHeaderComponent?: ?(React.ComponentType<any> | React.Element<any>),
-  /**
-   * Styling for internal View for ListHeaderComponent
-   */
-  ListHeaderComponentStyle?: ViewStyleProp,
-  /**
-   * The maximum number of items to render in each incremental render batch. The more rendered at
-   * once, the better the fill rate, but responsiveness may suffer because rendering content may
-   * interfere with responding to button taps or other interactions.
-   */
-  maxToRenderPerBatch?: ?number,
-  /**
-   * Called once when the scroll position gets within `onEndReachedThreshold` of the rendered
-   * content.
-   */
-  onEndReached?: ?(info: {distanceFromEnd: number, ...}) => void,
-  /**
-   * How far from the end (in units of visible length of the list) the bottom edge of the
-   * list must be from the end of the content to trigger the `onEndReached` callback.
-   * Thus a value of 0.5 will trigger `onEndReached` when the end of the content is
-   * within half the visible length of the list. A value of 0 will not trigger until scrolling
-   * to the very end of the list.
-   */
-  onEndReachedThreshold?: ?number,
-  /**
-   * If provided, a standard RefreshControl will be added for "Pull to Refresh" functionality. Make
-   * sure to also set the `refreshing` prop correctly.
-   */
-  onRefresh?: ?() => void,
-  /**
-   * Used to handle failures when scrolling to an index that has not been measured yet. Recommended
-   * action is to either compute your own offset and `scrollTo` it, or scroll as far as possible and
-   * then try again after more items have been rendered.
-   */
-  onScrollToIndexFailed?: ?(info: {
-    index: number,
-    highestMeasuredFrameIndex: number,
-    averageItemLength: number,
-    ...
-  }) => void,
-  /**
-   * Called when the viewability of rows changes, as defined by the
-   * `viewabilityConfig` prop.
-   */
-  onViewableItemsChanged?: ?(info: {
-    viewableItems: Array<ViewToken>,
-    changed: Array<ViewToken>,
-    ...
-  }) => void,
-  persistentScrollbar?: ?boolean,
-  /**
-   * Set this when offset is needed for the loading indicator to show correctly.
-   */
-  progressViewOffset?: number,
-  /**
-   * A custom refresh control element. When set, it overrides the default
-   * <RefreshControl> component built internally. The onRefresh and refreshing
-   * props are also ignored. Only works for vertical VirtualizedList.
-   */
-  refreshControl?: ?React.Element<any>,
-  /**
-   * Set this true while waiting for new data from a refresh.
-   */
-  refreshing?: ?boolean,
-  /**
-   * Note: may have bugs (missing content) in some circumstances - use at your own risk.
-   *
-   * This may improve scroll performance for large lists.
-   */
-  removeClippedSubviews?: boolean,
-  /**
-   * Render a custom scroll component, e.g. with a differently styled `RefreshControl`.
-   */
-  renderScrollComponent?: (props: Object) => React.Element<any>,
-  /**
-   * Amount of time between low-pri item render batches, e.g. for rendering items quite a ways off
-   * screen. Similar fill rate/responsiveness tradeoff as `maxToRenderPerBatch`.
-   */
-  updateCellsBatchingPeriod?: ?number,
-  /**
-   * See `ViewabilityHelper` for flow type and further documentation.
-   */
-  viewabilityConfig?: ViewabilityConfig,
-  /**
-   * List of ViewabilityConfig/onViewableItemsChanged pairs. A specific onViewableItemsChanged
-   * will be called when its corresponding ViewabilityConfig's conditions are met.
-   */
-  viewabilityConfigCallbackPairs?: Array<ViewabilityConfigCallbackPair>,
-  /**
-   * Determines the maximum number of items rendered outside of the visible area, in units of
-   * visible lengths. So if your list fills the screen, then `windowSize={21}` (the default) will
-   * render the visible screen area plus up to 10 screens above and 10 below the viewport. Reducing
-   * this number will reduce memory consumption and may improve performance, but will increase the
-   * chance that fast scrolling may reveal momentary blank areas of unrendered content.
-   */
-  windowSize?: ?number,
-  /**
-   * The legacy implementation is no longer supported.
-   */
-  legacyImplementation?: empty,
-|};
-
-export type Props = {|
-  ...React.ElementConfig<ScrollView>,
-  ...RequiredProps,
-  ...OptionalProps,
-|};
-
-/**
- * Subset of properties needed to calculate frame metrics
- */
-export type FrameMetricProps = {
-  data: RequiredProps['data'],
-  getItemCount: RequiredProps['getItemCount'],
-  getItem: RequiredProps['getItem'],
-  getItemLayout?: OptionalProps['getItemLayout'],
-  keyExtractor?: OptionalProps['keyExtractor'],
-  ...
-};

package/Libraries/Performance/PureComponentDebug.js

@@ -1,74 +0,0 @@
-/**
- * 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
- */
-
-'use strict';
-
-const React = require('react');
-
-opaque type DoNotCommitUsageOfPureComponentDebug = {...};
-
-/**
- * Identifies which prop or state changes triggered a re-render of a PureComponent. Usage:
- *
- * Change `extends React.PureComponent` to `extends PureComponentDebug` or inject it
- * everywhere by putting this line in your app setup:
- *
- *    React.PureComponent = require('PureComponentDebug');
- *
- * Should only be used for local testing, and will trigger a flow failure if you try to
- * commit any usages.
- */
-class PureComponentDebug<
-  P: DoNotCommitUsageOfPureComponentDebug,
-  S: ?{...} = void,
-> extends React.Component<P, S> {
-  shouldComponentUpdate(nextProps: P, nextState: S): boolean {
-    const tag = this.constructor.name;
-    let ret = false;
-    const prevPropsKeys = Object.keys(this.props);
-    const nextPropsKeys = Object.keys(nextProps);
-    if (prevPropsKeys.length !== nextPropsKeys.length) {
-      ret = true;
-      console.warn(
-        'PureComponentDebug: different prop keys',
-        tag,
-        prevPropsKeys.filter(key => !nextPropsKeys.includes(key)),
-        nextPropsKeys.filter(key => !prevPropsKeys.includes(key)),
-      );
-    }
-    const prevStateKeys = Object.keys(this.state || {});
-    const nextStateKeys = Object.keys(nextState || {});
-    if (prevStateKeys.length !== nextStateKeys.length) {
-      ret = true;
-      console.warn(
-        'PureComponentDebug: different state keys',
-        tag,
-        prevStateKeys.filter(key => !nextStateKeys.includes(key)),
-        nextStateKeys.filter(key => !prevStateKeys.includes(key)),
-      );
-    }
-    for (const key in this.props) {
-      if (this.props[key] !== nextProps[key]) {
-        ret = true;
-        console.warn('PureComponentDebug: different prop values', tag, key);
-      }
-    }
-    for (const key in this.state) {
-      // $FlowFixMe[incompatible-use]
-      if (this.state[key] !== (nextState || {})[key]) {
-        ret = true;
-        console.warn('PureComponentDebug: different state values', tag, key);
-      }
-    }
-    return ret;
-  }
-}
-
-module.exports = PureComponentDebug;

package/Libraries/Reliability/UserFlow.js

@@ -1,158 +0,0 @@
-/**
- * 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
- * @flow strict
- */
-
-'use strict';
-
-const AUTO_INSTANCE_KEY = -1;
-
-export type FlowId = {
-  markerId: number,
-  instanceKey: number,
-};
-
-export type PointData = $Shape<{
-  string: ?{[string]: string, ...},
-  int: ?{[string]: number, ...},
-  double: ?{[string]: number, ...},
-  bool: ?{[string]: boolean, ...},
-  string_array: ?{[string]: $ReadOnlyArray<string>, ...},
-  int_array: ?{[string]: $ReadOnlyArray<number>, ...},
-  double_array: ?{[string]: $ReadOnlyArray<number>, ...},
-  bool_array: ?{[string]: $ReadOnlyArray<boolean>, ...},
-}>;
-
-/**
- * API for tracking reliability of your user interactions
- *
- * Example:
- * const flowId = UserFlow.newFlowId(QuickLogItentifiersExample.EXAMPLE_EVENT);
- * ...
- * UserFlow.start(flowId, {triggerSource: "user_click", cancelOnBackground: true});
- * ...
- * UserFlow.addAnnotation(flowId, "cached", "true");
- * ...
- * UserFlow.addPoint(flowId, "reload");
- * ...
- * UserFlow.endSuccess(flowId);
- */
-const UserFlow = {
-  /**
-   * Creates FlowId from markerId and instanceKey.
-   * You will pass FlowId in every other method of UserFlow API.
-   *
-   * By default, instanceKey will generate unique instance every time you call userFlowGetId with markerId only.
-   */
-  newFlowId(markerId: number, instanceKey: number = AUTO_INSTANCE_KEY): FlowId {
-    var resolvedInstanceKey = instanceKey;
-    if (instanceKey === AUTO_INSTANCE_KEY) {
-      if (global.nativeUserFlowNextInstanceKey) {
-        resolvedInstanceKey = global.nativeUserFlowNextInstanceKey(markerId);
-      } else {
-        // There is no JSI methods installed, API won't do anything
-        resolvedInstanceKey = 0;
-      }
-    }
-    return {
-      markerId: markerId,
-      instanceKey: resolvedInstanceKey,
-    };
-  },
-
-  /**
-   * Starts new flow.
-   * Example:
-   * UserFlow.start(flowId, {triggerSource: 'user_click', cancelOnBackground: true})
-   *
-   * Specify triggerSource as a place where your flow has started.
-   * Specify if flow should be automatically cancelled if applicaton goes to background.
-   * It is recommended to use true for cancelOnBackground - this reduces amount of lost flows due to instrumentation mistakes.
-   * Only if you know that your flow should survive app backgrounding - use false. This includes cases of tracking cross application interactions.
-   *
-   */
-  start(
-    flowId: FlowId,
-    options: {triggerSource: string, cancelOnBackground: boolean},
-  ): void {
-    if (global.nativeUserFlowStart) {
-      global.nativeUserFlowStart(
-        flowId.markerId,
-        flowId.instanceKey,
-        options.triggerSource,
-        options.cancelOnBackground,
-      );
-    }
-  },
-
-  addAnnotation(
-    flowId: FlowId,
-    annotationName: string,
-    annotationValue: string | boolean,
-  ): void {
-    if (global.nativeUserFlowAddAnnotation) {
-      global.nativeUserFlowAddAnnotation(
-        flowId.markerId,
-        flowId.instanceKey,
-        annotationName,
-        annotationValue,
-      );
-    }
-  },
-
-  addPoint(flowId: FlowId, pointName: string, data: ?PointData = null): void {
-    if (global.nativeUserFlowAddPoint) {
-      global.nativeUserFlowAddPoint(
-        flowId.markerId,
-        flowId.instanceKey,
-        pointName,
-        data,
-      );
-    }
-  },
-
-  endSuccess(flowId: FlowId): void {
-    if (global.nativeUserFlowEndSuccess) {
-      global.nativeUserFlowEndSuccess(flowId.markerId, flowId.instanceKey);
-    }
-  },
-
-  /**
-   * Completes flow as failed
-   *
-   * ErrorName should be short and easily categorazable (it is attached as point to the UserFlow and can be used for aggregations).
-   * For example: io_error, network_error, parse_error, validation_error.
-   * DebugInfo is free-form string, where you can attach detailed error message. It is attached as data to the point (see ErrorName).
-   */
-  endFailure(
-    flowId: FlowId,
-    errorName: string,
-    debugInfo: ?string = null,
-  ): void {
-    if (global.nativeUserFlowEndFail) {
-      global.nativeUserFlowEndFail(
-        flowId.markerId,
-        flowId.instanceKey,
-        errorName,
-        debugInfo,
-      );
-    }
-  },
-
-  endCancel(flowId: FlowId, cancelReason: string): void {
-    if (global.nativeUserFlowEndCancel) {
-      global.nativeUserFlowEndCancel(
-        flowId.markerId,
-        flowId.instanceKey,
-        cancelReason,
-      );
-    }
-  },
-};
-
-module.exports = UserFlow;

package/Libraries/Renderer/implementations/ReactNativeRenderer.d.ts

@@ -1,149 +0,0 @@
-/**
- * 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 {GestureResponderEvent} from '../../Types/CoreEventTypes';
-
-/**
- * Gesture recognition on mobile devices is much more complicated than web.
- * A touch can go through several phases as the app determines what the user's intention is.
- * For example, the app needs to determine if the touch is scrolling, sliding on a widget, or tapping.
- * This can even change during the duration of a touch. There can also be multiple simultaneous touches.
- *
- * The touch responder system is needed to allow components to negotiate these touch interactions
- * without any additional knowledge about their parent or child components.
- * This system is implemented in ResponderEventPlugin.js, which contains further details and documentation.
- *
- * Best Practices
- * Users can feel huge differences in the usability of web apps vs. native, and this is one of the big causes.
- * Every action should have the following attributes:
- *      Feedback/highlighting- show the user what is handling their touch, and what will happen when they release the gesture
- *      Cancel-ability- when making an action, the user should be able to abort it mid-touch by dragging their finger away
- *
- * These features make users more comfortable while using an app,
- * because it allows people to experiment and interact without fear of making mistakes.
- *
- * TouchableHighlight and Touchable*
- * The responder system can be complicated to use.
- * So we have provided an abstract Touchable implementation for things that should be "tappable".
- * This uses the responder system and allows you to easily configure tap interactions declaratively.
- * Use TouchableHighlight anywhere where you would use a button or link on web.
- */
-export interface GestureResponderHandlers {
-  /**
-   * A view can become the touch responder by implementing the correct negotiation methods.
-   * There are two methods to ask the view if it wants to become responder:
-   */
-
-  /**
-   * Does this view want to become responder on the start of a touch?
-   */
-  onStartShouldSetResponder?:
-    | ((event: GestureResponderEvent) => boolean)
-    | undefined;
-
-  /**
-   * Called for every touch move on the View when it is not the responder: does this view want to "claim" touch responsiveness?
-   */
-  onMoveShouldSetResponder?:
-    | ((event: GestureResponderEvent) => boolean)
-    | undefined;
-
-  /**
-   * If the View returns true and attempts to become the responder, one of the following will happen:
-   */
-
-  onResponderEnd?: ((event: GestureResponderEvent) => void) | undefined;
-
-  /**
-   * The View is now responding for touch events.
-   * This is the time to highlight and show the user what is happening
-   */
-  onResponderGrant?: ((event: GestureResponderEvent) => void) | undefined;
-
-  /**
-   * Something else is the responder right now and will not release it
-   */
-  onResponderReject?: ((event: GestureResponderEvent) => void) | undefined;
-
-  /**
-   * If the view is responding, the following handlers can be called:
-   */
-
-  /**
-   * The user is moving their finger
-   */
-  onResponderMove?: ((event: GestureResponderEvent) => void) | undefined;
-
-  /**
-   * Fired at the end of the touch, ie "touchUp"
-   */
-  onResponderRelease?: ((event: GestureResponderEvent) => void) | undefined;
-
-  onResponderStart?: ((event: GestureResponderEvent) => void) | undefined;
-
-  /**
-   *  Something else wants to become responder.
-   *  Should this view release the responder? Returning true allows release
-   */
-  onResponderTerminationRequest?:
-    | ((event: GestureResponderEvent) => boolean)
-    | undefined;
-
-  /**
-   * The responder has been taken from the View.
-   * Might be taken by other views after a call to onResponderTerminationRequest,
-   * or might be taken by the OS without asking (happens with control center/ notification center on iOS)
-   */
-  onResponderTerminate?: ((event: GestureResponderEvent) => void) | undefined;
-
-  /**
-   * onStartShouldSetResponder and onMoveShouldSetResponder are called with a bubbling pattern,
-   * where the deepest node is called first.
-   * That means that the deepest component will become responder when multiple Views return true for *ShouldSetResponder handlers.
-   * This is desirable in most cases, because it makes sure all controls and buttons are usable.
-   *
-   * However, sometimes a parent will want to make sure that it becomes responder.
-   * This can be handled by using the capture phase.
-   * Before the responder system bubbles up from the deepest component,
-   * it will do a capture phase, firing on*ShouldSetResponderCapture.
-   * So if a parent View wants to prevent the child from becoming responder on a touch start,
-   * it should have a onStartShouldSetResponderCapture handler which returns true.
-   */
-  onStartShouldSetResponderCapture?:
-    | ((event: GestureResponderEvent) => boolean)
-    | undefined;
-
-  /**
-   * onStartShouldSetResponder and onMoveShouldSetResponder are called with a bubbling pattern,
-   * where the deepest node is called first.
-   * That means that the deepest component will become responder when multiple Views return true for *ShouldSetResponder handlers.
-   * This is desirable in most cases, because it makes sure all controls and buttons are usable.
-   *
-   * However, sometimes a parent will want to make sure that it becomes responder.
-   * This can be handled by using the capture phase.
-   * Before the responder system bubbles up from the deepest component,
-   * it will do a capture phase, firing on*ShouldSetResponderCapture.
-   * So if a parent View wants to prevent the child from becoming responder on a touch start,
-   * it should have a onStartShouldSetResponderCapture handler which returns true.
-   */
-  onMoveShouldSetResponderCapture?:
-    | ((event: GestureResponderEvent) => boolean)
-    | undefined;
-}
-
-/**
- * React Native also implements unstable_batchedUpdates
- */
-export function unstable_batchedUpdates<A, B>(
-  callback: (a: A, b: B) => any,
-  a: A,
-  b: B,
-): void;
-export function unstable_batchedUpdates<A>(callback: (a: A) => any, a: A): void;
-export function unstable_batchedUpdates(callback: () => any): void;