initial commit taken from gitlab.lrz.de

node_modules/react-native/Libraries/Lists/FillRateHelper.js

@@ -0,0 +1,242 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @providesModule FillRateHelper
+ * @flow
+ * @format
+ */
+
+'use strict';
+
+/* $FlowFixMe(>=0.54.0 site=react_native_oss) This comment suppresses an error
+ * found when Flow v0.54 was deployed. To see the error delete this comment and
+ * run Flow. */
+const performanceNow = require('fbjs/lib/performanceNow');
+/* $FlowFixMe(>=0.54.0 site=react_native_oss) This comment suppresses an error
+ * found when Flow v0.54 was deployed. To see the error delete this comment and
+ * run Flow. */
+const warning = require('fbjs/lib/warning');
+
+export type FillRateInfo = Info;
+
+class Info {
+  any_blank_count = 0;
+  any_blank_ms = 0;
+  any_blank_speed_sum = 0;
+  mostly_blank_count = 0;
+  mostly_blank_ms = 0;
+  pixels_blank = 0;
+  pixels_sampled = 0;
+  pixels_scrolled = 0;
+  total_time_spent = 0;
+  sample_count = 0;
+}
+
+type FrameMetrics = {inLayout?: boolean, length: number, offset: number};
+
+const DEBUG = false;
+
+let _listeners: Array<(Info) => void> = [];
+let _minSampleCount = 10;
+let _sampleRate = DEBUG ? 1 : null;
+
+/**
+ * A helper class for detecting when the maximem fill rate of `VirtualizedList` is exceeded.
+ * By default the sampling rate is set to zero and this will do nothing. If you want to collect
+ * samples (e.g. to log them), make sure to call `FillRateHelper.setSampleRate(0.0-1.0)`.
+ *
+ * Listeners and sample rate are global for all `VirtualizedList`s - typical usage will combine with
+ * `SceneTracker.getActiveScene` to determine the context of the events.
+ */
+class FillRateHelper {
+  _anyBlankStartTime = (null: ?number);
+  _enabled = false;
+  _getFrameMetrics: (index: number) => ?FrameMetrics;
+  _info = new Info();
+  _mostlyBlankStartTime = (null: ?number);
+  _samplesStartTime = (null: ?number);
+
+  static addListener(callback: FillRateInfo => void): {remove: () => void} {
+    warning(
+      _sampleRate !== null,
+      'Call `FillRateHelper.setSampleRate` before `addListener`.',
+    );
+    _listeners.push(callback);
+    return {
+      remove: () => {
+        _listeners = _listeners.filter(listener => callback !== listener);
+      },
+    };
+  }
+
+  static setSampleRate(sampleRate: number) {
+    _sampleRate = sampleRate;
+  }
+
+  static setMinSampleCount(minSampleCount: number) {
+    _minSampleCount = minSampleCount;
+  }
+
+  constructor(getFrameMetrics: (index: number) => ?FrameMetrics) {
+    this._getFrameMetrics = getFrameMetrics;
+    this._enabled = (_sampleRate || 0) > Math.random();
+    this._resetData();
+  }
+
+  activate() {
+    if (this._enabled && this._samplesStartTime == null) {
+      DEBUG && console.debug('FillRateHelper: activate');
+      this._samplesStartTime = performanceNow();
+    }
+  }
+
+  deactivateAndFlush() {
+    if (!this._enabled) {
+      return;
+    }
+    const start = this._samplesStartTime; // const for flow
+    if (start == null) {
+      DEBUG &&
+        console.debug('FillRateHelper: bail on deactivate with no start time');
+      return;
+    }
+    if (this._info.sample_count < _minSampleCount) {
+      // Don't bother with under-sampled events.
+      this._resetData();
+      return;
+    }
+    const total_time_spent = performanceNow() - start;
+    const info: any = {
+      ...this._info,
+      total_time_spent,
+    };
+    if (DEBUG) {
+      const derived = {
+        avg_blankness: this._info.pixels_blank / this._info.pixels_sampled,
+        avg_speed: this._info.pixels_scrolled / (total_time_spent / 1000),
+        avg_speed_when_any_blank:
+          this._info.any_blank_speed_sum / this._info.any_blank_count,
+        any_blank_per_min:
+          this._info.any_blank_count / (total_time_spent / 1000 / 60),
+        any_blank_time_frac: this._info.any_blank_ms / total_time_spent,
+        mostly_blank_per_min:
+          this._info.mostly_blank_count / (total_time_spent / 1000 / 60),
+        mostly_blank_time_frac: this._info.mostly_blank_ms / total_time_spent,
+      };
+      for (const key in derived) {
+        derived[key] = Math.round(1000 * derived[key]) / 1000;
+      }
+      console.debug('FillRateHelper deactivateAndFlush: ', {derived, info});
+    }
+    _listeners.forEach(listener => listener(info));
+    this._resetData();
+  }
+
+  computeBlankness(
+    props: {
+      data: Array<any>,
+      getItemCount: (data: Array<any>) => number,
+      initialNumToRender: number,
+    },
+    state: {
+      first: number,
+      last: number,
+    },
+    scrollMetrics: {
+      dOffset: number,
+      offset: number,
+      velocity: number,
+      visibleLength: number,
+    },
+  ): number {
+    if (
+      !this._enabled ||
+      props.getItemCount(props.data) === 0 ||
+      this._samplesStartTime == null
+    ) {
+      return 0;
+    }
+    const {dOffset, offset, velocity, visibleLength} = scrollMetrics;
+
+    // Denominator metrics that we track for all events - most of the time there is no blankness and
+    // we want to capture that.
+    this._info.sample_count++;
+    this._info.pixels_sampled += Math.round(visibleLength);
+    this._info.pixels_scrolled += Math.round(Math.abs(dOffset));
+    const scrollSpeed = Math.round(Math.abs(velocity) * 1000); // px / sec
+
+    // Whether blank now or not, record the elapsed time blank if we were blank last time.
+    const now = performanceNow();
+    if (this._anyBlankStartTime != null) {
+      this._info.any_blank_ms += now - this._anyBlankStartTime;
+    }
+    this._anyBlankStartTime = null;
+    if (this._mostlyBlankStartTime != null) {
+      this._info.mostly_blank_ms += now - this._mostlyBlankStartTime;
+    }
+    this._mostlyBlankStartTime = null;
+
+    let blankTop = 0;
+    let first = state.first;
+    let firstFrame = this._getFrameMetrics(first);
+    while (first <= state.last && (!firstFrame || !firstFrame.inLayout)) {
+      firstFrame = this._getFrameMetrics(first);
+      first++;
+    }
+    // Only count blankTop if we aren't rendering the first item, otherwise we will count the header
+    // as blank.
+    if (firstFrame && first > 0) {
+      blankTop = Math.min(
+        visibleLength,
+        Math.max(0, firstFrame.offset - offset),
+      );
+    }
+    let blankBottom = 0;
+    let last = state.last;
+    let lastFrame = this._getFrameMetrics(last);
+    while (last >= state.first && (!lastFrame || !lastFrame.inLayout)) {
+      lastFrame = this._getFrameMetrics(last);
+      last--;
+    }
+    // Only count blankBottom if we aren't rendering the last item, otherwise we will count the
+    // footer as blank.
+    if (lastFrame && last < props.getItemCount(props.data) - 1) {
+      const bottomEdge = lastFrame.offset + lastFrame.length;
+      blankBottom = Math.min(
+        visibleLength,
+        Math.max(0, offset + visibleLength - bottomEdge),
+      );
+    }
+    const pixels_blank = Math.round(blankTop + blankBottom);
+    const blankness = pixels_blank / visibleLength;
+    if (blankness > 0) {
+      this._anyBlankStartTime = now;
+      this._info.any_blank_speed_sum += scrollSpeed;
+      this._info.any_blank_count++;
+      this._info.pixels_blank += pixels_blank;
+      if (blankness > 0.5) {
+        this._mostlyBlankStartTime = now;
+        this._info.mostly_blank_count++;
+      }
+    } else if (scrollSpeed < 0.01 || Math.abs(dOffset) < 1) {
+      this.deactivateAndFlush();
+    }
+    return blankness;
+  }
+
+  enabled(): boolean {
+    return this._enabled;
+  }
+
+  _resetData() {
+    this._anyBlankStartTime = null;
+    this._info = new Info();
+    this._mostlyBlankStartTime = null;
+    this._samplesStartTime = null;
+  }
+}
+
+module.exports = FillRateHelper;

node_modules/react-native/Libraries/Lists/FlatList.js

@@ -0,0 +1,658 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @providesModule FlatList
+ * @flow
+ * @format
+ */
+'use strict';
+
+const MetroListView = require('MetroListView'); // Used as a fallback legacy option
+const React = require('React');
+const View = require('View');
+const VirtualizedList = require('VirtualizedList');
+const ListView = require('ListView');
+
+const invariant = require('fbjs/lib/invariant');
+
+import type {DangerouslyImpreciseStyleProp} from 'StyleSheet';
+import type {
+  ViewabilityConfig,
+  ViewToken,
+  ViewabilityConfigCallbackPair,
+} from 'ViewabilityHelper';
+import type {Props as VirtualizedListProps} from 'VirtualizedList';
+
+export type SeparatorsObj = {
+  highlight: () => void,
+  unhighlight: () => void,
+  updateProps: (select: 'leading' | 'trailing', newProps: Object) => void,
+};
+
+type RequiredProps<ItemT> = {
+  /**
+   * 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'}]}
+   *       renderItem={({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.
+   */
+  renderItem: (info: {
+    item: ItemT,
+    index: number,
+    separators: SeparatorsObj,
+  }) => ?React.Element<any>,
+  /**
+   * For simplicity, data is just a plain array. If you want to use something else, like an
+   * immutable list, use the underlying `VirtualizedList` directly.
+   */
+  data: ?$ReadOnlyArray<ItemT>,
+};
+type OptionalProps<ItemT> = {
+  /**
+   * 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>,
+  /**
+   * 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>),
+  /**
+   * 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>),
+  /**
+   * Optional custom style for multi-item rows generated when numColumns > 1.
+   */
+  columnWrapperStyle?: DangerouslyImpreciseStyleProp,
+  /**
+   * 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,
+  /**
+   * `getItemLayout` is an optional optimizations that let us skip measurement of dynamic content if
+   * you know the height of items a priori. `getItemLayout` is the most efficient, and is easy to
+   * use if you have fixed height items, for example:
+   *
+   *     getItemLayout={(data, index) => (
+   *       {length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index}
+   *     )}
+   *
+   * Adding `getItemLayout` can be a great performance boost for lists of several hundred items.
+   * Remember to include separator length (height or width) in your offset calculation if you
+   * specify `ItemSeparatorComponent`.
+   */
+  getItemLayout?: (
+    data: ?Array<ItemT>,
+    index: number,
+  ) => {length: number, offset: number, index: number},
+  /**
+   * If true, renders items next to each other horizontally instead of stacked vertically.
+   */
+  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,
+  /**
+   * Used to extract a unique key for a given item at the specified index. Key is used for caching
+   * and as the react key to track item re-ordering. The default extractor checks `item.key`, then
+   * falls back to using the index, like React does.
+   */
+  keyExtractor: (item: ItemT, index: number) => string,
+  /**
+   * 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.
+   */
+  numColumns: 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.
+   */
+  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,
+  /**
+   * Called when the viewability of rows changes, as defined by the `viewabilityConfig` prop.
+   */
+  onViewableItemsChanged?: ?(info: {
+    viewableItems: Array<ViewToken>,
+    changed: Array<ViewToken>,
+  }) => void,
+  /**
+   * Set this when offset is needed for the loading indicator to show correctly.
+   * @platform android
+   */
+  progressViewOffset?: number,
+  legacyImplementation?: ?boolean,
+  /**
+   * 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,
+  /**
+   * 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>,
+};
+export type Props<ItemT> = RequiredProps<ItemT> &
+  OptionalProps<ItemT> &
+  VirtualizedListProps;
+
+const defaultProps = {
+  ...VirtualizedList.defaultProps,
+  numColumns: 1,
+};
+export type DefaultProps = typeof defaultProps;
+
+/**
+ * A performant interface for rendering simple, flat lists, supporting the most handy features:
+ *
+ *  - Fully cross-platform.
+ *  - Optional horizontal mode.
+ *  - Configurable viewability callbacks.
+ *  - Header support.
+ *  - Footer support.
+ *  - Separator support.
+ *  - Pull to Refresh.
+ *  - Scroll loading.
+ *  - ScrollToIndex support.
+ *
+ * If you need section support, use [`<SectionList>`](docs/sectionlist.html).
+ *
+ * Minimal Example:
+ *
+ *     <FlatList
+ *       data={[{key: 'a'}, {key: 'b'}]}
+ *       renderItem={({item}) => <Text>{item.key}</Text>}
+ *     />
+ *
+ * More complex, multi-select example demonstrating `PureComponent` usage for perf optimization and avoiding bugs.
+ *
+ * - By binding the `onPressItem` handler, the props will remain `===` and `PureComponent` will
+ *   prevent wasteful re-renders unless the actual `id`, `selected`, or `title` props change, even
+ *   if the components rendered in `MyListItem` did not have such optimizations.
+ * - By passing `extraData={this.state}` to `FlatList` we make sure `FlatList` itself will re-render
+ *   when the `state.selected` changes. Without setting this prop, `FlatList` would not know it
+ *   needs to re-render any items because it is also a `PureComponent` and the prop comparison will
+ *   not show any changes.
+ * - `keyExtractor` tells the list to use the `id`s for the react keys instead of the default `key` property.
+ *
+ *
+ *     class MyListItem extends React.PureComponent {
+ *       _onPress = () => {
+ *         this.props.onPressItem(this.props.id);
+ *       };
+ *
+ *       render() {
+ *         const textColor = this.props.selected ? "red" : "black";
+ *         return (
+ *           <TouchableOpacity onPress={this._onPress}>
+ *             <View>
+ *               <Text style={{ color: textColor }}>
+ *                 {this.props.title}
+ *               </Text>
+ *             </View>
+ *           </TouchableOpacity>
+ *         );
+ *       }
+ *     }
+ *
+ *     class MultiSelectList extends React.PureComponent {
+ *       state = {selected: (new Map(): Map<string, boolean>)};
+ *
+ *       _keyExtractor = (item, index) => item.id;
+ *
+ *       _onPressItem = (id: string) => {
+ *         // updater functions are preferred for transactional updates
+ *         this.setState((state) => {
+ *           // copy the map rather than modifying state.
+ *           const selected = new Map(state.selected);
+ *           selected.set(id, !selected.get(id)); // toggle
+ *           return {selected};
+ *         });
+ *       };
+ *
+ *       _renderItem = ({item}) => (
+ *         <MyListItem
+ *           id={item.id}
+ *           onPressItem={this._onPressItem}
+ *           selected={!!this.state.selected.get(item.id)}
+ *           title={item.title}
+ *         />
+ *       );
+ *
+ *       render() {
+ *         return (
+ *           <FlatList
+ *             data={this.props.data}
+ *             extraData={this.state}
+ *             keyExtractor={this._keyExtractor}
+ *             renderItem={this._renderItem}
+ *           />
+ *         );
+ *       }
+ *     }
+ *
+ * This is a convenience wrapper around [`<VirtualizedList>`](docs/virtualizedlist.html),
+ * and thus inherits its props (as well as those of `ScrollView`) that aren't explicitly listed
+ * here, along with the following caveats:
+ *
+ * - Internal state is not preserved when content scrolls out of the render window. Make sure all
+ *   your data is captured in the item data or external stores like Flux, Redux, or Relay.
+ * - This is a `PureComponent` which means that it will not re-render if `props` remain shallow-
+ *   equal. Make sure that everything your `renderItem` function depends on is passed as a prop
+ *   (e.g. `extraData`) that is not `===` after updates, otherwise your UI may not update on
+ *   changes. This includes the `data` prop and parent component state.
+ * - In order to constrain memory and enable smooth scrolling, content is rendered asynchronously
+ *   offscreen. This means it's possible to scroll faster than the fill rate ands momentarily see
+ *   blank content. This is a tradeoff that can be adjusted to suit the needs of each application,
+ *   and we are working on improving it behind the scenes.
+ * - By default, the list looks for a `key` prop on each item and uses that for the React key.
+ *   Alternatively, you can provide a custom `keyExtractor` prop.
+ *
+ * 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.
+   */
+  scrollToEnd(params?: ?{animated?: ?boolean}) {
+    if (this._listRef) {
+      this._listRef.scrollToEnd(params);
+    }
+  }
+
+  /**
+   * Scrolls to the item at the specified index such that it is positioned in the viewable area
+   * such that `viewPosition` 0 places it at the top, 1 at the bottom, and 0.5 centered in the
+   * middle. `viewOffset` is a fixed number of pixels to offset the final target position.
+   *
+   * Note: cannot scroll to locations outside the render window without specifying the
+   * `getItemLayout` prop.
+   */
+  scrollToIndex(params: {
+    animated?: ?boolean,
+    index: number,
+    viewOffset?: number,
+    viewPosition?: number,
+  }) {
+    if (this._listRef) {
+      this._listRef.scrollToIndex(params);
+    }
+  }
+
+  /**
+   * Requires linear scan through data - use `scrollToIndex` instead if possible.
+   *
+   * Note: cannot scroll to locations outside the render window without specifying the
+   * `getItemLayout` prop.
+   */
+  scrollToItem(params: {
+    animated?: ?boolean,
+    item: ItemT,
+    viewPosition?: number,
+  }) {
+    if (this._listRef) {
+      this._listRef.scrollToItem(params);
+    }
+  }
+
+  /**
+   * Scroll to a specific content pixel offset in the list.
+   *
+   * Check out [scrollToOffset](docs/virtualizedlist.html#scrolltooffset) of VirtualizedList
+   */
+  scrollToOffset(params: {animated?: ?boolean, offset: number}) {
+    if (this._listRef) {
+      this._listRef.scrollToOffset(params);
+    }
+  }
+
+  /**
+   * Tells the list an interaction has occurred, which should trigger viewability calculations, e.g.
+   * if `waitForInteractions` is true and the user has not scrolled. This is typically called by
+   * taps on items or by navigation actions.
+   */
+  recordInteraction() {
+    if (this._listRef) {
+      this._listRef.recordInteraction();
+    }
+  }
+
+  /**
+   * Displays the scroll indicators momentarily.
+   *
+   * @platform ios
+   */
+  flashScrollIndicators() {
+    if (this._listRef) {
+      this._listRef.flashScrollIndicators();
+    }
+  }
+
+  /**
+   * Provides a handle to the underlying scroll responder.
+   */
+  getScrollResponder() {
+    if (this._listRef) {
+      return this._listRef.getScrollResponder();
+    }
+  }
+
+  getScrollableNode() {
+    if (this._listRef) {
+      return this._listRef.getScrollableNode();
+    }
+  }
+
+  setNativeProps(props: Object) {
+    if (this._listRef) {
+      this._listRef.setNativeProps(props);
+    }
+  }
+
+  UNSAFE_componentWillMount() {
+    this._checkProps(this.props);
+  }
+
+  UNSAFE_componentWillReceiveProps(nextProps: Props<ItemT>) {
+    invariant(
+      nextProps.numColumns === this.props.numColumns,
+      'Changing numColumns on the fly is not supported. Change the key prop on FlatList when ' +
+        'changing the number of columns to force a fresh render of the component.',
+    );
+    invariant(
+      nextProps.onViewableItemsChanged === this.props.onViewableItemsChanged,
+      'Changing onViewableItemsChanged on the fly is not supported',
+    );
+    invariant(
+      nextProps.viewabilityConfig === this.props.viewabilityConfig,
+      'Changing viewabilityConfig on the fly is not supported',
+    );
+    invariant(
+      nextProps.viewabilityConfigCallbackPairs ===
+        this.props.viewabilityConfigCallbackPairs,
+      'Changing viewabilityConfigCallbackPairs on the fly is not supported',
+    );
+
+    this._checkProps(nextProps);
+  }
+
+  constructor(props: Props<*>) {
+    super(props);
+    if (this.props.viewabilityConfigCallbackPairs) {
+      this._virtualizedListPairs = this.props.viewabilityConfigCallbackPairs.map(
+        pair => ({
+          viewabilityConfig: pair.viewabilityConfig,
+          onViewableItemsChanged: this._createOnViewableItemsChanged(
+            pair.onViewableItemsChanged,
+          ),
+        }),
+      );
+    } else if (this.props.onViewableItemsChanged) {
+      /* $FlowFixMe(>=0.63.0 site=react_native_fb) This comment suppresses an
+       * error found when Flow v0.63 was deployed. To see the error delete this
+       * comment and run Flow. */
+      this._virtualizedListPairs.push({
+        viewabilityConfig: this.props.viewabilityConfig,
+        onViewableItemsChanged: this._createOnViewableItemsChanged(
+          this.props.onViewableItemsChanged,
+        ),
+      });
+    }
+  }
+
+  _hasWarnedLegacy = false;
+  _listRef: null | VirtualizedList | ListView;
+  _virtualizedListPairs: Array<ViewabilityConfigCallbackPair> = [];
+
+  _captureRef = ref => {
+    this._listRef = ref;
+  };
+
+  _checkProps(props: Props<ItemT>) {
+    const {
+      getItem,
+      getItemCount,
+      horizontal,
+      legacyImplementation,
+      numColumns,
+      columnWrapperStyle,
+      onViewableItemsChanged,
+      viewabilityConfigCallbackPairs,
+    } = props;
+    invariant(
+      !getItem && !getItemCount,
+      'FlatList does not support custom data formats.',
+    );
+    if (numColumns > 1) {
+      invariant(!horizontal, 'numColumns does not support horizontal.');
+    } else {
+      invariant(
+        !columnWrapperStyle,
+        'columnWrapperStyle not supported for single column lists',
+      );
+    }
+    if (legacyImplementation) {
+      invariant(
+        numColumns === 1,
+        'Legacy list does not support multiple columns.',
+      );
+      // Warning: may not have full feature parity and is meant more for debugging and performance
+      // comparison.
+      if (!this._hasWarnedLegacy) {
+        console.warn(
+          'FlatList: Using legacyImplementation - some features not supported and performance ' +
+            'may suffer',
+        );
+        this._hasWarnedLegacy = true;
+      }
+    }
+    invariant(
+      !(onViewableItemsChanged && viewabilityConfigCallbackPairs),
+      'FlatList does not support setting both onViewableItemsChanged and ' +
+        'viewabilityConfigCallbackPairs.',
+    );
+  }
+
+  _getItem = (data: Array<ItemT>, index: number) => {
+    const {numColumns} = this.props;
+    if (numColumns > 1) {
+      const ret = [];
+      for (let kk = 0; kk < numColumns; kk++) {
+        const item = data[index * numColumns + kk];
+        item && ret.push(item);
+      }
+      return ret;
+    } else {
+      return data[index];
+    }
+  };
+
+  _getItemCount = (data: ?Array<ItemT>): number => {
+    return data ? Math.ceil(data.length / this.props.numColumns) : 0;
+  };
+
+  _keyExtractor = (items: ItemT | Array<ItemT>, index: number) => {
+    const {keyExtractor, numColumns} = this.props;
+    if (numColumns > 1) {
+      invariant(
+        Array.isArray(items),
+        'FlatList: Encountered internal consistency error, expected each item to consist of an ' +
+          'array with 1-%s columns; instead, received a single item.',
+        numColumns,
+      );
+      return items
+        .map((it, kk) => keyExtractor(it, index * numColumns + kk))
+        .join(':');
+    } else {
+      /* $FlowFixMe(>=0.63.0 site=react_native_fb) This comment suppresses an
+       * error found when Flow v0.63 was deployed. To see the error delete this
+       * comment and run Flow. */
+      return keyExtractor(items, index);
+    }
+  };
+
+  _pushMultiColumnViewable(arr: Array<ViewToken>, v: ViewToken): void {
+    const {numColumns, keyExtractor} = this.props;
+    v.item.forEach((item, ii) => {
+      invariant(v.index != null, 'Missing index!');
+      const index = v.index * numColumns + ii;
+      arr.push({...v, item, key: keyExtractor(item, index), index});
+    });
+  }
+
+  _createOnViewableItemsChanged(
+    onViewableItemsChanged: ?(info: {
+      viewableItems: Array<ViewToken>,
+      changed: Array<ViewToken>,
+    }) => void,
+  ) {
+    return (info: {
+      viewableItems: Array<ViewToken>,
+      changed: Array<ViewToken>,
+    }) => {
+      const {numColumns} = this.props;
+      if (onViewableItemsChanged) {
+        if (numColumns > 1) {
+          const changed = [];
+          const viewableItems = [];
+          info.viewableItems.forEach(v =>
+            this._pushMultiColumnViewable(viewableItems, v),
+          );
+          info.changed.forEach(v => this._pushMultiColumnViewable(changed, v));
+          onViewableItemsChanged({viewableItems, changed});
+        } else {
+          onViewableItemsChanged(info);
+        }
+      }
+    };
+  }
+
+  _renderItem = (info: Object) => {
+    const {renderItem, numColumns, columnWrapperStyle} = this.props;
+    if (numColumns > 1) {
+      const {item, index} = info;
+      invariant(
+        Array.isArray(item),
+        'Expected array of items with numColumns > 1',
+      );
+      return (
+        <View style={[{flexDirection: 'row'}, columnWrapperStyle]}>
+          {item.map((it, kk) => {
+            const element = renderItem({
+              item: it,
+              index: index * numColumns + kk,
+              separators: info.separators,
+            });
+            return element && React.cloneElement(element, {key: kk});
+          })}
+        </View>
+      );
+    } else {
+      return renderItem(info);
+    }
+  };
+
+  render() {
+    if (this.props.legacyImplementation) {
+      return (
+        /* $FlowFixMe(>=0.66.0 site=react_native_fb) This comment suppresses an
+         * error found when Flow v0.66 was deployed. To see the error delete
+         * this comment and run Flow. */
+        <MetroListView
+          {...this.props}
+          /* $FlowFixMe(>=0.66.0 site=react_native_fb) This comment suppresses
+           * an error found when Flow v0.66 was deployed. To see the error
+           * delete this comment and run Flow. */
+          items={this.props.data}
+          ref={this._captureRef}
+        />
+      );
+    } else {
+      return (
+        <VirtualizedList
+          {...this.props}
+          renderItem={this._renderItem}
+          getItem={this._getItem}
+          getItemCount={this._getItemCount}
+          keyExtractor={this._keyExtractor}
+          ref={this._captureRef}
+          viewabilityConfigCallbackPairs={this._virtualizedListPairs}
+        />
+      );
+    }
+  }
+}
+
+module.exports = FlatList;

node_modules/react-native/Libraries/Lists/ListView/ListView.js

@@ -0,0 +1,766 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @providesModule ListView
+ * @flow
+ * @format
+ */
+'use strict';
+
+var ListViewDataSource = require('ListViewDataSource');
+var Platform = require('Platform');
+var React = require('React');
+var PropTypes = require('prop-types');
+var ReactNative = require('ReactNative');
+var RCTScrollViewManager = require('NativeModules').ScrollViewManager;
+var ScrollView = require('ScrollView');
+var ScrollResponder = require('ScrollResponder');
+var StaticRenderer = require('StaticRenderer');
+/* $FlowFixMe(>=0.54.0 site=react_native_oss) This comment suppresses an error
+ * found when Flow v0.54 was deployed. To see the error delete this comment and
+ * run Flow. */
+var TimerMixin = require('react-timer-mixin');
+var View = require('View');
+
+/* $FlowFixMe(>=0.54.0 site=react_native_oss) This comment suppresses an error
+ * found when Flow v0.54 was deployed. To see the error delete this comment and
+ * run Flow. */
+var cloneReferencedElement = require('react-clone-referenced-element');
+var createReactClass = require('create-react-class');
+var isEmpty = require('isEmpty');
+var merge = require('merge');
+
+var DEFAULT_PAGE_SIZE = 1;
+var DEFAULT_INITIAL_ROWS = 10;
+var DEFAULT_SCROLL_RENDER_AHEAD = 1000;
+var DEFAULT_END_REACHED_THRESHOLD = 1000;
+var DEFAULT_SCROLL_CALLBACK_THROTTLE = 50;
+
+/**
+ * DEPRECATED - use one of the new list components, such as [`FlatList`](docs/flatlist.html)
+ * or [`SectionList`](docs/sectionlist.html) for bounded memory use, fewer bugs,
+ * better performance, an easier to use API, and more features. Check out this
+ * [blog post](https://facebook.github.io/react-native/blog/2017/03/13/better-list-views.html)
+ * for more details.
+ *
+ * ListView - A core component designed for efficient display of vertically
+ * scrolling lists of changing data. The minimal API is to create a
+ * [`ListView.DataSource`](docs/listviewdatasource.html), populate it with a simple
+ * array of data blobs, and instantiate a `ListView` component with that data
+ * source and a `renderRow` callback which takes a blob from the data array and
+ * returns a renderable component.
+ *
+ * Minimal example:
+ *
+ * ```
+ * class MyComponent extends Component {
+ *   constructor() {
+ *     super();
+ *     const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
+ *     this.state = {
+ *       dataSource: ds.cloneWithRows(['row 1', 'row 2']),
+ *     };
+ *   }
+ *
+ *   render() {
+ *     return (
+ *       <ListView
+ *         dataSource={this.state.dataSource}
+ *         renderRow={(rowData) => <Text>{rowData}</Text>}
+ *       />
+ *     );
+ *   }
+ * }
+ * ```
+ *
+ * ListView also supports more advanced features, including sections with sticky
+ * section headers, header and footer support, callbacks on reaching the end of
+ * the available data (`onEndReached`) and on the set of rows that are visible
+ * in the device viewport change (`onChangeVisibleRows`), and several
+ * performance optimizations.
+ *
+ * There are a few performance operations designed to make ListView scroll
+ * smoothly while dynamically loading potentially very large (or conceptually
+ * infinite) data sets:
+ *
+ *  * Only re-render changed rows - the rowHasChanged function provided to the
+ *    data source tells the ListView if it needs to re-render a row because the
+ *    source data has changed - see ListViewDataSource for more details.
+ *
+ *  * Rate-limited row rendering - By default, only one row is rendered per
+ *    event-loop (customizable with the `pageSize` prop). This breaks up the
+ *    work into smaller chunks to reduce the chance of dropping frames while
+ *    rendering rows.
+ */
+
+var ListView = createReactClass({
+  displayName: 'ListView',
+  _childFrames: ([]: Array<Object>),
+  _sentEndForContentLength: (null: ?number),
+  _scrollComponent: (null: any),
+  _prevRenderedRowsCount: 0,
+  _visibleRows: ({}: Object),
+  scrollProperties: ({}: Object),
+
+  mixins: [ScrollResponder.Mixin, TimerMixin],
+
+  statics: {
+    DataSource: ListViewDataSource,
+  },
+
+  /**
+   * You must provide a renderRow function. If you omit any of the other render
+   * functions, ListView will simply skip rendering them.
+   *
+   * - renderRow(rowData, sectionID, rowID, highlightRow);
+   * - renderSectionHeader(sectionData, sectionID);
+   */
+  propTypes: {
+    ...ScrollView.propTypes,
+    /**
+     * An instance of [ListView.DataSource](docs/listviewdatasource.html) to use
+     */
+    dataSource: PropTypes.instanceOf(ListViewDataSource).isRequired,
+    /**
+     * (sectionID, rowID, adjacentRowHighlighted) => renderable
+     *
+     * If provided, a renderable component to be rendered as the separator
+     * below each row but not the last row if there is a section header below.
+     * Take a sectionID and rowID of the row above and whether its adjacent row
+     * is highlighted.
+     */
+    renderSeparator: PropTypes.func,
+    /**
+     * (rowData, sectionID, rowID, highlightRow) => renderable
+     *
+     * Takes a data entry from the data source and its ids and should return
+     * a renderable component to be rendered as the row. By default the data
+     * is exactly what was put into the data source, but it's also possible to
+     * provide custom extractors. ListView can be notified when a row is
+     * being highlighted by calling `highlightRow(sectionID, rowID)`. This
+     * sets a boolean value of adjacentRowHighlighted in renderSeparator, allowing you
+     * to control the separators above and below the highlighted row. The highlighted
+     * state of a row can be reset by calling highlightRow(null).
+     */
+    renderRow: PropTypes.func.isRequired,
+    /**
+     * How many rows to render on initial component mount. Use this to make
+     * it so that the first screen worth of data appears at one time instead of
+     * over the course of multiple frames.
+     */
+    initialListSize: PropTypes.number.isRequired,
+    /**
+     * Called when all rows have been rendered and the list has been scrolled
+     * to within onEndReachedThreshold of the bottom. The native scroll
+     * event is provided.
+     */
+    onEndReached: PropTypes.func,
+    /**
+     * Threshold in pixels (virtual, not physical) for calling onEndReached.
+     */
+    onEndReachedThreshold: PropTypes.number.isRequired,
+    /**
+     * Number of rows to render per event loop. Note: if your 'rows' are actually
+     * cells, i.e. they don't span the full width of your view (as in the
+     * ListViewGridLayoutExample), you should set the pageSize to be a multiple
+     * of the number of cells per row, otherwise you're likely to see gaps at
+     * the edge of the ListView as new pages are loaded.
+     */
+    pageSize: PropTypes.number.isRequired,
+    /**
+     * () => renderable
+     *
+     * The header and footer are always rendered (if these props are provided)
+     * on every render pass. If they are expensive to re-render, wrap them
+     * in StaticContainer or other mechanism as appropriate. Footer is always
+     * at the bottom of the list, and header at the top, on every render pass.
+     * In a horizontal ListView, the header is rendered on the left and the
+     * footer on the right.
+     */
+    renderFooter: PropTypes.func,
+    renderHeader: PropTypes.func,
+    /**
+     * (sectionData, sectionID) => renderable
+     *
+     * If provided, a header is rendered for this section.
+     */
+    renderSectionHeader: PropTypes.func,
+    /**
+     * (props) => renderable
+     *
+     * A function that returns the scrollable component in which the list rows
+     * are rendered. Defaults to returning a ScrollView with the given props.
+     */
+    renderScrollComponent: PropTypes.func.isRequired,
+    /**
+     * How early to start rendering rows before they come on screen, in
+     * pixels.
+     */
+    scrollRenderAheadDistance: PropTypes.number.isRequired,
+    /**
+     * (visibleRows, changedRows) => void
+     *
+     * Called when the set of visible rows changes. `visibleRows` maps
+     * { sectionID: { rowID: true }} for all the visible rows, and
+     * `changedRows` maps { sectionID: { rowID: true | false }} for the rows
+     * that have changed their visibility, with true indicating visible, and
+     * false indicating the view has moved out of view.
+     */
+    onChangeVisibleRows: PropTypes.func,
+    /**
+     * A performance optimization for improving scroll perf of
+     * large lists, used in conjunction with overflow: 'hidden' on the row
+     * containers. This is enabled by default.
+     */
+    removeClippedSubviews: PropTypes.bool,
+    /**
+     * Makes the sections headers sticky. The sticky behavior means that it
+     * will scroll with the content at the top of the section until it reaches
+     * the top of the screen, at which point it will stick to the top until it
+     * is pushed off the screen by the next section header. This property is
+     * not supported in conjunction with `horizontal={true}`. Only enabled by
+     * default on iOS because of typical platform standards.
+     */
+    stickySectionHeadersEnabled: PropTypes.bool,
+    /**
+     * An array of child indices determining which children get docked to the
+     * top of the screen when scrolling. For example, passing
+     * `stickyHeaderIndices={[0]}` will cause the first child to be fixed to the
+     * top of the scroll view. This property is not supported in conjunction
+     * with `horizontal={true}`.
+     */
+    stickyHeaderIndices: PropTypes.arrayOf(PropTypes.number).isRequired,
+    /**
+     * Flag indicating whether empty section headers should be rendered. In the future release
+     * empty section headers will be rendered by default, and the flag will be deprecated.
+     * If empty sections are not desired to be rendered their indices should be excluded from sectionID object.
+     */
+    enableEmptySections: PropTypes.bool,
+  },
+
+  /**
+   * Exports some data, e.g. for perf investigations or analytics.
+   */
+  getMetrics: function() {
+    return {
+      contentLength: this.scrollProperties.contentLength,
+      totalRows: this.props.enableEmptySections
+        ? this.props.dataSource.getRowAndSectionCount()
+        : this.props.dataSource.getRowCount(),
+      renderedRows: this.state.curRenderedRowsCount,
+      visibleRows: Object.keys(this._visibleRows).length,
+    };
+  },
+
+  /**
+   * Provides a handle to the underlying scroll responder.
+   * Note that `this._scrollComponent` might not be a `ScrollView`, so we
+   * need to check that it responds to `getScrollResponder` before calling it.
+   */
+  getScrollResponder: function() {
+    if (this._scrollComponent && this._scrollComponent.getScrollResponder) {
+      return this._scrollComponent.getScrollResponder();
+    }
+  },
+
+  getScrollableNode: function() {
+    if (this._scrollComponent && this._scrollComponent.getScrollableNode) {
+      return this._scrollComponent.getScrollableNode();
+    } else {
+      return ReactNative.findNodeHandle(this._scrollComponent);
+    }
+  },
+
+  /**
+   * Scrolls to a given x, y offset, either immediately or with a smooth animation.
+   *
+   * See `ScrollView#scrollTo`.
+   */
+  scrollTo: function(...args: Array<mixed>) {
+    if (this._scrollComponent && this._scrollComponent.scrollTo) {
+      this._scrollComponent.scrollTo(...args);
+    }
+  },
+
+  /**
+   * If this is a vertical ListView scrolls to the bottom.
+   * If this is a horizontal ListView scrolls to the right.
+   *
+   * Use `scrollToEnd({animated: true})` for smooth animated scrolling,
+   * `scrollToEnd({animated: false})` for immediate scrolling.
+   * If no options are passed, `animated` defaults to true.
+   *
+   * See `ScrollView#scrollToEnd`.
+   */
+  scrollToEnd: function(options?: ?{animated?: ?boolean}) {
+    if (this._scrollComponent) {
+      if (this._scrollComponent.scrollToEnd) {
+        this._scrollComponent.scrollToEnd(options);
+      } else {
+        console.warn(
+          'The scroll component used by the ListView does not support ' +
+            'scrollToEnd. Check the renderScrollComponent prop of your ListView.',
+        );
+      }
+    }
+  },
+
+  /**
+   * Displays the scroll indicators momentarily.
+   *
+   * @platform ios
+   */
+  flashScrollIndicators: function() {
+    if (this._scrollComponent && this._scrollComponent.flashScrollIndicators) {
+      this._scrollComponent.flashScrollIndicators();
+    }
+  },
+
+  setNativeProps: function(props: Object) {
+    if (this._scrollComponent) {
+      this._scrollComponent.setNativeProps(props);
+    }
+  },
+
+  /**
+   * React life cycle hooks.
+   */
+
+  getDefaultProps: function() {
+    return {
+      initialListSize: DEFAULT_INITIAL_ROWS,
+      pageSize: DEFAULT_PAGE_SIZE,
+      renderScrollComponent: props => <ScrollView {...props} />,
+      scrollRenderAheadDistance: DEFAULT_SCROLL_RENDER_AHEAD,
+      onEndReachedThreshold: DEFAULT_END_REACHED_THRESHOLD,
+      stickySectionHeadersEnabled: Platform.OS === 'ios',
+      stickyHeaderIndices: [],
+    };
+  },
+
+  getInitialState: function() {
+    return {
+      curRenderedRowsCount: this.props.initialListSize,
+      highlightedRow: ({}: Object),
+    };
+  },
+
+  getInnerViewNode: function() {
+    return this._scrollComponent.getInnerViewNode();
+  },
+
+  UNSAFE_componentWillMount: function() {
+    // this data should never trigger a render pass, so don't put in state
+    this.scrollProperties = {
+      visibleLength: null,
+      contentLength: null,
+      offset: 0,
+    };
+    this._childFrames = [];
+    this._visibleRows = {};
+    this._prevRenderedRowsCount = 0;
+    this._sentEndForContentLength = null;
+  },
+
+  componentDidMount: function() {
+    // do this in animation frame until componentDidMount actually runs after
+    // the component is laid out
+    this.requestAnimationFrame(() => {
+      this._measureAndUpdateScrollProps();
+    });
+  },
+
+  UNSAFE_componentWillReceiveProps: function(nextProps: Object) {
+    if (
+      this.props.dataSource !== nextProps.dataSource ||
+      this.props.initialListSize !== nextProps.initialListSize
+    ) {
+      this.setState(
+        (state, props) => {
+          this._prevRenderedRowsCount = 0;
+          return {
+            curRenderedRowsCount: Math.min(
+              Math.max(state.curRenderedRowsCount, props.initialListSize),
+              props.enableEmptySections
+                ? props.dataSource.getRowAndSectionCount()
+                : props.dataSource.getRowCount(),
+            ),
+          };
+        },
+        () => this._renderMoreRowsIfNeeded(),
+      );
+    }
+  },
+
+  componentDidUpdate: function() {
+    this.requestAnimationFrame(() => {
+      this._measureAndUpdateScrollProps();
+    });
+  },
+
+  _onRowHighlighted: function(sectionID: string, rowID: string) {
+    this.setState({highlightedRow: {sectionID, rowID}});
+  },
+
+  render: function() {
+    var bodyComponents = [];
+
+    var dataSource = this.props.dataSource;
+    var allRowIDs = dataSource.rowIdentities;
+    var rowCount = 0;
+    var stickySectionHeaderIndices = [];
+
+    const {renderSectionHeader} = this.props;
+
+    var header = this.props.renderHeader && this.props.renderHeader();
+    var footer = this.props.renderFooter && this.props.renderFooter();
+    var totalIndex = header ? 1 : 0;
+
+    for (var sectionIdx = 0; sectionIdx < allRowIDs.length; sectionIdx++) {
+      var sectionID = dataSource.sectionIdentities[sectionIdx];
+      var rowIDs = allRowIDs[sectionIdx];
+      if (rowIDs.length === 0) {
+        if (this.props.enableEmptySections === undefined) {
+          /* $FlowFixMe(>=0.54.0 site=react_native_oss) This comment suppresses
+           * an error found when Flow v0.54 was deployed. To see the error
+           * delete this comment and run Flow. */
+          var warning = require('fbjs/lib/warning');
+          warning(
+            false,
+            'In next release empty section headers will be rendered.' +
+              " In this release you can use 'enableEmptySections' flag to render empty section headers.",
+          );
+          continue;
+        } else {
+          var invariant = require('fbjs/lib/invariant');
+          invariant(
+            this.props.enableEmptySections,
+            "In next release 'enableEmptySections' flag will be deprecated, empty section headers will always be rendered." +
+              ' If empty section headers are not desirable their indices should be excluded from sectionIDs object.' +
+              " In this release 'enableEmptySections' may only have value 'true' to allow empty section headers rendering.",
+          );
+        }
+      }
+
+      if (renderSectionHeader) {
+        const element = renderSectionHeader(
+          dataSource.getSectionHeaderData(sectionIdx),
+          sectionID,
+        );
+        if (element) {
+          bodyComponents.push(
+            React.cloneElement(element, {key: 's_' + sectionID}),
+          );
+          if (this.props.stickySectionHeadersEnabled) {
+            stickySectionHeaderIndices.push(totalIndex);
+          }
+          totalIndex++;
+        }
+      }
+
+      for (var rowIdx = 0; rowIdx < rowIDs.length; rowIdx++) {
+        var rowID = rowIDs[rowIdx];
+        var comboID = sectionID + '_' + rowID;
+        var shouldUpdateRow =
+          rowCount >= this._prevRenderedRowsCount &&
+          dataSource.rowShouldUpdate(sectionIdx, rowIdx);
+        var row = (
+          <StaticRenderer
+            key={'r_' + comboID}
+            shouldUpdate={!!shouldUpdateRow}
+            render={this.props.renderRow.bind(
+              null,
+              dataSource.getRowData(sectionIdx, rowIdx),
+              sectionID,
+              rowID,
+              this._onRowHighlighted,
+            )}
+          />
+        );
+        bodyComponents.push(row);
+        totalIndex++;
+
+        if (
+          this.props.renderSeparator &&
+          (rowIdx !== rowIDs.length - 1 || sectionIdx === allRowIDs.length - 1)
+        ) {
+          var adjacentRowHighlighted =
+            this.state.highlightedRow.sectionID === sectionID &&
+            (this.state.highlightedRow.rowID === rowID ||
+              this.state.highlightedRow.rowID === rowIDs[rowIdx + 1]);
+          var separator = this.props.renderSeparator(
+            sectionID,
+            rowID,
+            adjacentRowHighlighted,
+          );
+          if (separator) {
+            bodyComponents.push(<View key={'s_' + comboID}>{separator}</View>);
+            totalIndex++;
+          }
+        }
+        if (++rowCount === this.state.curRenderedRowsCount) {
+          break;
+        }
+      }
+      if (rowCount >= this.state.curRenderedRowsCount) {
+        break;
+      }
+    }
+
+    var {renderScrollComponent, ...props} = this.props;
+    if (!props.scrollEventThrottle) {
+      props.scrollEventThrottle = DEFAULT_SCROLL_CALLBACK_THROTTLE;
+    }
+    if (props.removeClippedSubviews === undefined) {
+      props.removeClippedSubviews = true;
+    }
+    Object.assign(props, {
+      onScroll: this._onScroll,
+      stickyHeaderIndices: this.props.stickyHeaderIndices.concat(
+        stickySectionHeaderIndices,
+      ),
+
+      // Do not pass these events downstream to ScrollView since they will be
+      // registered in ListView's own ScrollResponder.Mixin
+      onKeyboardWillShow: undefined,
+      onKeyboardWillHide: undefined,
+      onKeyboardDidShow: undefined,
+      onKeyboardDidHide: undefined,
+    });
+
+    return cloneReferencedElement(
+      renderScrollComponent(props),
+      {
+        ref: this._setScrollComponentRef,
+        onContentSizeChange: this._onContentSizeChange,
+        onLayout: this._onLayout,
+        DEPRECATED_sendUpdatedChildFrames:
+          typeof props.onChangeVisibleRows !== undefined,
+      },
+      header,
+      bodyComponents,
+      footer,
+    );
+  },
+
+  /**
+   * Private methods
+   */
+
+  _measureAndUpdateScrollProps: function() {
+    var scrollComponent = this.getScrollResponder();
+    if (!scrollComponent || !scrollComponent.getInnerViewNode) {
+      return;
+    }
+
+    // RCTScrollViewManager.calculateChildFrames is not available on
+    // every platform
+    RCTScrollViewManager &&
+      RCTScrollViewManager.calculateChildFrames &&
+      RCTScrollViewManager.calculateChildFrames(
+        ReactNative.findNodeHandle(scrollComponent),
+        this._updateVisibleRows,
+      );
+  },
+
+  _setScrollComponentRef: function(scrollComponent: Object) {
+    this._scrollComponent = scrollComponent;
+  },
+
+  _onContentSizeChange: function(width: number, height: number) {
+    var contentLength = !this.props.horizontal ? height : width;
+    if (contentLength !== this.scrollProperties.contentLength) {
+      this.scrollProperties.contentLength = contentLength;
+      this._updateVisibleRows();
+      this._renderMoreRowsIfNeeded();
+    }
+    this.props.onContentSizeChange &&
+      this.props.onContentSizeChange(width, height);
+  },
+
+  _onLayout: function(event: Object) {
+    var {width, height} = event.nativeEvent.layout;
+    var visibleLength = !this.props.horizontal ? height : width;
+    if (visibleLength !== this.scrollProperties.visibleLength) {
+      this.scrollProperties.visibleLength = visibleLength;
+      this._updateVisibleRows();
+      this._renderMoreRowsIfNeeded();
+    }
+    this.props.onLayout && this.props.onLayout(event);
+  },
+
+  _maybeCallOnEndReached: function(event?: Object) {
+    if (
+      this.props.onEndReached &&
+      this.scrollProperties.contentLength !== this._sentEndForContentLength &&
+      this._getDistanceFromEnd(this.scrollProperties) <
+        this.props.onEndReachedThreshold &&
+      this.state.curRenderedRowsCount ===
+        (this.props.enableEmptySections
+          ? this.props.dataSource.getRowAndSectionCount()
+          : this.props.dataSource.getRowCount())
+    ) {
+      this._sentEndForContentLength = this.scrollProperties.contentLength;
+      this.props.onEndReached(event);
+      return true;
+    }
+    return false;
+  },
+
+  _renderMoreRowsIfNeeded: function() {
+    if (
+      this.scrollProperties.contentLength === null ||
+      this.scrollProperties.visibleLength === null ||
+      this.state.curRenderedRowsCount ===
+        (this.props.enableEmptySections
+          ? this.props.dataSource.getRowAndSectionCount()
+          : this.props.dataSource.getRowCount())
+    ) {
+      this._maybeCallOnEndReached();
+      return;
+    }
+
+    var distanceFromEnd = this._getDistanceFromEnd(this.scrollProperties);
+    if (distanceFromEnd < this.props.scrollRenderAheadDistance) {
+      this._pageInNewRows();
+    }
+  },
+
+  _pageInNewRows: function() {
+    this.setState(
+      (state, props) => {
+        var rowsToRender = Math.min(
+          state.curRenderedRowsCount + props.pageSize,
+          props.enableEmptySections
+            ? props.dataSource.getRowAndSectionCount()
+            : props.dataSource.getRowCount(),
+        );
+        this._prevRenderedRowsCount = state.curRenderedRowsCount;
+        return {
+          curRenderedRowsCount: rowsToRender,
+        };
+      },
+      () => {
+        this._measureAndUpdateScrollProps();
+        this._prevRenderedRowsCount = this.state.curRenderedRowsCount;
+      },
+    );
+  },
+
+  _getDistanceFromEnd: function(scrollProperties: Object) {
+    return (
+      scrollProperties.contentLength -
+      scrollProperties.visibleLength -
+      scrollProperties.offset
+    );
+  },
+
+  _updateVisibleRows: function(updatedFrames?: Array<Object>) {
+    if (!this.props.onChangeVisibleRows) {
+      return; // No need to compute visible rows if there is no callback
+    }
+    if (updatedFrames) {
+      updatedFrames.forEach(newFrame => {
+        this._childFrames[newFrame.index] = merge(newFrame);
+      });
+    }
+    var isVertical = !this.props.horizontal;
+    var dataSource = this.props.dataSource;
+    var visibleMin = this.scrollProperties.offset;
+    var visibleMax = visibleMin + this.scrollProperties.visibleLength;
+    var allRowIDs = dataSource.rowIdentities;
+
+    var header = this.props.renderHeader && this.props.renderHeader();
+    var totalIndex = header ? 1 : 0;
+    var visibilityChanged = false;
+    var changedRows = {};
+    for (var sectionIdx = 0; sectionIdx < allRowIDs.length; sectionIdx++) {
+      var rowIDs = allRowIDs[sectionIdx];
+      if (rowIDs.length === 0) {
+        continue;
+      }
+      var sectionID = dataSource.sectionIdentities[sectionIdx];
+      if (this.props.renderSectionHeader) {
+        totalIndex++;
+      }
+      var visibleSection = this._visibleRows[sectionID];
+      if (!visibleSection) {
+        visibleSection = {};
+      }
+      for (var rowIdx = 0; rowIdx < rowIDs.length; rowIdx++) {
+        var rowID = rowIDs[rowIdx];
+        var frame = this._childFrames[totalIndex];
+        totalIndex++;
+        if (
+          this.props.renderSeparator &&
+          (rowIdx !== rowIDs.length - 1 || sectionIdx === allRowIDs.length - 1)
+        ) {
+          totalIndex++;
+        }
+        if (!frame) {
+          break;
+        }
+        var rowVisible = visibleSection[rowID];
+        var min = isVertical ? frame.y : frame.x;
+        var max = min + (isVertical ? frame.height : frame.width);
+        if ((!min && !max) || min === max) {
+          break;
+        }
+        if (min > visibleMax || max < visibleMin) {
+          if (rowVisible) {
+            visibilityChanged = true;
+            delete visibleSection[rowID];
+            if (!changedRows[sectionID]) {
+              changedRows[sectionID] = {};
+            }
+            changedRows[sectionID][rowID] = false;
+          }
+        } else if (!rowVisible) {
+          visibilityChanged = true;
+          visibleSection[rowID] = true;
+          if (!changedRows[sectionID]) {
+            changedRows[sectionID] = {};
+          }
+          changedRows[sectionID][rowID] = true;
+        }
+      }
+      if (!isEmpty(visibleSection)) {
+        this._visibleRows[sectionID] = visibleSection;
+      } else if (this._visibleRows[sectionID]) {
+        delete this._visibleRows[sectionID];
+      }
+    }
+    visibilityChanged &&
+      this.props.onChangeVisibleRows(this._visibleRows, changedRows);
+  },
+
+  _onScroll: function(e: Object) {
+    var isVertical = !this.props.horizontal;
+    this.scrollProperties.visibleLength =
+      e.nativeEvent.layoutMeasurement[isVertical ? 'height' : 'width'];
+    this.scrollProperties.contentLength =
+      e.nativeEvent.contentSize[isVertical ? 'height' : 'width'];
+    this.scrollProperties.offset =
+      e.nativeEvent.contentOffset[isVertical ? 'y' : 'x'];
+    this._updateVisibleRows(e.nativeEvent.updatedChildFrames);
+    if (!this._maybeCallOnEndReached(e)) {
+      this._renderMoreRowsIfNeeded();
+    }
+
+    if (
+      this.props.onEndReached &&
+      this._getDistanceFromEnd(this.scrollProperties) >
+        this.props.onEndReachedThreshold
+    ) {
+      // Scrolled out of the end zone, so it should be able to trigger again.
+      this._sentEndForContentLength = null;
+    }
+
+    this.props.onScroll && this.props.onScroll(e);
+  },
+});
+
+module.exports = ListView;

node_modules/react-native/Libraries/Lists/ListView/ListViewDataSource.js

@@ -0,0 +1,429 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @providesModule ListViewDataSource
+ * @flow
+ * @format
+ */
+'use strict';
+
+var invariant = require('fbjs/lib/invariant');
+var isEmpty = require('isEmpty');
+/* $FlowFixMe(>=0.54.0 site=react_native_oss) This comment suppresses an error
+ * found when Flow v0.54 was deployed. To see the error delete this comment and
+ * run Flow. */
+var warning = require('fbjs/lib/warning');
+
+function defaultGetRowData(
+  dataBlob: any,
+  sectionID: number | string,
+  rowID: number | string,
+): any {
+  return dataBlob[sectionID][rowID];
+}
+
+function defaultGetSectionHeaderData(
+  dataBlob: any,
+  sectionID: number | string,
+): any {
+  return dataBlob[sectionID];
+}
+
+type differType = (data1: any, data2: any) => boolean;
+
+type ParamType = {
+  rowHasChanged: differType,
+  getRowData?: ?typeof defaultGetRowData,
+  sectionHeaderHasChanged?: ?differType,
+  getSectionHeaderData?: ?typeof defaultGetSectionHeaderData,
+};
+
+/**
+ * Provides efficient data processing and access to the
+ * `ListView` component.  A `ListViewDataSource` is created with functions for
+ * extracting data from the input blob, and comparing elements (with default
+ * implementations for convenience).  The input blob can be as simple as an
+ * array of strings, or an object with rows nested inside section objects.
+ *
+ * To update the data in the datasource, use `cloneWithRows` (or
+ * `cloneWithRowsAndSections` if you care about sections).  The data in the
+ * data source is immutable, so you can't modify it directly.  The clone methods
+ * suck in the new data and compute a diff for each row so ListView knows
+ * whether to re-render it or not.
+ *
+ * In this example, a component receives data in chunks, handled by
+ * `_onDataArrived`, which concats the new data onto the old data and updates the
+ * data source.  We use `concat` to create a new array - mutating `this._data`,
+ * e.g. with `this._data.push(newRowData)`, would be an error. `_rowHasChanged`
+ * understands the shape of the row data and knows how to efficiently compare
+ * it.
+ *
+ * ```
+ * getInitialState: function() {
+ *   var ds = new ListView.DataSource({rowHasChanged: this._rowHasChanged});
+ *   return {ds};
+ * },
+ * _onDataArrived(newData) {
+ *   this._data = this._data.concat(newData);
+ *   this.setState({
+ *     ds: this.state.ds.cloneWithRows(this._data)
+ *   });
+ * }
+ * ```
+ */
+
+class ListViewDataSource {
+  /**
+   * You can provide custom extraction and `hasChanged` functions for section
+   * headers and rows.  If absent, data will be extracted with the
+   * `defaultGetRowData` and `defaultGetSectionHeaderData` functions.
+   *
+   * The default extractor expects data of one of the following forms:
+   *
+   *      { sectionID_1: { rowID_1: <rowData1>, ... }, ... }
+   *
+   *    or
+   *
+   *      { sectionID_1: [ <rowData1>, <rowData2>, ... ], ... }
+   *
+   *    or
+   *
+   *      [ [ <rowData1>, <rowData2>, ... ], ... ]
+   *
+   * The constructor takes in a params argument that can contain any of the
+   * following:
+   *
+   * - getRowData(dataBlob, sectionID, rowID);
+   * - getSectionHeaderData(dataBlob, sectionID);
+   * - rowHasChanged(prevRowData, nextRowData);
+   * - sectionHeaderHasChanged(prevSectionData, nextSectionData);
+   */
+  constructor(params: ParamType) {
+    invariant(
+      params && typeof params.rowHasChanged === 'function',
+      'Must provide a rowHasChanged function.',
+    );
+    this._rowHasChanged = params.rowHasChanged;
+    this._getRowData = params.getRowData || defaultGetRowData;
+    this._sectionHeaderHasChanged = params.sectionHeaderHasChanged;
+    this._getSectionHeaderData =
+      params.getSectionHeaderData || defaultGetSectionHeaderData;
+
+    this._dataBlob = null;
+    this._dirtyRows = [];
+    this._dirtySections = [];
+    this._cachedRowCount = 0;
+
+    // These two private variables are accessed by outsiders because ListView
+    // uses them to iterate over the data in this class.
+    this.rowIdentities = [];
+    this.sectionIdentities = [];
+  }
+
+  /**
+   * Clones this `ListViewDataSource` with the specified `dataBlob` and
+   * `rowIdentities`. The `dataBlob` is just an arbitrary blob of data. At
+   * construction an extractor to get the interesting information was defined
+   * (or the default was used).
+   *
+   * The `rowIdentities` is a 2D array of identifiers for rows.
+   * ie. [['a1', 'a2'], ['b1', 'b2', 'b3'], ...].  If not provided, it's
+   * assumed that the keys of the section data are the row identities.
+   *
+   * Note: This function does NOT clone the data in this data source. It simply
+   * passes the functions defined at construction to a new data source with
+   * the data specified. If you wish to maintain the existing data you must
+   * handle merging of old and new data separately and then pass that into
+   * this function as the `dataBlob`.
+   */
+  cloneWithRows(
+    dataBlob: $ReadOnlyArray<any> | {+[key: string]: any},
+    rowIdentities: ?$ReadOnlyArray<string>,
+  ): ListViewDataSource {
+    var rowIds = rowIdentities ? [[...rowIdentities]] : null;
+    if (!this._sectionHeaderHasChanged) {
+      this._sectionHeaderHasChanged = () => false;
+    }
+    return this.cloneWithRowsAndSections({s1: dataBlob}, ['s1'], rowIds);
+  }
+
+  /**
+   * This performs the same function as the `cloneWithRows` function but here
+   * you also specify what your `sectionIdentities` are. If you don't care
+   * about sections you should safely be able to use `cloneWithRows`.
+   *
+   * `sectionIdentities` is an array of identifiers for sections.
+   * ie. ['s1', 's2', ...].  The identifiers should correspond to the keys or array indexes
+   * of the data you wish to include.  If not provided, it's assumed that the
+   * keys of dataBlob are the section identities.
+   *
+   * Note: this returns a new object!
+   *
+   * ```
+   * const dataSource = ds.cloneWithRowsAndSections({
+   *   addresses: ['row 1', 'row 2'],
+   *   phone_numbers: ['data 1', 'data 2'],
+   * }, ['phone_numbers']);
+   * ```
+   */
+  cloneWithRowsAndSections(
+    dataBlob: any,
+    sectionIdentities: ?Array<string>,
+    rowIdentities: ?Array<Array<string>>,
+  ): ListViewDataSource {
+    invariant(
+      typeof this._sectionHeaderHasChanged === 'function',
+      'Must provide a sectionHeaderHasChanged function with section data.',
+    );
+    invariant(
+      !sectionIdentities ||
+        !rowIdentities ||
+        sectionIdentities.length === rowIdentities.length,
+      'row and section ids lengths must be the same',
+    );
+
+    var newSource = new ListViewDataSource({
+      getRowData: this._getRowData,
+      getSectionHeaderData: this._getSectionHeaderData,
+      rowHasChanged: this._rowHasChanged,
+      sectionHeaderHasChanged: this._sectionHeaderHasChanged,
+    });
+    newSource._dataBlob = dataBlob;
+    if (sectionIdentities) {
+      newSource.sectionIdentities = sectionIdentities;
+    } else {
+      newSource.sectionIdentities = Object.keys(dataBlob);
+    }
+    if (rowIdentities) {
+      newSource.rowIdentities = rowIdentities;
+    } else {
+      newSource.rowIdentities = [];
+      newSource.sectionIdentities.forEach(sectionID => {
+        newSource.rowIdentities.push(Object.keys(dataBlob[sectionID]));
+      });
+    }
+    newSource._cachedRowCount = countRows(newSource.rowIdentities);
+
+    newSource._calculateDirtyArrays(
+      this._dataBlob,
+      this.sectionIdentities,
+      this.rowIdentities,
+    );
+
+    return newSource;
+  }
+
+  /**
+   * Returns the total number of rows in the data source.
+   *
+   * If you are specifying the rowIdentities or sectionIdentities, then `getRowCount` will return the number of rows in the filtered data source.
+   */
+  getRowCount(): number {
+    return this._cachedRowCount;
+  }
+
+  /**
+   * Returns the total number of rows in the data source (see `getRowCount` for how this is calculated) plus the number of sections in the data.
+   *
+   * If you are specifying the rowIdentities or sectionIdentities, then `getRowAndSectionCount` will return the number of rows & sections in the filtered data source.
+   */
+  getRowAndSectionCount(): number {
+    return this._cachedRowCount + this.sectionIdentities.length;
+  }
+
+  /**
+   * Returns if the row is dirtied and needs to be rerendered
+   */
+  rowShouldUpdate(sectionIndex: number, rowIndex: number): boolean {
+    var needsUpdate = this._dirtyRows[sectionIndex][rowIndex];
+    warning(
+      needsUpdate !== undefined,
+      'missing dirtyBit for section, row: ' + sectionIndex + ', ' + rowIndex,
+    );
+    return needsUpdate;
+  }
+
+  /**
+   * Gets the data required to render the row.
+   */
+  getRowData(sectionIndex: number, rowIndex: number): any {
+    var sectionID = this.sectionIdentities[sectionIndex];
+    var rowID = this.rowIdentities[sectionIndex][rowIndex];
+    warning(
+      sectionID !== undefined && rowID !== undefined,
+      'rendering invalid section, row: ' + sectionIndex + ', ' + rowIndex,
+    );
+    return this._getRowData(this._dataBlob, sectionID, rowID);
+  }
+
+  /**
+   * Gets the rowID at index provided if the dataSource arrays were flattened,
+   * or null of out of range indexes.
+   */
+  getRowIDForFlatIndex(index: number): ?string {
+    var accessIndex = index;
+    for (var ii = 0; ii < this.sectionIdentities.length; ii++) {
+      if (accessIndex >= this.rowIdentities[ii].length) {
+        accessIndex -= this.rowIdentities[ii].length;
+      } else {
+        return this.rowIdentities[ii][accessIndex];
+      }
+    }
+    return null;
+  }
+
+  /**
+   * Gets the sectionID at index provided if the dataSource arrays were flattened,
+   * or null for out of range indexes.
+   */
+  getSectionIDForFlatIndex(index: number): ?string {
+    var accessIndex = index;
+    for (var ii = 0; ii < this.sectionIdentities.length; ii++) {
+      if (accessIndex >= this.rowIdentities[ii].length) {
+        accessIndex -= this.rowIdentities[ii].length;
+      } else {
+        return this.sectionIdentities[ii];
+      }
+    }
+    return null;
+  }
+
+  /**
+   * Returns an array containing the number of rows in each section
+   */
+  getSectionLengths(): Array<number> {
+    var results = [];
+    for (var ii = 0; ii < this.sectionIdentities.length; ii++) {
+      results.push(this.rowIdentities[ii].length);
+    }
+    return results;
+  }
+
+  /**
+   * Returns if the section header is dirtied and needs to be rerendered
+   */
+  sectionHeaderShouldUpdate(sectionIndex: number): boolean {
+    var needsUpdate = this._dirtySections[sectionIndex];
+    warning(
+      needsUpdate !== undefined,
+      'missing dirtyBit for section: ' + sectionIndex,
+    );
+    return needsUpdate;
+  }
+
+  /**
+   * Gets the data required to render the section header
+   */
+  getSectionHeaderData(sectionIndex: number): any {
+    if (!this._getSectionHeaderData) {
+      return null;
+    }
+    var sectionID = this.sectionIdentities[sectionIndex];
+    warning(
+      sectionID !== undefined,
+      'renderSection called on invalid section: ' + sectionIndex,
+    );
+    return this._getSectionHeaderData(this._dataBlob, sectionID);
+  }
+
+  /**
+   * Private members and methods.
+   */
+
+  _getRowData: typeof defaultGetRowData;
+  _getSectionHeaderData: typeof defaultGetSectionHeaderData;
+  _rowHasChanged: differType;
+  _sectionHeaderHasChanged: ?differType;
+
+  _dataBlob: any;
+  _dirtyRows: Array<Array<boolean>>;
+  _dirtySections: Array<boolean>;
+  _cachedRowCount: number;
+
+  // These two 'protected' variables are accessed by ListView to iterate over
+  // the data in this class.
+  rowIdentities: Array<Array<string>>;
+  sectionIdentities: Array<string>;
+
+  _calculateDirtyArrays(
+    prevDataBlob: any,
+    prevSectionIDs: Array<string>,
+    prevRowIDs: Array<Array<string>>,
+  ): void {
+    // construct a hashmap of the existing (old) id arrays
+    var prevSectionsHash = keyedDictionaryFromArray(prevSectionIDs);
+    var prevRowsHash = {};
+    for (var ii = 0; ii < prevRowIDs.length; ii++) {
+      var sectionID = prevSectionIDs[ii];
+      warning(
+        !prevRowsHash[sectionID],
+        'SectionID appears more than once: ' + sectionID,
+      );
+      prevRowsHash[sectionID] = keyedDictionaryFromArray(prevRowIDs[ii]);
+    }
+
+    // compare the 2 identity array and get the dirtied rows
+    this._dirtySections = [];
+    this._dirtyRows = [];
+
+    var dirty;
+    for (var sIndex = 0; sIndex < this.sectionIdentities.length; sIndex++) {
+      var sectionID = this.sectionIdentities[sIndex];
+      // dirty if the sectionHeader is new or _sectionHasChanged is true
+      dirty = !prevSectionsHash[sectionID];
+      var sectionHeaderHasChanged = this._sectionHeaderHasChanged;
+      if (!dirty && sectionHeaderHasChanged) {
+        dirty = sectionHeaderHasChanged(
+          this._getSectionHeaderData(prevDataBlob, sectionID),
+          this._getSectionHeaderData(this._dataBlob, sectionID),
+        );
+      }
+      this._dirtySections.push(!!dirty);
+
+      this._dirtyRows[sIndex] = [];
+      for (
+        var rIndex = 0;
+        rIndex < this.rowIdentities[sIndex].length;
+        rIndex++
+      ) {
+        var rowID = this.rowIdentities[sIndex][rIndex];
+        // dirty if the section is new, row is new or _rowHasChanged is true
+        dirty =
+          !prevSectionsHash[sectionID] ||
+          !prevRowsHash[sectionID][rowID] ||
+          this._rowHasChanged(
+            this._getRowData(prevDataBlob, sectionID, rowID),
+            this._getRowData(this._dataBlob, sectionID, rowID),
+          );
+        this._dirtyRows[sIndex].push(!!dirty);
+      }
+    }
+  }
+}
+
+function countRows(allRowIDs) {
+  var totalRows = 0;
+  for (var sectionIdx = 0; sectionIdx < allRowIDs.length; sectionIdx++) {
+    var rowIDs = allRowIDs[sectionIdx];
+    totalRows += rowIDs.length;
+  }
+  return totalRows;
+}
+
+function keyedDictionaryFromArray(arr) {
+  if (isEmpty(arr)) {
+    return {};
+  }
+  var result = {};
+  for (var ii = 0; ii < arr.length; ii++) {
+    var key = arr[ii];
+    warning(!result[key], 'Value appears more than once in array: ' + key);
+    result[key] = true;
+  }
+  return result;
+}
+
+module.exports = ListViewDataSource;

node_modules/react-native/Libraries/Lists/ListView/__mocks__/ListViewMock.js

@@ -0,0 +1,60 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * 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';
+
+const ListViewDataSource = require('ListViewDataSource');
+const React = require('React');
+const ScrollView = require('ScrollView');
+const StaticRenderer = require('StaticRenderer');
+
+class ListViewMock extends React.Component<$FlowFixMeProps> {
+  static latestRef: ?ListViewMock;
+  static defaultProps = {
+    /* $FlowFixMe(>=0.59.0 site=react_native_fb) This comment suppresses an
+     * error caught by Flow 0.59 which was not caught before. Most likely, this
+     * error is because an exported function parameter is missing an
+     * annotation. Without an annotation, these parameters are uncovered by
+     * Flow. */
+    renderScrollComponent: props => <ScrollView {...props} />,
+  };
+  componentDidMount() {
+    ListViewMock.latestRef = this;
+  }
+  render() {
+    const {dataSource, renderFooter, renderHeader} = this.props;
+    const rows = [renderHeader && renderHeader()];
+    const allRowIDs = dataSource.rowIdentities;
+    for (let sectionIdx = 0; sectionIdx < allRowIDs.length; sectionIdx++) {
+      const sectionID = dataSource.sectionIdentities[sectionIdx];
+      const rowIDs = allRowIDs[sectionIdx];
+      for (let rowIdx = 0; rowIdx < rowIDs.length; rowIdx++) {
+        const rowID = rowIDs[rowIdx];
+        // Row IDs are only unique in a section
+        rows.push(
+          <StaticRenderer
+            key={'section_' + sectionID + '_row_' + rowID}
+            shouldUpdate={true}
+            render={this.props.renderRow.bind(
+              null,
+              dataSource.getRowData(sectionIdx, rowIdx),
+              sectionID,
+              rowID,
+            )}
+          />,
+        );
+      }
+    }
+    renderFooter && rows.push(renderFooter());
+    return this.props.renderScrollComponent({...this.props, children: rows});
+  }
+  static DataSource = ListViewDataSource;
+}
+
+module.exports = ListViewMock;

node_modules/react-native/Libraries/Lists/MetroListView.js

@@ -0,0 +1,199 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @providesModule MetroListView
+ * @flow
+ * @format
+ */
+'use strict';
+
+const ListView = require('ListView');
+const React = require('React');
+const RefreshControl = require('RefreshControl');
+const ScrollView = require('ScrollView');
+
+const invariant = require('fbjs/lib/invariant');
+
+type Item = any;
+
+type NormalProps = {
+  FooterComponent?: React.ComponentType<*>,
+  renderItem: (info: Object) => ?React.Element<any>,
+  /* $FlowFixMe(>=0.53.0 site=react_native_fb,react_native_oss) This comment
+   * suppresses an error when upgrading Flow's support for React. To see the
+   * error delete this comment and run Flow. */
+  renderSectionHeader?: ({section: Object}) => ?React.Element<any>,
+  SeparatorComponent?: ?React.ComponentType<*>, // not supported yet
+
+  // Provide either `items` or `sections`
+  items?: ?Array<Item>, // By default, an Item is assumed to be {key: string}
+  // $FlowFixMe - Something is a little off with the type Array<Item>
+  sections?: ?Array<{key: string, data: Array<Item>}>,
+
+  /**
+   * If provided, a standard RefreshControl will be added for "Pull to Refresh" functionality. Make
+   * sure to also set the `refreshing` prop correctly.
+   */
+  onRefresh?: ?Function,
+  /**
+   * Set this true while waiting for new data from a refresh.
+   */
+  refreshing?: boolean,
+  /**
+   * If true, renders items next to each other horizontally instead of stacked vertically.
+   */
+  horizontal?: ?boolean,
+};
+type DefaultProps = {
+  keyExtractor: (item: Item, index: number) => string,
+};
+type Props = NormalProps & DefaultProps;
+
+/**
+ * This is just a wrapper around the legacy ListView that matches the new API of FlatList, but with
+ * some section support tacked on. It is recommended to just use FlatList directly, this component
+ * is mostly for debugging and performance comparison.
+ */
+class MetroListView extends React.Component<Props, $FlowFixMeState> {
+  scrollToEnd(params?: ?{animated?: ?boolean}) {
+    throw new Error('scrollToEnd not supported in legacy ListView.');
+  }
+  scrollToIndex(params: {
+    animated?: ?boolean,
+    index: number,
+    viewPosition?: number,
+  }) {
+    throw new Error('scrollToIndex not supported in legacy ListView.');
+  }
+  scrollToItem(params: {
+    animated?: ?boolean,
+    item: Item,
+    viewPosition?: number,
+  }) {
+    throw new Error('scrollToItem not supported in legacy ListView.');
+  }
+  scrollToLocation(params: {
+    animated?: ?boolean,
+    itemIndex: number,
+    sectionIndex: number,
+    viewOffset?: number,
+    viewPosition?: number,
+  }) {
+    throw new Error('scrollToLocation not supported in legacy ListView.');
+  }
+  scrollToOffset(params: {animated?: ?boolean, offset: number}) {
+    const {animated, offset} = params;
+    this._listRef.scrollTo(
+      this.props.horizontal ? {x: offset, animated} : {y: offset, animated},
+    );
+  }
+  getListRef() {
+    return this._listRef;
+  }
+  setNativeProps(props: Object) {
+    if (this._listRef) {
+      this._listRef.setNativeProps(props);
+    }
+  }
+  static defaultProps: DefaultProps = {
+    keyExtractor: (item, index) => item.key || String(index),
+    renderScrollComponent: (props: Props) => {
+      if (props.onRefresh) {
+        return (
+          <ScrollView
+            {...props}
+            refreshControl={
+              /* $FlowFixMe(>=0.53.0 site=react_native_fb,react_native_oss)
+               * This comment suppresses an error when upgrading Flow's support
+               * for React. To see the error delete this comment and run Flow.
+               */
+              <RefreshControl
+                refreshing={props.refreshing}
+                onRefresh={props.onRefresh}
+              />
+            }
+          />
+        );
+      } else {
+        return <ScrollView {...props} />;
+      }
+    },
+  };
+  state = this._computeState(this.props, {
+    ds: new ListView.DataSource({
+      rowHasChanged: (itemA, itemB) => true,
+      sectionHeaderHasChanged: () => true,
+      getSectionHeaderData: (dataBlob, sectionID) =>
+        this.state.sectionHeaderData[sectionID],
+    }),
+    sectionHeaderData: {},
+  });
+  UNSAFE_componentWillReceiveProps(newProps: Props) {
+    this.setState(state => this._computeState(newProps, state));
+  }
+  render() {
+    return (
+      <ListView
+        {...this.props}
+        dataSource={this.state.ds}
+        ref={this._captureRef}
+        renderRow={this._renderRow}
+        renderFooter={this.props.FooterComponent && this._renderFooter}
+        renderSectionHeader={this.props.sections && this._renderSectionHeader}
+        renderSeparator={this.props.SeparatorComponent && this._renderSeparator}
+      />
+    );
+  }
+  _listRef: ListView;
+  _captureRef = ref => {
+    this._listRef = ref;
+  };
+  _computeState(props: Props, state) {
+    const sectionHeaderData = {};
+    if (props.sections) {
+      invariant(!props.items, 'Cannot have both sections and items props.');
+      const sections = {};
+      props.sections.forEach((sectionIn, ii) => {
+        const sectionID = 's' + ii;
+        sections[sectionID] = sectionIn.data;
+        sectionHeaderData[sectionID] = sectionIn;
+      });
+      return {
+        ds: state.ds.cloneWithRowsAndSections(sections),
+        sectionHeaderData,
+      };
+    } else {
+      invariant(!props.sections, 'Cannot have both sections and items props.');
+      return {
+        ds: state.ds.cloneWithRows(props.items),
+        sectionHeaderData,
+      };
+    }
+  }
+  /* $FlowFixMe(>=0.53.0 site=react_native_fb,react_native_oss) This comment
+   * suppresses an error when upgrading Flow's support for React. To see the
+   * error delete this comment and run Flow. */
+  _renderFooter = () => <this.props.FooterComponent key="$footer" />;
+  _renderRow = (item, sectionID, rowID, highlightRow) => {
+    return this.props.renderItem({item, index: rowID});
+  };
+  _renderSectionHeader = (section, sectionID) => {
+    const {renderSectionHeader} = this.props;
+    invariant(
+      renderSectionHeader,
+      'Must provide renderSectionHeader with sections prop',
+    );
+    return renderSectionHeader({section});
+  };
+  _renderSeparator = (sID, rID) => (
+    /* $FlowFixMe(>=0.53.0 site=react_native_fb,react_native_oss) This comment
+     * suppresses an error when upgrading Flow's support for React. To see the
+     * error delete this comment and run Flow. */
+    <this.props.SeparatorComponent key={sID + rID} />
+  );
+}
+
+module.exports = MetroListView;

node_modules/react-native/Libraries/Lists/SectionList.js

@@ -0,0 +1,344 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @providesModule SectionList
+ * @flow
+ * @format
+ */
+'use strict';
+
+const MetroListView = require('MetroListView');
+const Platform = require('Platform');
+const React = require('React');
+const ScrollView = require('ScrollView');
+const VirtualizedSectionList = require('VirtualizedSectionList');
+
+import type {ViewToken} from 'ViewabilityHelper';
+import type {Props as VirtualizedSectionListProps} from 'VirtualizedSectionList';
+
+type Item = any;
+
+export type SectionBase<SectionItemT> = {
+  /**
+   * The data for rendering items in this section.
+   */
+  data: $ReadOnlyArray<SectionItemT>,
+  /**
+   * Optional key to keep track of section re-ordering. If you don't plan on re-ordering sections,
+   * the array index will be used by default.
+   */
+  key?: string,
+
+  // Optional props will override list-wide props just for this section.
+  renderItem?: ?(info: {
+    item: SectionItemT,
+    index: number,
+    section: SectionBase<SectionItemT>,
+    separators: {
+      highlight: () => void,
+      unhighlight: () => void,
+      updateProps: (select: 'leading' | 'trailing', newProps: Object) => void,
+    },
+  }) => ?React.Element<any>,
+  ItemSeparatorComponent?: ?React.ComponentType<any>,
+  keyExtractor?: (item: SectionItemT) => string,
+
+  // TODO: support more optional/override props
+  // onViewableItemsChanged?: ...
+};
+
+type RequiredProps<SectionT: SectionBase<any>> = {
+  /**
+   * The actual data to render, akin to the `data` prop in [`<FlatList>`](/react-native/docs/flatlist.html).
+   *
+   * General shape:
+   *
+   *     sections: $ReadOnlyArray<{
+   *       data: $ReadOnlyArray<SectionItem>,
+   *       renderItem?: ({item: SectionItem, ...}) => ?React.Element<*>,
+   *       ItemSeparatorComponent?: ?ReactClass<{highlighted: boolean, ...}>,
+   *     }>
+   */
+  sections: $ReadOnlyArray<SectionT>,
+};
+
+type OptionalProps<SectionT: SectionBase<any>> = {
+  /**
+   * Default renderer for every item in every section. Can be over-ridden on a per-section basis.
+   */
+  renderItem?: (info: {
+    item: Item,
+    index: number,
+    section: SectionT,
+    separators: {
+      highlight: () => void,
+      unhighlight: () => void,
+      updateProps: (select: 'leading' | 'trailing', newProps: Object) => void,
+    },
+  }) => ?React.Element<any>,
+  /**
+   * Rendered in between each item, but not at the top or bottom. By default, `highlighted`,
+   * `section`, and `[leading/trailing][Item/Separator]` 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>,
+  /**
+   * Rendered at the very beginning of the list. Can be a React Component Class, a render function, or
+   * a rendered element.
+   */
+  ListHeaderComponent?: ?(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 very end of the list. Can be a React Component Class, a render function, or
+   * a rendered element.
+   */
+  ListFooterComponent?: ?(React.ComponentType<any> | React.Element<any>),
+  /**
+   * Rendered at the top and bottom of each section (note this is different from
+   * `ItemSeparatorComponent` which is only rendered between items). These are intended to separate
+   * sections from the headers above and below and typically have the same highlight response as
+   * `ItemSeparatorComponent`. Also receives `highlighted`, `[leading/trailing][Item/Separator]`,
+   * and any custom props from `separators.updateProps`.
+   */
+  SectionSeparatorComponent?: ?React.ComponentType<any>,
+  /**
+   * 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,
+  /**
+   * 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,
+  /**
+   * Reverses the direction of scroll. Uses scale transforms of -1.
+   */
+  inverted?: ?boolean,
+  /**
+   * Used to extract a unique key for a given item at the specified index. Key is used for caching
+   * and as the react key to track item re-ordering. The default extractor checks item.key, then
+   * falls back to using the index, like react does. Note that this sets keys for each item, but
+   * each overall section still needs its own key.
+   */
+  keyExtractor: (item: Item, index: number) => string,
+  /**
+   * 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.
+   */
+  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,
+  /**
+   * Called when the viewability of rows changes, as defined by the
+   * `viewabilityConfig` prop.
+   */
+  onViewableItemsChanged?: ?(info: {
+    viewableItems: Array<ViewToken>,
+    changed: Array<ViewToken>,
+  }) => void,
+  /**
+   * 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,
+  /**
+   * Rendered at the top of each section. These stick to the top of the `ScrollView` by default on
+   * iOS. See `stickySectionHeadersEnabled`.
+   */
+  renderSectionHeader?: ?(info: {section: SectionT}) => ?React.Element<any>,
+  /**
+   * Rendered at the bottom of each section.
+   */
+  renderSectionFooter?: ?(info: {section: SectionT}) => ?React.Element<any>,
+  /**
+   * Makes section headers stick to the top of the screen until the next one pushes it off. Only
+   * enabled by default on iOS because that is the platform standard there.
+   */
+  stickySectionHeadersEnabled?: boolean,
+
+  legacyImplementation?: ?boolean,
+};
+
+export type Props<SectionT> = RequiredProps<SectionT> &
+  OptionalProps<SectionT> &
+  VirtualizedSectionListProps<SectionT>;
+
+const defaultProps = {
+  ...VirtualizedSectionList.defaultProps,
+  stickySectionHeadersEnabled: Platform.OS === 'ios',
+};
+
+type DefaultProps = typeof defaultProps;
+
+/**
+ * A performant interface for rendering sectioned lists, supporting the most handy features:
+ *
+ *  - Fully cross-platform.
+ *  - Configurable viewability callbacks.
+ *  - List header support.
+ *  - List footer support.
+ *  - Item separator support.
+ *  - Section header support.
+ *  - Section separator support.
+ *  - Heterogeneous data and item rendering support.
+ *  - Pull to Refresh.
+ *  - Scroll loading.
+ *
+ * If you don't need section support and want a simpler interface, use
+ * [`<FlatList>`](/react-native/docs/flatlist.html).
+ *
+ * Simple Examples:
+ *
+ *     <SectionList
+ *       renderItem={({item}) => <ListItem title={item} />}
+ *       renderSectionHeader={({section}) => <Header title={section.title} />}
+ *       sections={[ // homogeneous rendering between sections
+ *         {data: [...], title: ...},
+ *         {data: [...], title: ...},
+ *         {data: [...], title: ...},
+ *       ]}
+ *     />
+ *
+ *     <SectionList
+ *       sections={[ // heterogeneous rendering between sections
+ *         {data: [...], renderItem: ...},
+ *         {data: [...], renderItem: ...},
+ *         {data: [...], renderItem: ...},
+ *       ]}
+ *     />
+ *
+ * This is a convenience wrapper around [`<VirtualizedList>`](docs/virtualizedlist.html),
+ * and thus inherits its props (as well as those of `ScrollView`) that aren't explicitly listed
+ * here, along with the following caveats:
+ *
+ * - Internal state is not preserved when content scrolls out of the render window. Make sure all
+ *   your data is captured in the item data or external stores like Flux, Redux, or Relay.
+ * - This is a `PureComponent` which means that it will not re-render if `props` remain shallow-
+ *   equal. Make sure that everything your `renderItem` function depends on is passed as a prop
+ *   (e.g. `extraData`) that is not `===` after updates, otherwise your UI may not update on
+ *   changes. This includes the `data` prop and parent component state.
+ * - In order to constrain memory and enable smooth scrolling, content is rendered asynchronously
+ *   offscreen. This means it's possible to scroll faster than the fill rate and momentarily see
+ *   blank content. This is a tradeoff that can be adjusted to suit the needs of each application,
+ *   and we are working on improving it behind the scenes.
+ * - By default, the list looks for a `key` prop on each item and uses that for the React key.
+ *   Alternatively, you can provide a custom `keyExtractor` prop.
+ *
+ */
+class SectionList<SectionT: SectionBase<any>> extends React.PureComponent<
+  Props<SectionT>,
+  void,
+> {
+  props: Props<SectionT>;
+  static defaultProps: DefaultProps = defaultProps;
+
+  /**
+   * Scrolls to the item at the specified `sectionIndex` and `itemIndex` (within the section)
+   * positioned in the viewable area such that `viewPosition` 0 places it at the top (and may be
+   * covered by a sticky header), 1 at the bottom, and 0.5 centered in the middle. `viewOffset` is a
+   * fixed number of pixels to offset the final target position, e.g. to compensate for sticky
+   * headers.
+   *
+   * Note: cannot scroll to locations outside the render window without specifying the
+   * `getItemLayout` prop.
+   */
+  scrollToLocation(params: {
+    animated?: ?boolean,
+    itemIndex: number,
+    sectionIndex: number,
+    viewOffset?: number,
+    viewPosition?: number,
+  }) {
+    this._wrapperListRef.scrollToLocation(params);
+  }
+
+  /**
+   * Tells the list an interaction has occurred, which should trigger viewability calculations, e.g.
+   * if `waitForInteractions` is true and the user has not scrolled. This is typically called by
+   * taps on items or by navigation actions.
+   */
+  recordInteraction() {
+    const listRef = this._wrapperListRef && this._wrapperListRef.getListRef();
+    listRef && listRef.recordInteraction();
+  }
+
+  /**
+   * Displays the scroll indicators momentarily.
+   *
+   * @platform ios
+   */
+  flashScrollIndicators() {
+    const listRef = this._wrapperListRef && this._wrapperListRef.getListRef();
+    listRef && listRef.flashScrollIndicators();
+  }
+
+  /**
+   * Provides a handle to the underlying scroll responder.
+   */
+  getScrollResponder(): ?ScrollView {
+    const listRef = this._wrapperListRef && this._wrapperListRef.getListRef();
+    if (listRef) {
+      return listRef.getScrollResponder();
+    }
+  }
+
+  getScrollableNode() {
+    const listRef = this._wrapperListRef && this._wrapperListRef.getListRef();
+    if (listRef) {
+      return listRef.getScrollableNode();
+    }
+  }
+
+  setNativeProps(props: Object) {
+    const listRef = this._wrapperListRef && this._wrapperListRef.getListRef();
+    if (listRef) {
+      listRef.setNativeProps(props);
+    }
+  }
+
+  render() {
+    const List = this.props.legacyImplementation
+      ? MetroListView
+      : VirtualizedSectionList;
+    /* $FlowFixMe(>=0.66.0 site=react_native_fb) This comment suppresses an
+     * error found when Flow v0.66 was deployed. To see the error delete this
+     * comment and run Flow. */
+    return <List {...this.props} ref={this._captureRef} />;
+  }
+
+  _wrapperListRef: MetroListView | VirtualizedSectionList<any>;
+  _captureRef = ref => {
+    /* $FlowFixMe(>=0.53.0 site=react_native_fb,react_native_oss) This comment
+     * suppresses an error when upgrading Flow's support for React. To see the
+     * error delete this comment and run Flow. */
+    this._wrapperListRef = ref;
+  };
+}
+
+module.exports = SectionList;

node_modules/react-native/Libraries/Lists/ViewabilityHelper.js

@@ -0,0 +1,306 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @providesModule ViewabilityHelper
+ * @flow
+ * @format
+ */
+'use strict';
+
+const invariant = require('fbjs/lib/invariant');
+
+export type ViewToken = {
+  item: any,
+  key: string,
+  index: ?number,
+  isViewable: boolean,
+  section?: any,
+};
+
+export type ViewabilityConfigCallbackPair = {
+  viewabilityConfig: ViewabilityConfig,
+  onViewableItemsChanged: (info: {
+    viewableItems: Array<ViewToken>,
+    changed: Array<ViewToken>,
+  }) => void,
+};
+
+export type ViewabilityConfig = {|
+  /**
+   * Minimum amount of time (in milliseconds) that an item must be physically viewable before the
+   * viewability callback will be fired. A high number means that scrolling through content without
+   * stopping will not mark the content as viewable.
+   */
+  minimumViewTime?: number,
+
+  /**
+   * Percent of viewport that must be covered for a partially occluded item to count as
+   * "viewable", 0-100. Fully visible items are always considered viewable. A value of 0 means
+   * that a single pixel in the viewport makes the item viewable, and a value of 100 means that
+   * an item must be either entirely visible or cover the entire viewport to count as viewable.
+   */
+  viewAreaCoveragePercentThreshold?: number,
+
+  /**
+   * Similar to `viewAreaPercentThreshold`, but considers the percent of the item that is visible,
+   * rather than the fraction of the viewable area it covers.
+   */
+  itemVisiblePercentThreshold?: number,
+
+  /**
+   * Nothing is considered viewable until the user scrolls or `recordInteraction` is called after
+   * render.
+   */
+  waitForInteraction?: boolean,
+|};
+
+/**
+ * A Utility class for calculating viewable items based on current metrics like scroll position and
+ * layout.
+ *
+ * An item is said to be in a "viewable" state when any of the following
+ * is true for longer than `minimumViewTime` milliseconds (after an interaction if `waitForInteraction`
+ * is true):
+ *
+ * - Occupying >= `viewAreaCoveragePercentThreshold` of the view area XOR fraction of the item
+ *   visible in the view area >= `itemVisiblePercentThreshold`.
+ * - Entirely visible on screen
+ */
+class ViewabilityHelper {
+  _config: ViewabilityConfig;
+  _hasInteracted: boolean = false;
+  /* $FlowFixMe(>=0.63.0 site=react_native_fb) This comment suppresses an error
+   * found when Flow v0.63 was deployed. To see the error delete this comment
+   * and run Flow. */
+  _timers: Set<number> = new Set();
+  _viewableIndices: Array<number> = [];
+  _viewableItems: Map<string, ViewToken> = new Map();
+
+  constructor(
+    config: ViewabilityConfig = {viewAreaCoveragePercentThreshold: 0},
+  ) {
+    this._config = config;
+  }
+
+  /**
+   * Cleanup, e.g. on unmount. Clears any pending timers.
+   */
+  dispose() {
+    this._timers.forEach(clearTimeout);
+  }
+
+  /**
+   * Determines which items are viewable based on the current metrics and config.
+   */
+  computeViewableItems(
+    itemCount: number,
+    scrollOffset: number,
+    viewportHeight: number,
+    getFrameMetrics: (index: number) => ?{length: number, offset: number},
+    renderRange?: {first: number, last: number}, // Optional optimization to reduce the scan size
+  ): Array<number> {
+    const {
+      itemVisiblePercentThreshold,
+      viewAreaCoveragePercentThreshold,
+    } = this._config;
+    const viewAreaMode = viewAreaCoveragePercentThreshold != null;
+    const viewablePercentThreshold = viewAreaMode
+      ? viewAreaCoveragePercentThreshold
+      : itemVisiblePercentThreshold;
+    invariant(
+      viewablePercentThreshold != null &&
+        (itemVisiblePercentThreshold != null) !==
+          (viewAreaCoveragePercentThreshold != null),
+      'Must set exactly one of itemVisiblePercentThreshold or viewAreaCoveragePercentThreshold',
+    );
+    const viewableIndices = [];
+    if (itemCount === 0) {
+      return viewableIndices;
+    }
+    let firstVisible = -1;
+    const {first, last} = renderRange || {first: 0, last: itemCount - 1};
+    invariant(
+      last < itemCount,
+      'Invalid render range ' + JSON.stringify({renderRange, itemCount}),
+    );
+    for (let idx = first; idx <= last; idx++) {
+      const metrics = getFrameMetrics(idx);
+      if (!metrics) {
+        continue;
+      }
+      const top = metrics.offset - scrollOffset;
+      const bottom = top + metrics.length;
+      if (top < viewportHeight && bottom > 0) {
+        firstVisible = idx;
+        if (
+          _isViewable(
+            viewAreaMode,
+            viewablePercentThreshold,
+            top,
+            bottom,
+            viewportHeight,
+            metrics.length,
+          )
+        ) {
+          viewableIndices.push(idx);
+        }
+      } else if (firstVisible >= 0) {
+        break;
+      }
+    }
+    return viewableIndices;
+  }
+
+  /**
+   * Figures out which items are viewable and how that has changed from before and calls
+   * `onViewableItemsChanged` as appropriate.
+   */
+  onUpdate(
+    itemCount: number,
+    scrollOffset: number,
+    viewportHeight: number,
+    getFrameMetrics: (index: number) => ?{length: number, offset: number},
+    createViewToken: (index: number, isViewable: boolean) => ViewToken,
+    onViewableItemsChanged: ({
+      viewableItems: Array<ViewToken>,
+      changed: Array<ViewToken>,
+    }) => void,
+    renderRange?: {first: number, last: number}, // Optional optimization to reduce the scan size
+  ): void {
+    if (
+      (this._config.waitForInteraction && !this._hasInteracted) ||
+      itemCount === 0 ||
+      !getFrameMetrics(0)
+    ) {
+      return;
+    }
+    let viewableIndices = [];
+    if (itemCount) {
+      viewableIndices = this.computeViewableItems(
+        itemCount,
+        scrollOffset,
+        viewportHeight,
+        getFrameMetrics,
+        renderRange,
+      );
+    }
+    if (
+      this._viewableIndices.length === viewableIndices.length &&
+      this._viewableIndices.every((v, ii) => v === viewableIndices[ii])
+    ) {
+      // We might get a lot of scroll events where visibility doesn't change and we don't want to do
+      // extra work in those cases.
+      return;
+    }
+    this._viewableIndices = viewableIndices;
+    if (this._config.minimumViewTime) {
+      const handle = setTimeout(() => {
+        this._timers.delete(handle);
+        this._onUpdateSync(
+          viewableIndices,
+          onViewableItemsChanged,
+          createViewToken,
+        );
+      }, this._config.minimumViewTime);
+      this._timers.add(handle);
+    } else {
+      this._onUpdateSync(
+        viewableIndices,
+        onViewableItemsChanged,
+        createViewToken,
+      );
+    }
+  }
+
+  /**
+   * clean-up cached _viewableIndices to evaluate changed items on next update
+   */
+  resetViewableIndices() {
+    this._viewableIndices = [];
+  }
+
+  /**
+   * Records that an interaction has happened even if there has been no scroll.
+   */
+  recordInteraction() {
+    this._hasInteracted = true;
+  }
+
+  _onUpdateSync(
+    viewableIndicesToCheck,
+    onViewableItemsChanged,
+    createViewToken,
+  ) {
+    // Filter out indices that have gone out of view since this call was scheduled.
+    viewableIndicesToCheck = viewableIndicesToCheck.filter(ii =>
+      this._viewableIndices.includes(ii),
+    );
+    const prevItems = this._viewableItems;
+    const nextItems = new Map(
+      viewableIndicesToCheck.map(ii => {
+        const viewable = createViewToken(ii, true);
+        return [viewable.key, viewable];
+      }),
+    );
+
+    const changed = [];
+    for (const [key, viewable] of nextItems) {
+      if (!prevItems.has(key)) {
+        changed.push(viewable);
+      }
+    }
+    for (const [key, viewable] of prevItems) {
+      if (!nextItems.has(key)) {
+        changed.push({...viewable, isViewable: false});
+      }
+    }
+    if (changed.length > 0) {
+      this._viewableItems = nextItems;
+      onViewableItemsChanged({
+        viewableItems: Array.from(nextItems.values()),
+        changed,
+        viewabilityConfig: this._config,
+      });
+    }
+  }
+}
+
+function _isViewable(
+  viewAreaMode: boolean,
+  viewablePercentThreshold: number,
+  top: number,
+  bottom: number,
+  viewportHeight: number,
+  itemLength: number,
+): boolean {
+  if (_isEntirelyVisible(top, bottom, viewportHeight)) {
+    return true;
+  } else {
+    const pixels = _getPixelsVisible(top, bottom, viewportHeight);
+    const percent =
+      100 * (viewAreaMode ? pixels / viewportHeight : pixels / itemLength);
+    return percent >= viewablePercentThreshold;
+  }
+}
+
+function _getPixelsVisible(
+  top: number,
+  bottom: number,
+  viewportHeight: number,
+): number {
+  const visibleHeight = Math.min(bottom, viewportHeight) - Math.max(top, 0);
+  return Math.max(0, visibleHeight);
+}
+
+function _isEntirelyVisible(
+  top: number,
+  bottom: number,
+  viewportHeight: number,
+): boolean {
+  return top >= 0 && bottom <= viewportHeight && bottom > top;
+}
+
+module.exports = ViewabilityHelper;

node_modules/react-native/Libraries/Lists/VirtualizeUtils.js

@@ -0,0 +1,217 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @providesModule VirtualizeUtils
+ * @flow
+ * @format
+ */
+'use strict';
+
+const invariant = require('fbjs/lib/invariant');
+
+/**
+ * Used to find the indices of the frames that overlap the given offsets. Useful for finding the
+ * items that bound different windows of content, such as the visible area or the buffered overscan
+ * area.
+ */
+function elementsThatOverlapOffsets(
+  offsets: Array<number>,
+  itemCount: number,
+  getFrameMetrics: (index: number) => {length: number, offset: number},
+): Array<number> {
+  const out = [];
+  let outLength = 0;
+  for (let ii = 0; ii < itemCount; ii++) {
+    const frame = getFrameMetrics(ii);
+    const trailingOffset = frame.offset + frame.length;
+    for (let kk = 0; kk < offsets.length; kk++) {
+      if (out[kk] == null && trailingOffset >= offsets[kk]) {
+        out[kk] = ii;
+        outLength++;
+        if (kk === offsets.length - 1) {
+          invariant(
+            outLength === offsets.length,
+            'bad offsets input, should be in increasing order: %s',
+            JSON.stringify(offsets),
+          );
+          return out;
+        }
+      }
+    }
+  }
+  return out;
+}
+
+/**
+ * Computes the number of elements in the `next` range that are new compared to the `prev` range.
+ * Handy for calculating how many new items will be rendered when the render window changes so we
+ * can restrict the number of new items render at once so that content can appear on the screen
+ * faster.
+ */
+function newRangeCount(
+  prev: {first: number, last: number},
+  next: {first: number, last: number},
+): number {
+  return (
+    next.last -
+    next.first +
+    1 -
+    Math.max(
+      0,
+      1 + Math.min(next.last, prev.last) - Math.max(next.first, prev.first),
+    )
+  );
+}
+
+/**
+ * Custom logic for determining which items should be rendered given the current frame and scroll
+ * metrics, as well as the previous render state. The algorithm may evolve over time, but generally
+ * prioritizes the visible area first, then expands that with overscan regions ahead and behind,
+ * biased in the direction of scroll.
+ */
+function computeWindowedRenderLimits(
+  props: {
+    data: any,
+    getItemCount: (data: any) => number,
+    maxToRenderPerBatch: number,
+    windowSize: number,
+  },
+  prev: {first: number, last: number},
+  getFrameMetricsApprox: (index: number) => {length: number, offset: number},
+  scrollMetrics: {
+    dt: number,
+    offset: number,
+    velocity: number,
+    visibleLength: number,
+  },
+): {first: number, last: number} {
+  const {data, getItemCount, maxToRenderPerBatch, windowSize} = props;
+  const itemCount = getItemCount(data);
+  if (itemCount === 0) {
+    return prev;
+  }
+  const {offset, velocity, visibleLength} = scrollMetrics;
+
+  // Start with visible area, then compute maximum overscan region by expanding from there, biased
+  // in the direction of scroll. Total overscan area is capped, which should cap memory consumption
+  // too.
+  const visibleBegin = Math.max(0, offset);
+  const visibleEnd = visibleBegin + visibleLength;
+  const overscanLength = (windowSize - 1) * visibleLength;
+
+  // Considering velocity seems to introduce more churn than it's worth.
+  const leadFactor = 0.5; // Math.max(0, Math.min(1, velocity / 25 + 0.5));
+
+  const fillPreference =
+    velocity > 1 ? 'after' : velocity < -1 ? 'before' : 'none';
+
+  const overscanBegin = Math.max(
+    0,
+    visibleBegin - (1 - leadFactor) * overscanLength,
+  );
+  const overscanEnd = Math.max(0, visibleEnd + leadFactor * overscanLength);
+
+  const lastItemOffset = getFrameMetricsApprox(itemCount - 1).offset;
+  if (lastItemOffset < overscanBegin) {
+    // Entire list is before our overscan window
+    return {
+      first: Math.max(0, itemCount - 1 - maxToRenderPerBatch),
+      last: itemCount - 1,
+    };
+  }
+
+  // Find the indices that correspond to the items at the render boundaries we're targeting.
+  let [overscanFirst, first, last, overscanLast] = elementsThatOverlapOffsets(
+    [overscanBegin, visibleBegin, visibleEnd, overscanEnd],
+    props.getItemCount(props.data),
+    getFrameMetricsApprox,
+  );
+  overscanFirst = overscanFirst == null ? 0 : overscanFirst;
+  first = first == null ? Math.max(0, overscanFirst) : first;
+  overscanLast = overscanLast == null ? itemCount - 1 : overscanLast;
+  last =
+    last == null
+      ? Math.min(overscanLast, first + maxToRenderPerBatch - 1)
+      : last;
+  const visible = {first, last};
+
+  // We want to limit the number of new cells we're rendering per batch so that we can fill the
+  // content on the screen quickly. If we rendered the entire overscan window at once, the user
+  // could be staring at white space for a long time waiting for a bunch of offscreen content to
+  // render.
+  let newCellCount = newRangeCount(prev, visible);
+
+  while (true) {
+    if (first <= overscanFirst && last >= overscanLast) {
+      // If we fill the entire overscan range, we're done.
+      break;
+    }
+    const maxNewCells = newCellCount >= maxToRenderPerBatch;
+    const firstWillAddMore = first <= prev.first || first > prev.last;
+    const firstShouldIncrement =
+      first > overscanFirst && (!maxNewCells || !firstWillAddMore);
+    const lastWillAddMore = last >= prev.last || last < prev.first;
+    const lastShouldIncrement =
+      last < overscanLast && (!maxNewCells || !lastWillAddMore);
+    if (maxNewCells && !firstShouldIncrement && !lastShouldIncrement) {
+      // We only want to stop if we've hit maxNewCells AND we cannot increment first or last
+      // without rendering new items. This let's us preserve as many already rendered items as
+      // possible, reducing render churn and keeping the rendered overscan range as large as
+      // possible.
+      break;
+    }
+    if (
+      firstShouldIncrement &&
+      !(fillPreference === 'after' && lastShouldIncrement && lastWillAddMore)
+    ) {
+      if (firstWillAddMore) {
+        newCellCount++;
+      }
+      first--;
+    }
+    if (
+      lastShouldIncrement &&
+      !(fillPreference === 'before' && firstShouldIncrement && firstWillAddMore)
+    ) {
+      if (lastWillAddMore) {
+        newCellCount++;
+      }
+      last++;
+    }
+  }
+  if (
+    !(
+      last >= first &&
+      first >= 0 &&
+      last < itemCount &&
+      first >= overscanFirst &&
+      last <= overscanLast &&
+      first <= visible.first &&
+      last >= visible.last
+    )
+  ) {
+    throw new Error(
+      'Bad window calculation ' +
+        JSON.stringify({
+          first,
+          last,
+          itemCount,
+          overscanFirst,
+          overscanLast,
+          visible,
+        }),
+    );
+  }
+  return {first, last};
+}
+
+const VirtualizeUtils = {
+  computeWindowedRenderLimits,
+  elementsThatOverlapOffsets,
+  newRangeCount,
+};
+
+module.exports = VirtualizeUtils;

node_modules/react-native/Libraries/Lists/VirtualizedSectionList.js

@@ -0,0 +1,527 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @providesModule VirtualizedSectionList
+ * @flow
+ * @format
+ */
+'use strict';
+
+const React = require('React');
+const View = require('View');
+const VirtualizedList = require('VirtualizedList');
+
+const invariant = require('fbjs/lib/invariant');
+
+import type {ViewToken} from 'ViewabilityHelper';
+import type {Props as VirtualizedListProps} from 'VirtualizedList';
+
+type Item = any;
+type SectionItem = any;
+
+type SectionBase = {
+  // Must be provided directly on each section.
+  data: $ReadOnlyArray<SectionItem>,
+  key?: string,
+
+  // Optional props will override list-wide props just for this section.
+  renderItem?: ?({
+    item: SectionItem,
+    index: number,
+    section: SectionBase,
+    separators: {
+      highlight: () => void,
+      unhighlight: () => void,
+      updateProps: (select: 'leading' | 'trailing', newProps: Object) => void,
+    },
+  }) => ?React.Element<any>,
+  ItemSeparatorComponent?: ?React.ComponentType<*>,
+  keyExtractor?: (item: SectionItem, index: ?number) => string,
+
+  // TODO: support more optional/override props
+  // FooterComponent?: ?ReactClass<*>,
+  // HeaderComponent?: ?ReactClass<*>,
+  // onViewableItemsChanged?: ({viewableItems: Array<ViewToken>, changed: Array<ViewToken>}) => void,
+};
+
+type RequiredProps<SectionT: SectionBase> = {
+  sections: $ReadOnlyArray<SectionT>,
+};
+
+type OptionalProps<SectionT: SectionBase> = {
+  /**
+   * Rendered after the last item in the last section.
+   */
+  ListFooterComponent?: ?(React.ComponentType<*> | React.Element<any>),
+  /**
+   * Rendered at the very beginning of the list.
+   */
+  ListHeaderComponent?: ?(React.ComponentType<*> | React.Element<any>),
+  /**
+   * Default renderer for every item in every section.
+   */
+  renderItem?: (info: {
+    item: Item,
+    index: number,
+    section: SectionT,
+    separators: {
+      highlight: () => void,
+      unhighlight: () => void,
+      updateProps: (select: 'leading' | 'trailing', newProps: Object) => void,
+    },
+  }) => ?React.Element<any>,
+  /**
+   * Rendered at the top of each section.
+   */
+  renderSectionHeader?: ?({section: SectionT}) => ?React.Element<any>,
+  /**
+   * Rendered at the bottom of each section.
+   */
+  renderSectionFooter?: ?({section: SectionT}) => ?React.Element<any>,
+  /**
+   * Rendered at the bottom of every Section, except the very last one, in place of the normal
+   * ItemSeparatorComponent.
+   */
+  SectionSeparatorComponent?: ?React.ComponentType<*>,
+  /**
+   * Rendered at the bottom of every Item except the very last one in the last section.
+   */
+  ItemSeparatorComponent?: ?React.ComponentType<*>,
+  /**
+   * Warning: Virtualization can drastically improve memory consumption for long lists, but trashes
+   * the state of items when they scroll out of the render window, so make sure all relavent data is
+   * stored outside of the recursive `renderItem` instance tree.
+   */
+  enableVirtualization?: ?boolean,
+  keyExtractor: (item: Item, index: number) => string,
+  onEndReached?: ?({distanceFromEnd: number}) => void,
+  /**
+   * If provided, a standard RefreshControl will be added for "Pull to Refresh" functionality. Make
+   * sure to also set the `refreshing` prop correctly.
+   */
+  onRefresh?: ?Function,
+  /**
+   * Called when the viewability of rows changes, as defined by the
+   * `viewabilityConfig` prop.
+   */
+  onViewableItemsChanged?: ?({
+    viewableItems: Array<ViewToken>,
+    changed: Array<ViewToken>,
+  }) => void,
+  /**
+   * Set this true while waiting for new data from a refresh.
+   */
+  refreshing?: ?boolean,
+};
+
+export type Props<SectionT> = RequiredProps<SectionT> &
+  OptionalProps<SectionT> &
+  VirtualizedListProps;
+
+type DefaultProps = typeof VirtualizedList.defaultProps & {
+  data: $ReadOnlyArray<Item>,
+};
+type State = {childProps: VirtualizedListProps};
+
+/**
+ * Right now this just flattens everything into one list and uses VirtualizedList under the
+ * hood. The only operation that might not scale well is concatting the data arrays of all the
+ * sections when new props are received, which should be plenty fast for up to ~10,000 items.
+ */
+class VirtualizedSectionList<SectionT: SectionBase> extends React.PureComponent<
+  Props<SectionT>,
+  State,
+> {
+  props: Props<SectionT>;
+
+  state: State;
+
+  static defaultProps: DefaultProps = {
+    ...VirtualizedList.defaultProps,
+    data: [],
+  };
+
+  scrollToLocation(params: {
+    animated?: ?boolean,
+    itemIndex: number,
+    sectionIndex: number,
+    viewPosition?: number,
+  }) {
+    let index = params.itemIndex + 1;
+    for (let ii = 0; ii < params.sectionIndex; ii++) {
+      index += this.props.sections[ii].data.length + 2;
+    }
+    const toIndexParams = {
+      ...params,
+      index,
+    };
+    this._listRef.scrollToIndex(toIndexParams);
+  }
+
+  getListRef(): VirtualizedList {
+    return this._listRef;
+  }
+
+  _keyExtractor = (item: Item, index: number) => {
+    const info = this._subExtractor(index);
+    return (info && info.key) || String(index);
+  };
+
+  _subExtractor(
+    index: number,
+  ): ?{
+    section: SectionT,
+    key: string, // Key of the section or combined key for section + item
+    index: ?number, // Relative index within the section
+    header?: ?boolean, // True if this is the section header
+    leadingItem?: ?Item,
+    leadingSection?: ?SectionT,
+    trailingItem?: ?Item,
+    trailingSection?: ?SectionT,
+  } {
+    let itemIndex = index;
+    const defaultKeyExtractor = this.props.keyExtractor;
+    for (let ii = 0; ii < this.props.sections.length; ii++) {
+      const section = this.props.sections[ii];
+      const key = section.key || String(ii);
+      itemIndex -= 1; // The section adds an item for the header
+      if (itemIndex >= section.data.length + 1) {
+        itemIndex -= section.data.length + 1; // The section adds an item for the footer.
+      } else if (itemIndex === -1) {
+        return {
+          section,
+          key: key + ':header',
+          index: null,
+          header: true,
+          trailingSection: this.props.sections[ii + 1],
+        };
+      } else if (itemIndex === section.data.length) {
+        return {
+          section,
+          key: key + ':footer',
+          index: null,
+          header: false,
+          trailingSection: this.props.sections[ii + 1],
+        };
+      } else {
+        const keyExtractor = section.keyExtractor || defaultKeyExtractor;
+        return {
+          section,
+          key: key + ':' + keyExtractor(section.data[itemIndex], itemIndex),
+          index: itemIndex,
+          leadingItem: section.data[itemIndex - 1],
+          leadingSection: this.props.sections[ii - 1],
+          trailingItem: section.data[itemIndex + 1],
+          trailingSection: this.props.sections[ii + 1],
+        };
+      }
+    }
+  }
+
+  _convertViewable = (viewable: ViewToken): ?ViewToken => {
+    invariant(viewable.index != null, 'Received a broken ViewToken');
+    const info = this._subExtractor(viewable.index);
+    if (!info) {
+      return null;
+    }
+    const keyExtractor = info.section.keyExtractor || this.props.keyExtractor;
+    return {
+      ...viewable,
+      index: info.index,
+      /* $FlowFixMe(>=0.63.0 site=react_native_fb) This comment suppresses an
+       * error found when Flow v0.63 was deployed. To see the error delete this
+       * comment and run Flow. */
+      key: keyExtractor(viewable.item, info.index),
+      section: info.section,
+    };
+  };
+
+  _onViewableItemsChanged = ({
+    viewableItems,
+    changed,
+  }: {
+    viewableItems: Array<ViewToken>,
+    changed: Array<ViewToken>,
+  }) => {
+    if (this.props.onViewableItemsChanged) {
+      this.props.onViewableItemsChanged({
+        viewableItems: viewableItems
+          .map(this._convertViewable, this)
+          .filter(Boolean),
+        changed: changed.map(this._convertViewable, this).filter(Boolean),
+      });
+    }
+  };
+
+  _renderItem = ({item, index}: {item: Item, index: number}) => {
+    const info = this._subExtractor(index);
+    if (!info) {
+      return null;
+    }
+    const infoIndex = info.index;
+    if (infoIndex == null) {
+      const {section} = info;
+      if (info.header === true) {
+        const {renderSectionHeader} = this.props;
+        return renderSectionHeader ? renderSectionHeader({section}) : null;
+      } else {
+        const {renderSectionFooter} = this.props;
+        return renderSectionFooter ? renderSectionFooter({section}) : null;
+      }
+    } else {
+      const renderItem = info.section.renderItem || this.props.renderItem;
+      const SeparatorComponent = this._getSeparatorComponent(index, info);
+      invariant(renderItem, 'no renderItem!');
+      return (
+        <ItemWithSeparator
+          SeparatorComponent={SeparatorComponent}
+          LeadingSeparatorComponent={
+            infoIndex === 0 ? this.props.SectionSeparatorComponent : undefined
+          }
+          cellKey={info.key}
+          index={infoIndex}
+          item={item}
+          leadingItem={info.leadingItem}
+          leadingSection={info.leadingSection}
+          onUpdateSeparator={this._onUpdateSeparator}
+          prevCellKey={(this._subExtractor(index - 1) || {}).key}
+          ref={ref => {
+            this._cellRefs[info.key] = ref;
+          }}
+          renderItem={renderItem}
+          section={info.section}
+          trailingItem={info.trailingItem}
+          trailingSection={info.trailingSection}
+        />
+      );
+    }
+  };
+
+  _onUpdateSeparator = (key: string, newProps: Object) => {
+    const ref = this._cellRefs[key];
+    ref && ref.updateSeparatorProps(newProps);
+  };
+
+  _getSeparatorComponent(
+    index: number,
+    info?: ?Object,
+  ): ?React.ComponentType<*> {
+    info = info || this._subExtractor(index);
+    if (!info) {
+      return null;
+    }
+    const ItemSeparatorComponent =
+      info.section.ItemSeparatorComponent || this.props.ItemSeparatorComponent;
+    const {SectionSeparatorComponent} = this.props;
+    const isLastItemInList = index === this.state.childProps.getItemCount() - 1;
+    const isLastItemInSection = info.index === info.section.data.length - 1;
+    if (SectionSeparatorComponent && isLastItemInSection) {
+      return SectionSeparatorComponent;
+    }
+    if (ItemSeparatorComponent && !isLastItemInSection && !isLastItemInList) {
+      return ItemSeparatorComponent;
+    }
+    return null;
+  }
+
+  _computeState(props: Props<SectionT>): State {
+    const offset = props.ListHeaderComponent ? 1 : 0;
+    const stickyHeaderIndices = [];
+    const itemCount = props.sections.reduce((v, section) => {
+      stickyHeaderIndices.push(v + offset);
+      return v + section.data.length + 2; // Add two for the section header and footer.
+    }, 0);
+
+    return {
+      childProps: {
+        ...props,
+        renderItem: this._renderItem,
+        ItemSeparatorComponent: undefined, // Rendered with renderItem
+        data: props.sections,
+        getItemCount: () => itemCount,
+        getItem,
+        keyExtractor: this._keyExtractor,
+        onViewableItemsChanged: props.onViewableItemsChanged
+          ? this._onViewableItemsChanged
+          : undefined,
+        stickyHeaderIndices: props.stickySectionHeadersEnabled
+          ? stickyHeaderIndices
+          : undefined,
+      },
+    };
+  }
+
+  constructor(props: Props<SectionT>, context: Object) {
+    super(props, context);
+    this.state = this._computeState(props);
+  }
+
+  UNSAFE_componentWillReceiveProps(nextProps: Props<SectionT>) {
+    this.setState(this._computeState(nextProps));
+  }
+
+  render() {
+    return (
+      <VirtualizedList {...this.state.childProps} ref={this._captureRef} />
+    );
+  }
+
+  _cellRefs = {};
+  _listRef: VirtualizedList;
+  _captureRef = ref => {
+    /* $FlowFixMe(>=0.53.0 site=react_native_fb,react_native_oss) This comment
+     * suppresses an error when upgrading Flow's support for React. To see the
+     * error delete this comment and run Flow. */
+    this._listRef = ref;
+  };
+}
+
+type ItemWithSeparatorProps = {
+  LeadingSeparatorComponent: ?React.ComponentType<*>,
+  SeparatorComponent: ?React.ComponentType<*>,
+  cellKey: string,
+  index: number,
+  item: Item,
+  onUpdateSeparator: (cellKey: string, newProps: Object) => void,
+  prevCellKey?: ?string,
+  renderItem: Function,
+  section: Object,
+  leadingItem: ?Item,
+  leadingSection: ?Object,
+  trailingItem: ?Item,
+  trailingSection: ?Object,
+};
+
+class ItemWithSeparator extends React.Component<
+  ItemWithSeparatorProps,
+  $FlowFixMeState,
+> {
+  state = {
+    separatorProps: {
+      highlighted: false,
+      leadingItem: this.props.item,
+      leadingSection: this.props.leadingSection,
+      section: this.props.section,
+      trailingItem: this.props.trailingItem,
+      trailingSection: this.props.trailingSection,
+    },
+    leadingSeparatorProps: {
+      highlighted: false,
+      leadingItem: this.props.leadingItem,
+      leadingSection: this.props.leadingSection,
+      section: this.props.section,
+      trailingItem: this.props.item,
+      trailingSection: this.props.trailingSection,
+    },
+  };
+
+  _separators = {
+    highlight: () => {
+      ['leading', 'trailing'].forEach(s =>
+        this._separators.updateProps(s, {highlighted: true}),
+      );
+    },
+    unhighlight: () => {
+      ['leading', 'trailing'].forEach(s =>
+        this._separators.updateProps(s, {highlighted: false}),
+      );
+    },
+    updateProps: (select: 'leading' | 'trailing', newProps: Object) => {
+      const {LeadingSeparatorComponent, cellKey, prevCellKey} = this.props;
+      if (select === 'leading' && LeadingSeparatorComponent) {
+        this.setState(state => ({
+          leadingSeparatorProps: {...state.leadingSeparatorProps, ...newProps},
+        }));
+      } else {
+        this.props.onUpdateSeparator(
+          (select === 'leading' && prevCellKey) || cellKey,
+          newProps,
+        );
+      }
+    },
+  };
+
+  UNSAFE_componentWillReceiveProps(props: ItemWithSeparatorProps) {
+    this.setState(state => ({
+      separatorProps: {
+        ...this.state.separatorProps,
+        leadingItem: props.item,
+        leadingSection: props.leadingSection,
+        section: props.section,
+        trailingItem: props.trailingItem,
+        trailingSection: props.trailingSection,
+      },
+      leadingSeparatorProps: {
+        ...this.state.leadingSeparatorProps,
+        leadingItem: props.leadingItem,
+        leadingSection: props.leadingSection,
+        section: props.section,
+        trailingItem: props.item,
+        trailingSection: props.trailingSection,
+      },
+    }));
+  }
+
+  updateSeparatorProps(newProps: Object) {
+    this.setState(state => ({
+      separatorProps: {...state.separatorProps, ...newProps},
+    }));
+  }
+
+  render() {
+    const {
+      LeadingSeparatorComponent,
+      SeparatorComponent,
+      item,
+      index,
+      section,
+    } = this.props;
+    const element = this.props.renderItem({
+      item,
+      index,
+      section,
+      separators: this._separators,
+    });
+    const leadingSeparator = LeadingSeparatorComponent && (
+      <LeadingSeparatorComponent {...this.state.leadingSeparatorProps} />
+    );
+    const separator = SeparatorComponent && (
+      <SeparatorComponent {...this.state.separatorProps} />
+    );
+    return leadingSeparator || separator ? (
+      <View>
+        {leadingSeparator}
+        {element}
+        {separator}
+      </View>
+    ) : (
+      element
+    );
+  }
+}
+
+function getItem(sections: ?$ReadOnlyArray<Item>, index: number): ?Item {
+  if (!sections) {
+    return null;
+  }
+  let itemIdx = index - 1;
+  for (let ii = 0; ii < sections.length; ii++) {
+    if (itemIdx === -1 || itemIdx === sections[ii].data.length) {
+      // We intend for there to be overflow by one on both ends of the list.
+      // This will be for headers and footers. When returning a header or footer
+      // item the section itself is the item.
+      return sections[ii];
+    } else if (itemIdx < sections[ii].data.length) {
+      // If we are in the bounds of the list's data then return the item.
+      return sections[ii].data[itemIdx];
+    } else {
+      itemIdx -= sections[ii].data.length + 2; // Add two for the header and footer
+    }
+  }
+  return null;
+}
+
+module.exports = VirtualizedSectionList;

node_modules/react-native/Libraries/Lists/__flowtests__/FlatList-flowtest.js

@@ -0,0 +1,112 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * 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';
+
+const FlatList = require('FlatList');
+const React = require('react');
+
+function renderMyListItem(info: {item: {title: string}, index: number}) {
+  return <span />;
+}
+
+module.exports = {
+  testEverythingIsFine() {
+    const data = [
+      {
+        title: 'Title Text',
+        key: 1,
+      },
+    ];
+    return <FlatList renderItem={renderMyListItem} data={data} />;
+  },
+
+  testBadDataWithTypicalItem() {
+    const data = [
+      {
+        // $FlowExpectedError - bad title type 6, should be string
+        title: 6,
+        key: 1,
+      },
+    ];
+    return <FlatList renderItem={renderMyListItem} data={data} />;
+  },
+
+  testMissingFieldWithTypicalItem() {
+    const data = [
+      {
+        key: 1,
+      },
+    ];
+    // $FlowExpectedError - missing title
+    return <FlatList renderItem={renderMyListItem} data={data} />;
+  },
+
+  testGoodDataWithBadCustomRenderItemFunction() {
+    const data = [
+      {
+        widget: 6,
+        key: 1,
+      },
+    ];
+    return (
+      <FlatList
+        renderItem={info => (
+          <span>
+            {
+              // $FlowExpectedError - bad widgetCount type 6, should be Object
+              info.item.widget.missingProp
+            }
+          </span>
+        )}
+        data={data}
+      />
+    );
+  },
+
+  testBadRenderItemFunction() {
+    const data = [
+      {
+        title: 'foo',
+        key: 1,
+      },
+    ];
+    return [
+      // $FlowExpectedError - title should be inside `item`
+      <FlatList renderItem={(info: {title: string}) => <span />} data={data} />,
+      <FlatList
+        // $FlowExpectedError - bad index type string, should be number
+        renderItem={(info: {item: any, index: string}) => <span />}
+        data={data}
+      />,
+      <FlatList
+        // $FlowExpectedError - bad title type number, should be string
+        renderItem={(info: {item: {title: number}}) => <span />}
+        data={data}
+      />,
+      // EverythingIsFine
+      <FlatList
+        renderItem={(info: {item: {title: string}}) => <span />}
+        data={data}
+      />,
+    ];
+  },
+
+  testOtherBadProps() {
+    return [
+      // $FlowExpectedError - bad numColumns type "lots"
+      <FlatList renderItem={renderMyListItem} data={[]} numColumns="lots" />,
+      // $FlowExpectedError - bad windowSize type "big"
+      <FlatList renderItem={renderMyListItem} data={[]} windowSize="big" />,
+      // $FlowExpectedError - missing `data` prop
+      <FlatList renderItem={renderMyListItem} />,
+    ];
+  },
+};

node_modules/react-native/Libraries/Lists/__flowtests__/SectionList-flowtest.js

@@ -0,0 +1,129 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * 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';
+
+const React = require('react');
+const SectionList = require('SectionList');
+
+function renderMyListItem(info: {item: {title: string}, index: number}) {
+  return <span />;
+}
+
+const renderMyHeader = ({section}: {section: {fooNumber: number} & Object}) => (
+  <span />
+);
+
+module.exports = {
+  testGoodDataWithGoodItem() {
+    const sections = [
+      {
+        key: 'a',
+        data: [
+          {
+            title: 'foo',
+            key: 1,
+          },
+        ],
+      },
+    ];
+    return <SectionList renderItem={renderMyListItem} sections={sections} />;
+  },
+
+  testBadRenderItemFunction() {
+    const sections = [
+      {
+        key: 'a',
+        data: [
+          {
+            title: 'foo',
+            key: 1,
+          },
+        ],
+      },
+    ];
+    return [
+      // $FlowExpectedError - title should be inside `item`
+      <SectionList
+        renderItem={(info: {title: string}) => <span />}
+        sections={sections}
+      />,
+      <SectionList
+        // $FlowExpectedError - bad index type string, should be number
+        renderItem={(info: {index: string}) => <span />}
+        sections={sections}
+      />,
+      // EverythingIsFine
+      <SectionList
+        renderItem={(info: {item: {title: string}}) => <span />}
+        sections={sections}
+      />,
+    ];
+  },
+
+  testBadInheritedDefaultProp(): React.Element<*> {
+    const sections = [];
+    return (
+      <SectionList
+        renderItem={renderMyListItem}
+        sections={sections}
+        // $FlowExpectedError - bad windowSize type "big"
+        windowSize="big"
+      />
+    );
+  },
+
+  testMissingData(): React.Element<*> {
+    // $FlowExpectedError - missing `sections` prop
+    return <SectionList renderItem={renderMyListItem} />;
+  },
+
+  testBadSectionsShape(): React.Element<*> {
+    const sections = [
+      /* $FlowFixMe(>=0.63.0 site=react_native_fb) This comment suppresses an
+       * error found when Flow v0.63 was deployed. To see the error delete this
+       * comment and run Flow. */
+      {
+        key: 'a',
+        items: [
+          {
+            title: 'foo',
+            key: 1,
+          },
+        ],
+      },
+    ];
+    // $FlowExpectedError - section missing `data` field
+    return <SectionList renderItem={renderMyListItem} sections={sections} />;
+  },
+
+  testBadSectionsMetadata(): React.Element<*> {
+    const sections = [
+      {
+        key: 'a',
+        // $FlowExpectedError - section has bad meta data `fooNumber` field of type string
+        fooNumber: 'string',
+        data: [
+          {
+            title: 'foo',
+            key: 1,
+          },
+        ],
+      },
+    ];
+    return (
+      <SectionList
+        renderSectionHeader={renderMyHeader}
+        renderItem={renderMyListItem}
+        sections={sections}
+      />
+    );
+  },
+};