react-native 0.0.0-263478b91 → 0.0.0-268efb102

package/Libraries/Image/ImageSource.js

@@ -13,82 +13,125 @@
 /**
  * Keep this in sync with `DeprecatedImageSourcePropType.js`.
  *
- * This type is intentinoally inexact in order to permit call sites that supply
+ * This type is intentionally inexact in order to permit call sites that supply
  * extra properties.
  */
-export type ImageURISource = $ReadOnly<
-  interface {
-    /**
-     * `uri` is a string representing the resource identifier for the image, which
-     * could be an http address, a local file path, or the name of a static image
-     * resource (which should be wrapped in the `require('./path/to/image.png')`
-     * function).
-     */
-    uri?: ?string,
+export interface ImageURISource {
+  /**
+   * `uri` is a string representing the resource identifier for the image, which
+   * could be an http address, a local file path, or the name of a static image
+   * resource (which should be wrapped in the `require('./path/to/image.png')`
+   * function).
+   */
+  +uri?: ?string;
 
-    /**
-     * `bundle` is the iOS asset bundle which the image is included in. This
-     * will default to [NSBundle mainBundle] if not set.
-     * @platform ios
-     */
-    bundle?: ?string,
+  /**
+   * `bundle` is the iOS asset bundle which the image is included in. This
+   * will default to [NSBundle mainBundle] if not set.
+   * @platform ios
+   */
+  +bundle?: ?string;
 
-    /**
-     * `method` is the HTTP Method to use. Defaults to GET if not specified.
-     */
-    method?: ?string,
+  /**
+   * `method` is the HTTP Method to use. Defaults to GET if not specified.
+   */
+  +method?: ?string;
 
-    /**
-     * `headers` is an object representing the HTTP headers to send along with the
-     * request for a remote image.
-     */
-    headers?: ?{[string]: string},
+  /**
+   * `headers` is an object representing the HTTP headers to send along with the
+   * request for a remote image.
+   */
+  +headers?: ?{[string]: string};
 
-    /**
-     * `body` is the HTTP body to send with the request. This must be a valid
-     * UTF-8 string, and will be sent exactly as specified, with no
-     * additional encoding (e.g. URL-escaping or base64) applied.
-     */
-    body?: ?string,
+  /**
+   * `body` is the HTTP body to send with the request. This must be a valid
+   * UTF-8 string, and will be sent exactly as specified, with no
+   * additional encoding (e.g. URL-escaping or base64) applied.
+   */
+  +body?: ?string;
 
-    /**
-     * `cache` determines how the requests handles potentially cached
-     * responses.
-     *
-     * - `default`: Use the native platforms default strategy. `useProtocolCachePolicy` on iOS.
-     *
-     * - `reload`: The data for the URL will be loaded from the originating source.
-     * No existing cache data should be used to satisfy a URL load request.
-     *
-     * - `force-cache`: The existing cached data will be used to satisfy the request,
-     * regardless of its age or expiration date. If there is no existing data in the cache
-     * corresponding the request, the data is loaded from the originating source.
-     *
-     * - `only-if-cached`: The existing cache data will be used to satisfy a request, regardless of
-     * its age or expiration date. If there is no existing data in the cache corresponding
-     * to a URL load request, no attempt is made to load the data from the originating source,
-     * and the load is considered to have failed.
-     *
-     * @platform ios
-     */
-    cache?: ?('default' | 'reload' | 'force-cache' | 'only-if-cached'),
+  /**
+   * `cache` determines how the requests handles potentially cached
+   * responses.
+   *
+   * - `default`: Use the native platforms default strategy. `useProtocolCachePolicy` on iOS.
+   *
+   * - `reload`: The data for the URL will be loaded from the originating source.
+   * No existing cache data should be used to satisfy a URL load request.
+   *
+   * - `force-cache`: The existing cached data will be used to satisfy the request,
+   * regardless of its age or expiration date. If there is no existing data in the cache
+   * corresponding the request, the data is loaded from the originating source.
+   *
+   * - `only-if-cached`: The existing cache data will be used to satisfy a request, regardless of
+   * its age or expiration date. If there is no existing data in the cache corresponding
+   * to a URL load request, no attempt is made to load the data from the originating source,
+   * and the load is considered to have failed.
+   *
+   * @platform ios
+   */
+  +cache?: ?('default' | 'reload' | 'force-cache' | 'only-if-cached');
 
-    /**
-     * `width` and `height` can be specified if known at build time, in which case
-     * these will be used to set the default `<Image/>` component dimensions.
-     */
-    width?: ?number,
-    height?: ?number,
+  /**
+   * `width` and `height` can be specified if known at build time, in which case
+   * these will be used to set the default `<Image/>` component dimensions.
+   */
+  +width?: ?number;
+  +height?: ?number;
 
-    /**
-     * `scale` is used to indicate the scale factor of the image. Defaults to 1.0 if
-     * unspecified, meaning that one image pixel equates to one display point / DIP.
-     */
-    scale?: ?number,
-  },
->;
+  /**
+   * `scale` is used to indicate the scale factor of the image. Defaults to 1.0 if
+   * unspecified, meaning that one image pixel equates to one display point / DIP.
+   */
+  +scale?: ?number;
+}
 
 export type ImageSource =
   | number
   | ImageURISource
   | $ReadOnlyArray<ImageURISource>;
+
+export function getImageSourceProperties(
+  imageSource: ImageURISource,
+): $ReadOnly<{
+  body?: ?string,
+  bundle?: ?string,
+  cache?: ?('default' | 'reload' | 'force-cache' | 'only-if-cached'),
+  headers?: ?{[string]: string},
+  height?: ?number,
+  method?: ?string,
+  scale?: ?number,
+  uri?: ?string,
+  width?: ?number,
+  ...
+}> {
+  const object = {};
+  if (imageSource.body != null) {
+    object.body = imageSource.body;
+  }
+  if (imageSource.bundle != null) {
+    object.bundle = imageSource.bundle;
+  }
+  if (imageSource.cache != null) {
+    object.cache = imageSource.cache;
+  }
+  if (imageSource.headers != null) {
+    object.headers = imageSource.headers;
+  }
+  if (imageSource.height != null) {
+    object.height = imageSource.height;
+  }
+  if (imageSource.method != null) {
+    object.method = imageSource.method;
+  }
+  if (imageSource.scale != null) {
+    object.scale = imageSource.scale;
+  }
+  if (imageSource.uri != null) {
+    object.uri = imageSource.uri;
+  }
+  if (imageSource.width != null) {
+    object.width = imageSource.width;
+  }
+  return object;
+}

package/Libraries/Image/React-RCTImage.podspec

@@ -17,7 +17,7 @@ else
 end
 
 folly_compiler_flags = '-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1 -Wno-comma -Wno-shorten-64-to-32'
-folly_version = '2021.04.26.00'
+folly_version = '2021.06.28.00-v2'
 
 Pod::Spec.new do |s|
   s.name                   = "React-RCTImage"

package/Libraries/Inspector/Inspector.js

@@ -307,6 +307,7 @@ class Inspector extends React.Component<
         {this.state.inspecting && (
           <InspectorOverlay
             inspected={this.state.inspected}
+            // $FlowFixMe[method-unbinding] added when improving typing for this parameters
             onTouchPoint={this.onTouchPoint.bind(this)}
           />
         )}
@@ -315,15 +316,20 @@ class Inspector extends React.Component<
             devtoolsIsOpen={!!this.state.devtoolsAgent}
             inspecting={this.state.inspecting}
             perfing={this.state.perfing}
+            // $FlowFixMe[method-unbinding] added when improving typing for this parameters
             setPerfing={this.setPerfing.bind(this)}
+            // $FlowFixMe[method-unbinding] added when improving typing for this parameters
             setInspecting={this.setInspecting.bind(this)}
             inspected={this.state.inspected}
             hierarchy={this.state.hierarchy}
             selection={this.state.selection}
+            // $FlowFixMe[method-unbinding] added when improving typing for this parameters
             setSelection={this.setSelection.bind(this)}
             touchTargeting={PressabilityDebug.isEnabled()}
+            // $FlowFixMe[method-unbinding] added when improving typing for this parameters
             setTouchTargeting={this.setTouchTargeting.bind(this)}
             networking={this.state.networking}
+            // $FlowFixMe[method-unbinding] added when improving typing for this parameters
             setNetworking={this.setNetworking.bind(this)}
           />
         </View>

package/Libraries/Interaction/InteractionManager.js

@@ -110,8 +110,10 @@ const InteractionManager = {
       _taskQueue.enqueueTasks(tasks);
     });
     return {
+      // $FlowFixMe[method-unbinding] added when improving typing for this parameters
       then: promise.then.bind(promise),
       done: (...args) => {
+        // $FlowFixMe[method-unbinding] added when improving typing for this parameters
         if (promise.done) {
           return promise.done(...args);
         } else {
@@ -148,6 +150,7 @@ const InteractionManager = {
     _deleteInteractionSet.add(handle);
   },
 
+  // $FlowFixMe[method-unbinding] added when improving typing for this parameters
   addListener: (_emitter.addListener.bind(_emitter): $FlowFixMe),
 
   /**

package/Libraries/Interaction/PanResponder.js

@@ -121,7 +121,7 @@ const currentCentroidY = TouchHistoryMath.currentCentroidY;
  * ### Working Example
  *
  * To see it in action, try the
- * [PanResponder example in RNTester](https://github.com/facebook/react-native/blob/master/packages/rn-tester/js/examples/PanResponder/PanResponderExample.js)
+ * [PanResponder example in RNTester](https://github.com/facebook/react-native/blob/HEAD/packages/rn-tester/js/examples/PanResponder/PanResponderExample.js)
  */
 
 export type GestureState = {|

package/Libraries/LinkingIOS/React-RCTLinking.podspec

@@ -17,7 +17,7 @@ else
 end
 
 folly_compiler_flags = '-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1 -Wno-comma -Wno-shorten-64-to-32'
-folly_version = '2021.04.26.00'
+folly_version = '2021.06.28.00-v2'
 
 Pod::Spec.new do |s|
   s.name                   = "React-RCTLinking"

package/Libraries/Lists/CellRenderMask.js

@@ -0,0 +1,145 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict
+ * @format
+ */
+
+import invariant from 'invariant';
+
+export type CellRegion = {
+  first: number,
+  last: number,
+  isSpacer: boolean,
+};
+
+export class CellRenderMask {
+  _numCells: number;
+  _regions: Array<CellRegion>;
+
+  constructor(numCells: number) {
+    invariant(
+      numCells >= 0,
+      'CellRenderMask must contain a non-negative number os cells',
+    );
+
+    this._numCells = numCells;
+
+    if (numCells === 0) {
+      this._regions = [];
+    } else {
+      this._regions = [
+        {
+          first: 0,
+          last: numCells - 1,
+          isSpacer: true,
+        },
+      ];
+    }
+  }
+
+  enumerateRegions(): $ReadOnlyArray<CellRegion> {
+    return this._regions;
+  }
+
+  addCells(cells: {first: number, last: number}) {
+    invariant(
+      cells.first >= 0 &&
+        cells.first < this._numCells &&
+        cells.last >= 0 &&
+        cells.last < this._numCells &&
+        cells.last >= cells.first,
+      'CellRenderMask.addCells called with invalid cell range',
+    );
+
+    const [firstIntersect, firstIntersectIdx] = this._findRegion(cells.first);
+    const [lastIntersect, lastIntersectIdx] = this._findRegion(cells.last);
+
+    // Fast-path if the cells to add are already all present in the mask. We
+    // will otherwise need to do some mutation.
+    if (firstIntersectIdx === lastIntersectIdx && !firstIntersect.isSpacer) {
+      return;
+    }
+
+    // We need to replace the existing covered regions with 1-3 new regions
+    // depending whether we need to split spacers out of overlapping regions.
+    const newLeadRegion: Array<CellRegion> = [];
+    const newTailRegion: Array<CellRegion> = [];
+    const newMainRegion: CellRegion = {
+      ...cells,
+      isSpacer: false,
+    };
+
+    if (firstIntersect.first < newMainRegion.first) {
+      if (firstIntersect.isSpacer) {
+        newLeadRegion.push({
+          first: firstIntersect.first,
+          last: newMainRegion.first - 1,
+          isSpacer: true,
+        });
+      } else {
+        newMainRegion.first = firstIntersect.first;
+      }
+    }
+
+    if (lastIntersect.last > newMainRegion.last) {
+      if (lastIntersect.isSpacer) {
+        newTailRegion.push({
+          first: newMainRegion.last + 1,
+          last: lastIntersect.last,
+          isSpacer: true,
+        });
+      } else {
+        newMainRegion.last = lastIntersect.last;
+      }
+    }
+
+    const replacementRegions: Array<CellRegion> = [
+      ...newLeadRegion,
+      newMainRegion,
+      ...newTailRegion,
+    ];
+    const numRegionsToDelete = lastIntersectIdx - firstIntersectIdx + 1;
+    this._regions.splice(
+      firstIntersectIdx,
+      numRegionsToDelete,
+      ...replacementRegions,
+    );
+  }
+
+  equals(other: CellRenderMask): boolean {
+    return (
+      this._numCells === other._numCells &&
+      this._regions.length === other._regions.length &&
+      this._regions.every(
+        (region, i) =>
+          region.first === other._regions[i].first &&
+          region.last === other._regions[i].last &&
+          region.isSpacer === other._regions[i].isSpacer,
+      )
+    );
+  }
+
+  _findRegion(cellIdx: number): [CellRegion, number] {
+    let firstIdx = 0;
+    let lastIdx = this._regions.length - 1;
+
+    while (firstIdx <= lastIdx) {
+      const middleIdx = Math.floor((firstIdx + lastIdx) / 2);
+      const middleRegion = this._regions[middleIdx];
+
+      if (cellIdx >= middleRegion.first && cellIdx <= middleRegion.last) {
+        return [middleRegion, middleIdx];
+      } else if (cellIdx < middleRegion.first) {
+        lastIdx = middleIdx - 1;
+      } else if (cellIdx > middleRegion.last) {
+        firstIdx = middleIdx + 1;
+      }
+    }
+
+    invariant(false, `A region was not found containing cellIdx ${cellIdx}`);
+  }
+}

package/Libraries/Lists/FlatList.js

@@ -125,14 +125,39 @@ type OptionalProps<ItemT> = {|
   /**
    * Multiple columns can only be rendered with `horizontal={false}` and will zig-zag like a
    * `flexWrap` layout. Items should all be the same height - masonry layouts are not supported.
+   *
+   * The default value is 1.
    */
-  numColumns: number,
+  numColumns?: number,
+  /**
+   * Note: may have bugs (missing content) in some circumstances - use at your own risk.
+   *
+   * This may improve scroll performance for large lists.
+   *
+   * The default value is true for Android.
+   */
+  removeClippedSubviews?: boolean,
   /**
    * See `ScrollView` for flow type and further documentation.
    */
   fadingEdgeLength?: ?number,
 |};
 
+/**
+ * Default Props Helper Functions
+ * Use the following helper functions for default values
+ */
+
+// removeClippedSubviewsOrDefault(this.props.removeClippedSubviews)
+function removeClippedSubviewsOrDefault(removeClippedSubviews: ?boolean) {
+  return removeClippedSubviews ?? Platform.OS === 'android';
+}
+
+// numColumnsOrDefault(this.props.numColumns)
+function numColumnsOrDefault(numColumns: ?number) {
+  return numColumns ?? 1;
+}
+
 type FlatListProps<ItemT> = {|
   ...RequiredProps<ItemT>,
   ...OptionalProps<ItemT>,
@@ -156,17 +181,6 @@ export type Props<ItemT> = {
   ...
 };
 
-const defaultProps = {
-  numColumns: 1,
-  /**
-   * Enabling this prop on Android greatly improves scrolling performance with no known issues.
-   * The alternative is that scrolling on Android is unusably bad. Enabling it on iOS has a few
-   * known issues.
-   */
-  removeClippedSubviews: Platform.OS === 'android',
-};
-export type DefaultProps = typeof defaultProps;
-
 /**
  * A performant interface for rendering simple, flat lists, supporting the most handy features:
  *
@@ -276,7 +290,6 @@ export type DefaultProps = typeof defaultProps;
  * Also inherits [ScrollView Props](docs/scrollview.html#props), unless it is nested in another FlatList of same orientation.
  */
 class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
-  static defaultProps: DefaultProps = defaultProps;
   props: Props<ItemT>;
   /**
    * Scrolls to the end of the content. May be janky without `getItemLayout` prop.
@@ -453,11 +466,11 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
       // $FlowFixMe[prop-missing] this prop doesn't exist, is only used for an invariant
       getItemCount,
       horizontal,
-      numColumns,
       columnWrapperStyle,
       onViewableItemsChanged,
       viewabilityConfigCallbackPairs,
     } = props;
+    const numColumns = numColumnsOrDefault(this.props.numColumns);
     invariant(
       !getItem && !getItemCount,
       'FlatList does not support custom data formats.',
@@ -478,7 +491,7 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
   }
 
   _getItem = (data: Array<ItemT>, index: number) => {
-    const {numColumns} = this.props;
+    const numColumns = numColumnsOrDefault(this.props.numColumns);
     if (numColumns > 1) {
       const ret = [];
       for (let kk = 0; kk < numColumns; kk++) {
@@ -495,7 +508,7 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
 
   _getItemCount = (data: ?Array<ItemT>): number => {
     if (data) {
-      const {numColumns} = this.props;
+      const numColumns = numColumnsOrDefault(this.props.numColumns);
       return numColumns > 1 ? Math.ceil(data.length / numColumns) : data.length;
     } else {
       return 0;
@@ -503,7 +516,7 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
   };
 
   _keyExtractor = (items: ItemT | Array<ItemT>, index: number) => {
-    const {numColumns} = this.props;
+    const numColumns = numColumnsOrDefault(this.props.numColumns);
     const keyExtractor = this.props.keyExtractor ?? defaultKeyExtractor;
 
     if (numColumns > 1) {
@@ -528,7 +541,7 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
   };
 
   _pushMultiColumnViewable(arr: Array<ViewToken>, v: ViewToken): void {
-    const {numColumns} = this.props;
+    const numColumns = numColumnsOrDefault(this.props.numColumns);
     const keyExtractor = this.props.keyExtractor ?? defaultKeyExtractor;
     v.item.forEach((item, ii) => {
       invariant(v.index != null, 'Missing index!');
@@ -549,7 +562,7 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
       changed: Array<ViewToken>,
       ...
     }) => {
-      const {numColumns} = this.props;
+      const numColumns = numColumnsOrDefault(this.props.numColumns);
       if (onViewableItemsChanged) {
         if (numColumns > 1) {
           const changed = [];
@@ -567,12 +580,8 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
   }
 
   _renderer = () => {
-    const {
-      ListItemComponent,
-      renderItem,
-      numColumns,
-      columnWrapperStyle,
-    } = this.props;
+    const {ListItemComponent, renderItem, columnWrapperStyle} = this.props;
+    const numColumns = numColumnsOrDefault(this.props.numColumns);
 
     let virtualizedListRenderKey = ListItemComponent
       ? 'ListItemComponent'
@@ -625,7 +634,12 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
   };
 
   render(): React.Node {
-    const {numColumns, columnWrapperStyle, ...restProps} = this.props;
+    const {
+      numColumns,
+      columnWrapperStyle,
+      removeClippedSubviews: _removeClippedSubviews,
+      ...restProps
+    } = this.props;
 
     return (
       <VirtualizedList
@@ -635,6 +649,9 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
         keyExtractor={this._keyExtractor}
         ref={this._captureRef}
         viewabilityConfigCallbackPairs={this._virtualizedListPairs}
+        removeClippedSubviews={removeClippedSubviewsOrDefault(
+          _removeClippedSubviews,
+        )}
         {...this._renderer()}
       />
     );

package/Libraries/Lists/VirtualizedList.js

@@ -1895,7 +1895,9 @@ class VirtualizedList extends React.PureComponent<Props, State> {
 
 type CellRendererProps = {
   CellRendererComponent?: ?React.ComponentType<any>,
-  ItemSeparatorComponent: ?React.ComponentType<*>,
+  ItemSeparatorComponent: ?React.ComponentType<
+    any | {highlighted: boolean, leadingItem: ?Item},
+  >,
   cellKey: string,
   fillRateHelper: FillRateHelper,
   horizontal: ?boolean,

package/Libraries/Lists/VirtualizedSectionList.js

@@ -603,6 +603,9 @@ function ItemWithSeparator(props: ItemWithSeparatorProps): React.Node {
   );
 }
 
+/* $FlowFixMe[class-object-subtyping] added when improving typing for this
+ * parameters */
+// $FlowFixMe[method-unbinding]
 module.exports = (VirtualizedSectionList: React.AbstractComponent<
   React.ElementConfig<typeof VirtualizedSectionList>,
   $ReadOnly<{

package/Libraries/Lists/__flowtests__/SectionList-flowtest.js

@@ -75,7 +75,7 @@ module.exports = {
     ];
   },
 
-  testBadInheritedDefaultProp(): React.Element<*> {
+  testBadInheritedDefaultProp(): React.MixedElement {
     const sections = [];
     return (
       <SectionList
@@ -87,12 +87,12 @@ module.exports = {
     );
   },
 
-  testMissingData(): React.Element<*> {
+  testMissingData(): React.MixedElement {
     // $FlowExpectedError - missing `sections` prop
     return <SectionList renderItem={renderMyListItem} />;
   },
 
-  testBadSectionsShape(): React.Element<*> {
+  testBadSectionsShape(): React.MixedElement {
     const sections = [
       {
         key: 'a',
@@ -108,7 +108,7 @@ module.exports = {
     return <SectionList renderItem={renderMyListItem} sections={sections} />;
   },
 
-  testBadSectionsMetadata(): React.Element<*> {
+  testBadSectionsMetadata(): React.MixedElement {
     const sections = [
       {
         key: 'a',