Compare text

Find the difference between two text files

Real-time editor

Hide unchanged lines

Disable line wrap

Layout

Diff precision

Syntax highlighting

Diffchecker Desktop The most secure way to run Diffchecker. Get the Diffchecker Desktop app: your diffs never leave your computer!Get Desktop

VirtualizedList-63-64

Created 6 years agoDiff never expires

148 removals

Lines
Total
Removed

Characters
Total
Removed

To continue using this feature, upgrade to Diffchecker Pro View Pricing

740 lines

141 additions

Lines
Total
Added

Characters
Total
Added

To continue using this feature, upgrade to Diffchecker Pro View Pricing

738 lines

/**

* Copyright (c) Facebook, Inc. and its affiliates.

* This source code is licensed under the MIT license found in the

* LICENSE file in the root directory of this source tree.

* @flow

* @format

'use strict';

const Batchinator = require('../Interaction/Batchinator');

const FillRateHelper = require('./FillRateHelper');

const PropTypes = require('prop-types');

const React = require('react');

const ReactNative = require('../Renderer/shims/ReactNative');

const RefreshControl = require('../Components/RefreshControl/RefreshControl');

const ScrollView = require('../Components/ScrollView/ScrollView');

const StyleSheet = require('../StyleSheet/StyleSheet');

const View = require('../Components/View/View');

const ViewabilityHelper = require('./ViewabilityHelper');

const flattenStyle = require('../StyleSheet/flattenStyle');

const infoLog = require('../Utilities/infoLog');

const invariant = require('invariant');

const warning = require('fbjs/lib/warning');

const {computeWindowedRenderLimits} = require('./VirtualizeUtils');

import * as React from 'react';

import type {ScrollResponderType} from '../Components/ScrollView/ScrollView';

import type {ViewStyleProp} from '../StyleSheet/StyleSheet';

import type {

ViewabilityConfig,

ViewToken,

ViewabilityConfigCallbackPair,

} from './ViewabilityHelper';

import {

VirtualizedListCellContextProvider,

VirtualizedListContext,

VirtualizedListContextProvider,

type ChildListState,

type ListDebugInfo,

} from './VirtualizedListContext.js';

type Item = any;

export type Separators = {

highlight: () => void,

unhighlight: () => void,

updateProps: (select: 'leading' | 'trailing', newProps: Object) => void,

...

};

export type RenderItemProps<ItemT> = {

item: ItemT,

index: number,

separators: Separators,

...

};

export type RenderItemType<ItemT> = (

info: RenderItemProps<ItemT>,

) => React.Node;

type ViewabilityHelperCallbackTuple = {

viewabilityHelper: ViewabilityHelper,

onViewableItemsChanged: (info: {

viewableItems: Array<ViewToken>,

changed: Array<ViewToken>,

...

}) => void,

...

};

type RequiredProps = {|

/**

* The default accessor functions assume this is an Array<{key: string} | {id: string}> but you can override

* getItem, getItemCount, and keyExtractor to handle any type of index-based data.

data?: any,

/**

* A generic accessor for extracting an item from any sort of data blob.

getItem: (data: any, index: number) => ?Item,

/**

* Determines how many items are in the data blob.

getItemCount: (data: any) => number,

|};

type OptionalProps = {|

renderItem?: ?RenderItemType<Item>,

/**

* `debug` will turn on extra logging and visual overlays to aid with debugging both usage and

* implementation, but with a significant perf hit.

debug?: ?boolean,

/**

* DEPRECATED: Virtualization provides significant performance and memory optimizations, but fully

* unmounts react instances that are outside of the render window. You should only need to disable

* this for debugging purposes.

disableVirtualization?: ?boolean,

/**

* A marker property for telling the list to re-render (since it implements `PureComponent`). If

* any of your `renderItem`, Header, Footer, etc. functions depend on anything outside of the

* `data` prop, stick it here and treat it immutably.

extraData?: any,

// e.g. height, y

getItemLayout?: (

data: any,

index: number,

) => {

length: number,

offset: number,

index: number,

...

horizontal?: ?boolean,

/**

* How many items to render in the initial batch. This should be enough to fill the screen but not

* much more. Note these items will never be unmounted as part of the windowed rendering in order

* to improve perceived performance of scroll-to-top actions.

initialNumToRender: number,

/**

* Instead of starting at the top with the first item, start at `initialScrollIndex`. This

* disables the "scroll to top" optimization that keeps the first `initialNumToRender` items

* always rendered and immediately renders the items starting at this initial index. Requires

* `getItemLayout` to be implemented.

initialScrollIndex?: ?number,

/**

* Reverses the direction of scroll. Uses scale transforms of -1.

inverted?: ?boolean,

keyExtractor: (item: Item, index: number) => string,

/**

* Each cell is rendered using this element. Can be a React Component Class,

* or a render function. Defaults to using View.

CellRendererComponent?: ?React.ComponentType<any>,

/**

* Rendered in between each item, but not at the top or bottom. By default, `highlighted` and

* `leadingItem` props are provided. `renderItem` provides `separators.highlight`/`unhighlight`

* which will update the `highlighted` prop, but you can also add custom props with

* `separators.updateProps`.

ItemSeparatorComponent?: ?React.ComponentType<any>,

/**

* Takes an item from `data` and renders it into the list. Example usage:

* <FlatList

* ItemSeparatorComponent={Platform.OS !== 'android' && ({highlighted}) => (

* <View style={[style.separator, highlighted && {marginLeft: 0}]} />

* )}

* data={[{title: 'Title Text', key: 'item1'}]}

* ListItemComponent={({item, separators}) => (

* <TouchableHighlight

* onPress={() => this._onPress(item)}

* onShowUnderlay={separators.highlight}

* onHideUnderlay={separators.unhighlight}>

* <View style={{backgroundColor: 'white'}}>

* <Text>{item.title}</Text>

* </View>

* </TouchableHighlight>

* )}

* />

* Provides additional metadata like `index` if you need it, as well as a more generic

* `separators.updateProps` function which let's you set whatever props you want to change the

* rendering of either the leading separator or trailing separator in case the more common

* `highlight` and `unhighlight` (which set the `highlighted: boolean` prop) are insufficient for

* your use-case.

ListItemComponent?: ?(React.ComponentType<any> | React.Element<any>),

/**

* Rendered when the list is empty. Can be a React Component Class, a render function, or

* a rendered element.

ListEmptyComponent?: ?(React.ComponentType<any> | React.Element<any>),

/**

* Rendered at the bottom of all the items. Can be a React Component Class, a render function, or

* a rendered element.

ListFooterComponent?: ?(React.ComponentType<any> | React.Element<any>),

/**

* Styling for internal View for ListFooterComponent

ListFooterComponentStyle?: ViewStyleProp,

/**

* Rendered at the top of all the items. Can be a React Component Class, a render function, or

* a rendered element.

ListHeaderComponent?: ?(React.ComponentType<any> | React.Element<any>),

/**

* Styling for internal View for ListHeaderComponent

ListHeaderComponentStyle?: ViewStyleProp,

/**

* A unique identifier for this list. If there are multiple VirtualizedLists at the same level of

* nesting within another VirtualizedList, this key is necessary for virtualization to

* work properly.

listKey?: string,

/**

* The maximum number of items to render in each incremental render batch. The more rendered at

* once, the better the fill rate, but responsiveness may suffer because rendering content may

* interfere with responding to button taps or other interactions.

maxToRenderPerBatch: number,

/**

* Called once when the scroll position gets within `onEndReachedThreshold` of the rendered

* content.

onEndReached?: ?(info: {distanceFromEnd: number, ...}) => void,

/**

* How far from the end (in units of visible length of the list) the bottom edge of the

* list must be from the end of the content to trigger the `onEndReached` callback.

* Thus a value of 0.5 will trigger `onEndReached` when the end of the content is

* within half the visible length of the list.

onEndReachedThreshold?: ?number,

/**

* If provided, a standard RefreshControl will be added for "Pull to Refresh" functionality. Make

* sure to also set the `refreshing` prop correctly.

onRefresh?: ?() => void,

/**

* Used to handle failures when scrolling to an index that has not been measured yet. Recommended

* action is to either compute your own offset and `scrollTo` it, or scroll as far as possible and

* then try again after more items have been rendered.

onScrollToIndexFailed?: ?(info: {

index: number,

highestMeasuredFrameIndex: number,

averageItemLength: number,

...

}) => void,

/**

* Called when the viewability of rows changes, as defined by the

* `viewabilityConfig` prop.

onViewableItemsChanged?: ?(info: {

viewableItems: Array<ViewToken>,

changed: Array<ViewToken>,

...

}) => void,

persistentScrollbar?: ?boolean,

/**

* Set this when offset is needed for the loading indicator to show correctly.

* @platform android

progressViewOffset?: number,

/**

* A custom refresh control element. When set, it overrides the default

* <RefreshControl> component built internally. The onRefresh and refreshing

* props are also ignored. Only works for vertical VirtualizedList.

refreshControl?: ?React.Element<any>,

/**

* Set this true while waiting for new data from a refresh.

refreshing?: ?boolean,

/**

* Note: may have bugs (missing content) in some circumstances - use at your own risk.

* This may improve scroll performance for large lists.

removeClippedSubviews?: boolean,

/**

* Render a custom scroll component, e.g. with a differently styled `RefreshControl`.

renderScrollComponent?: (props: Object) => React.Element<any>,

/**

* Amount of time between low-pri item render batches, e.g. for rendering items quite a ways off

* screen. Similar fill rate/responsiveness tradeoff as `maxToRenderPerBatch`.

updateCellsBatchingPeriod: number,

/**

* See `ViewabilityHelper` for flow type and further documentation.

viewabilityConfig?: ViewabilityConfig,

/**

* List of ViewabilityConfig/onViewableItemsChanged pairs. A specific onViewableItemsChanged

* will be called when its corresponding ViewabilityConfig's conditions are met.

viewabilityConfigCallbackPairs?: Array<ViewabilityConfigCallbackPair>,

/**

* Determines the maximum number of items rendered outside of the visible area, in units of

* visible lengths. So if your list fills the screen, then `windowSize={21}` (the default) will

* render the visible screen area plus up to 10 screens above and 10 below the viewport. Reducing

* this number will reduce memory consumption and may improve performance, but will increase the

* chance that fast scrolling may reveal momentary blank areas of unrendered content.

windowSize: number,

/**

* The legacy implementation is no longer supported.

legacyImplementation?: empty,

|};

type Props = {|

...React.ElementConfig<typeof ScrollView>,

...RequiredProps,

...OptionalProps,

|};

type DefaultProps = {|

disableVirtualization: boolean,

horizontal: boolean,

initialNumToRender: number,

keyExtractor: (item: Item, index: number) => string,

maxToRenderPerBatch: number,

onEndReachedThreshold: number,

scrollEventThrottle: number,

updateCellsBatchingPeriod: number,

windowSize: number,

|};

let _usedIndexForKey = false;

let _keylessItemComponentName: string = '';

type Frame = {

offset: number,

length: number,

index: number,

inLayout: boolean,

...

};

type ChildListState = {

first: number,

last: number,

frames: {[key: number]: Frame, ...},

...

};

type State = {

first: number,

last: number,

...

};

// Data propagated through nested lists (regardless of orientation) that is

// useful for producing diagnostics for usage errors involving nesting (e.g

// missing/duplicate keys).

type ListDebugInfo = {

cellKey: string,

listKey: string,

parent: ?ListDebugInfo,

// We include all ancestors regardless of orientation, so this is not always

// identical to the child's orientation.

horizontal: boolean,

};

/**

* Base implementation for the more convenient [`<FlatList>`](https://reactnative.dev/docs/flatlist.html)

* and [`<SectionList>`](https://reactnative.dev/docs/sectionlist.html) components, which are also better

* documented. In general, this should only really be used if you need more flexibility than

* `FlatList` provides, e.g. for use with immutable data instead of plain arrays.

* Virtualization massively improves memory consumption and performance of large lists by

* maintaining a finite render window of active items and replacing all items outside of the render

* window with appropriately sized blank space. The window adapts to scrolling behavior, and items

* are rendered incrementally with low-pri (after any running interactions) if they are far from the

* visible area, or with hi-pri otherwise to minimize the potential of seeing blank space.

* Some 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` or `id` prop on each item and uses that for the React key.

* Alternatively, you can provide a custom `keyExtractor` prop.

class VirtualizedList extends React.PureComponent<Props, State> {

props: Props;

static contextType: typeof VirtualizedListContext = VirtualizedListContext;

// scrollToEnd may be janky without getItemLayout prop

scrollToEnd(params?: ?{animated?: ?boolean, ...}) {

const animated = params ? params.animated : true;

const veryLast = this.props.getItemCount(this.props.data) - 1;

const frame = this._getFrameMetricsApprox(veryLast);

const offset = Math.max(

frame.offset +

frame.length +

this._footerLength -

this._scrollMetrics.visibleLength,

);

if (this._scrollRef == null) {

return;

}

if (this._scrollRef.scrollTo == null) {

console.warn(

'No scrollTo method provided. This may be because you have two nested ' +

'VirtualizedLists with the same orientation, or because you are ' +

'using a custom component that does not implement scrollTo.',

);

return;

}

this._scrollRef.scrollTo(

this.props.horizontal ? {x: offset, animated} : {y: offset, animated},

);

}

// scrollToIndex may be janky without getItemLayout prop

scrollToIndex(params: {

animated?: ?boolean,

index: number,

viewOffset?: number,

viewPosition?: number,

...

}) {

const {

data,

horizontal,

getItemCount,

getItemLayout,

onScrollToIndexFailed,

} = this.props;

const {animated, index, viewOffset, viewPosition} = params;

invariant(

index >= 0 && index < getItemCount(data),

index >= 0,

`scrollToIndex out of range: requested index ${index} but maximum is ${getItemCount(

`scrollToIndex out of range: requested index ${index} but minimum is 0`,

);

invariant(

getItemCount(data) >= 1,

`scrollToIndex out of range: item length ${getItemCount(

data,

)} but minimum is 1`,

);

invariant(

index < getItemCount(data),

`scrollToIndex out of range: requested index ${index} is out of 0 to ${getItemCount(

data,

) - 1}`,

);

if (!getItemLayout && index > this._highestMeasuredFrameIndex) {

invariant(

!!onScrollToIndexFailed,

'scrollToIndex should be used in conjunction with getItemLayout or onScrollToIndexFailed, ' +

'otherwise there is no way to know the location of offscreen indices or handle failures.',

);

onScrollToIndexFailed({

averageItemLength: this._averageCellLength,

highestMeasuredFrameIndex: this._highestMeasuredFrameIndex,

index,

});

return;

}

const frame = this._getFrameMetricsApprox(index);

const offset =

Math.max(

frame.offset -

(viewPosition || 0) *

(this._scrollMetrics.visibleLength - frame.length),

) - (viewOffset || 0);

if (this._scrollRef == null) {

return;

}

if (this._scrollRef.scrollTo == null) {

console.warn(

'No scrollTo method provided. This may be because you have two nested ' +

'VirtualizedLists with the same orientation, or because you are ' +

'using a custom component that does not implement scrollTo.',

);

return;

}

this._scrollRef.scrollTo(

horizontal ? {x: offset, animated} : {y: offset, animated},

);

}

// scrollToItem may be janky without getItemLayout prop. Required linear scan through items -

// use scrollToIndex instead if possible.

scrollToItem(params: {

animated?: ?boolean,

item: Item,

viewPosition?: number,

...

}) {

const {item} = params;

const {data, getItem, getItemCount} = this.props;

const itemCount = getItemCount(data);

for (let index = 0; index < itemCount; index++) {

if (getItem(data, index) === item) {

this.scrollToIndex({...params, index});

break;

}

/**

* Scroll to a specific content pixel offset in the list.

* Param `offset` expects the offset to scroll to.

* In case of `horizontal` is true, the offset is the x-value,

* in any other case the offset is the y-value.

* Param `animated` (`true` by default) defines whether the list

* should do an animation while scrolling.

scrollToOffset(params: {animated?: ?boolean, offset: number, ...}) {

const {animated, offset} = params;

if (this._scrollRef == null) {

return;

}

if (this._scrollRef.scrollTo == null) {

console.warn(

'No scrollTo method provided. This may be because you have two nested ' +

'VirtualizedLists with the same orientation, or because you are ' +

'using a custom component that does not implement scrollTo.',

);

return;

}

this._scrollRef.scrollTo(

this.props.horizontal ? {x: offset, animated} : {y: offset, animated},

);

}

recordInteraction() {

this._nestedChildLists.forEach(childList => {

childList.ref && childList.ref.recordInteraction();

});

this._viewabilityTuples.forEach(t => {

t.viewabilityHelper.recordInteraction();

});

this._updateViewableItems(this.props.data);

}

flashScrollIndicators() {

if (this._scrollRef == null) {

return;

}

this._scrollRef.flashScrollIndicators();

}

/**

* Provides a handle to the underlying scroll responder.

* Note that `this._scrollRef` might not be a `ScrollView`, so we

* need to check that it responds to `getScrollResponder` before calling it.

getScrollResponder(): ?ScrollResponderType {

if (this._scrollRef && this._scrollRef.getScrollResponder) {

return this._scrollRef.getScrollResponder();

}

getScrollableNode(): ?number {

if (this._scrollRef && this._scrollRef.getScrollableNode) {

return this._scrollRef.getScrollableNode();

} else {

return ReactNative.findNodeHandle(this._scrollRef);

}

getScrollRef():

| ?React.ElementRef<typeof ScrollView>

| ?React.ElementRef<typeof View> {

if (this._scrollRef && this._scrollRef.getScrollRef) {

return this._scrollRef.getScrollRef();

} else {

return this._scrollRef;

}

setNativeProps(props: Object) {

if (this._scrollRef) {

this._scrollRef.setNativeProps(props);

}

static defaultProps: DefaultProps = {

disableVirtualization: false,

horizontal: false,

initialNumToRender: 10,

keyExtractor: (item: Item, index: number) => {

if (item.key != null) {

return item.key;

}

if (item.id != null) {

return item.id;

}

_usedIndexForKey = true;

if (item.type && item.type.displayName) {

_keylessItemComponentName = item.type.displayName;

}

return String(index);

maxToRenderPerBatch: 10,

onEndReachedThreshold: 2, // multiples of length

scrollEventThrottle: 50,

updateCellsBatchingPeriod: 50,

windowSize: 21, // multiples of length

};

static contextTypes:

| any

| {|

virtualizedCell: {|

cellKey: React$PropType$Primitive<string>,

|},

virtualizedList: {|

getScrollMetrics: React$PropType$Primitive<Function>,

horizontal: React$PropType$Primitive<boolean>,

getOutermostParentListRef: React$PropType$Primitive<Function>,

getNestedChildState: React$PropType$Primitive<Function>,

registerAsNestedChild: React$PropType$Primitive<Function>,

unregisterAsNestedChild: React$PropType$Primitive<Function>,

debugInfo: {|

listKey: React$PropType$Primitive<string>,

cellKey: React$PropType$Primitive<string>,

|},

|} = {

virtualizedCell: PropTypes.shape({

cellKey: PropTypes.string,

}),

virtualizedList: PropTypes.shape({

getScrollMetrics: PropTypes.func,

horizontal: PropTypes.bool,

getOutermostParentListRef: PropTypes.func,

getNestedChildState: PropTypes.func,

registerAsNestedChild: PropTypes.func,

unregisterAsNestedChild: PropTypes.func,

debugInfo: PropTypes.shape({

listKey: PropTypes.string,

cellKey: PropTypes.string,

}),

};

static childContextTypes:

| any

| {|

getScrollMetrics: React$PropType$Primitive<Function>,

horizontal: React$PropType$Primitive<boolean>,

getOutermostParentListRef: React$PropType$Primitive<Function>,

getNestedChildState: React$PropType$Primitive<Function>,

registerAsNestedChild: React$PropType$Primitive<Function>,

unregisterAsNestedChild: React$PropType$Primitive<Function>,

|} = {

virtualizedList: PropTypes.shape({

getScrollMetrics: PropTypes.func,

horizontal: PropTypes.bool,

getOutermostParentListRef: PropTypes.func,

getNestedChildState: PropTypes.func,

registerAsNestedChild: PropTypes.func,

unregisterAsNestedChild: PropTypes.func,

}),

};

getChildContext(): {|

virtualizedList: {

getScrollMetrics: () => {

contentLength: number,

dOffset: number,

dt: number,

offset: number,

timestamp: number,

velocity: number,

visibleLength: number,

...

horizontal: ?boolean,

getOutermostParentListRef: Function,

getNestedChildState: string => ?ChildListState,

registerAsNestedChild: ({

cellKey: string,

key: string,

ref: VirtualizedList,

parentDebugInfo: ListDebugInfo,

...

}) => ?ChildListState,

unregisterAsNestedChild: ({

key: string,

state: ChildListState,

...

}) => void,

debugInfo: ListDebugInfo,

...

|} {

return {

virtualizedList: {

getScrollMetrics: this._getScrollMetrics,

horizontal: this.props.horizontal,

getOutermostParentListRef: this._getOutermostParentListRef,

getNestedChildState: this._getNestedChildState,

registerAsNestedChild: this._registerAsNestedChild,

unregisterAsNestedChild: this._unregisterAsNestedChild,

debugInfo: this._getDebugInfo(),

};

}

_getCellKey(): string {

return (

return this.context?.cellKey || 'rootList';

(this.context.virtualizedCell && this.context.virtualizedCell.cellKey) ||

'rootList'

);

}

_getListKey(): string {

return this.props.listKey || this._getCellKey();

}

_getDebugInfo(): ListDebugInfo {

return {

listKey: this._getListKey(),

cellKey: this._getCellKey(),

horizontal: !!this.props.horizontal,

parent: this.context.virtualizedList

parent: this.context?.debugInfo,

? this.context.virtualizedList.debugInfo

: null,

};

}

_getScrollMetrics = () => {

return this._scrollMetrics;

};

hasMore(): boolean {

return this._hasMore;

}

_getOutermostParentListRef = () => {

if (this._isNestedWithSameOrientation()) {

return this.context.virtualizedList.getOutermostParentListRef();

return this.context.getOutermostParentListRef();

} else {

return this;

}

};

_getNestedChildState = (key: string): ?ChildListState => {

const existingChildData = this._nestedChildLists.get(key);

return existingChildData && existingChildData.state;

};

_registerAsNestedChild = (childList: {

cellKey: string,

key: string,

ref: VirtualizedList,

parentDebugInfo: ListDebugInfo,

...

}): ?ChildListState => {

// Register the mapping between this child key and the cellKey for its cell

const childListsInCell =

this._cellKeysToChildListKeys.get(childList.cellKey) || new Set();

childListsInCell.add(childList.key);

this._cellKeysToChildListKeys.set(childList.cellKey, childListsInCell);

const existingChildData = this._nestedChildLists.get(childList.key);

if (existingChildData && existingChildData.ref !== null) {

console.error(

'A VirtualizedList contains a cell which itself contains ' +

'more than one VirtualizedList of the same orientation as the parent ' +

'list. You must pass a unique listKey prop to each sibling list.\n\n' +

describeNestedLists({

...childList,

// We're called from the child's componentDidMount, so it's safe to

// read the child's props here (albeit weird).

horizontal: !!childList.ref.props.horiz

horizontal: !!childList.ref.props.horizontal,

}),

);

}

this._nestedChildLists.set(childList.key, {

ref: childList.ref,

state: null,

});

if (this._hasInteracted) {

childList.ref.recordInteraction();

}

};

_unregisterAsNestedChild = (childList: {

key: string,

state: ChildListState,

...

}): void => {

this._nestedChildLists.set(childList.key, {

ref: null,

state: childList.state,

});

};

state: State;

constructor(props: Props) {

super(props);

invariant(

// $FlowFixMe

!props.onScroll || !props.onScroll.__isNative,

'Components based on VirtualizedList must be wrapped with Animated.createAnimatedComponent ' +

'to support native onScroll events with useNativeDriver',

);

invariant(

props.windowSize > 0,

'VirtualizedList: The windowSize prop must be present and set to a value greater than 0.',

);

this._fillRateHelper = new FillRateHelper(this._getFrameMetrics);

this._updateCellsToRenderBatcher = new Batchinator(

this._updateCellsToRender,

this.props.updateCellsBatchingPeriod,

);

if (this.props.viewabilityConfigCallbackPairs) {

this._viewabilityTuples = this.props.viewabilityConfigCallbackPairs.map(

pair => ({

viewabilityHelper: new ViewabilityHelper(pair.viewabilityConfig),

onViewableItemsChanged: pair.onViewableItemsChanged,

}),

);

} else if (this.props.onViewableItemsChanged) {

this._viewabilityTuples.push({

viewabilityHelper: new ViewabilityHelper(this.props.viewabilityConfig),

onViewableItemsChanged: this.props.onViewableItemsChanged,

});

}

let initialState = {

first: this.props.initialScrollIndex || 0,

last:

Math.min(

this.props.getItemCount(this.props.data),

(this.props.initialScrollIndex || 0) + this.props.initialNumToRender,

) - 1,

};

if (this._isNestedWithSameOrientation()) {

const storedState = this.context.getNestedChildState(this._getListKey());

if (storedState) {

initialState = storedState;

this.state = storedState;

this._frames = storedState.frames;

}

this.state = initialState;

}

componentDidMount() {

if (this._isNestedWithSameOrientation()) {

this.context.registerAsNestedChild({

cellKey: this._getCellKey(),

key: this._getListKey(),

ref: this,

// NOTE: When the child mounts (here) it's not necessarily safe to read

// the parent's props. This i

Saved diffs

Original text

Open file

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @flow
 * @format
 */

'use strict';

const Batchinator = require('../Interaction/Batchinator');
const FillRateHelper = require('./FillRateHelper');
const PropTypes = require('prop-types');
const React = require('react');
const ReactNative = require('../Renderer/shims/ReactNative');
const RefreshControl = require('../Components/RefreshControl/RefreshControl');
const ScrollView = require('../Components/ScrollView/ScrollView');
const StyleSheet = require('../StyleSheet/StyleSheet');
const View = require('../Components/View/View');
const ViewabilityHelper = require('./ViewabilityHelper');

const flattenStyle = require('../StyleSheet/flattenStyle');
const infoLog = require('../Utilities/infoLog');
const invariant = require('invariant');
const warning = require('fbjs/lib/warning');

const {computeWindowedRenderLimits} = require('./VirtualizeUtils');

import type {ScrollResponderType} from '../Components/ScrollView/ScrollView';
import type {ViewStyleProp} from '../StyleSheet/StyleSheet';
import type {
  ViewabilityConfig,
  ViewToken,
  ViewabilityConfigCallbackPair,
} from './ViewabilityHelper';

type Item = any;

export type Separators = {
  highlight: () => void,
  unhighlight: () => void,
  updateProps: (select: 'leading' | 'trailing', newProps: Object) => void,
  ...
};

export type RenderItemProps<ItemT> = {
  item: ItemT,
  index: number,
  separators: Separators,
  ...
};

export type RenderItemType<ItemT> = (
  info: RenderItemProps<ItemT>,
) => React.Node;

type ViewabilityHelperCallbackTuple = {
  viewabilityHelper: ViewabilityHelper,
  onViewableItemsChanged: (info: {
    viewableItems: Array<ViewToken>,
    changed: Array<ViewToken>,
    ...
  }) => void,
  ...
};

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

type Props = {|
  ...React.ElementConfig<typeof ScrollView>,
  ...RequiredProps,
  ...OptionalProps,
|};

type DefaultProps = {|
  disableVirtualization: boolean,
  horizontal: boolean,
  initialNumToRender: number,
  keyExtractor: (item: Item, index: number) => string,
  maxToRenderPerBatch: number,
  onEndReachedThreshold: number,
  scrollEventThrottle: number,
  updateCellsBatchingPeriod: number,
  windowSize: number,
|};

let _usedIndexForKey = false;
let _keylessItemComponentName: string = '';

type Frame = {
  offset: number,
  length: number,
  index: number,
  inLayout: boolean,
  ...
};

type ChildListState = {
  first: number,
  last: number,
  frames: {[key: number]: Frame, ...},
  ...
};

type State = {
  first: number,
  last: number,
  ...
};

// Data propagated through nested lists (regardless of orientation) that is
// useful for producing diagnostics for usage errors involving nesting (e.g
// missing/duplicate keys).
type ListDebugInfo = {
  cellKey: string,
  listKey: string,
  parent: ?ListDebugInfo,
  // We include all ancestors regardless of orientation, so this is not always
  // identical to the child's orientation.
  horizontal: boolean,
};

/**
 * Base implementation for the more convenient [`<FlatList>`](https://reactnative.dev/docs/flatlist.html)
 * and [`<SectionList>`](https://reactnative.dev/docs/sectionlist.html) components, which are also better
 * documented. In general, this should only really be used if you need more flexibility than
 * `FlatList` provides, e.g. for use with immutable data instead of plain arrays.
 *
 * Virtualization massively improves memory consumption and performance of large lists by
 * maintaining a finite render window of active items and replacing all items outside of the render
 * window with appropriately sized blank space. The window adapts to scrolling behavior, and items
 * are rendered incrementally with low-pri (after any running interactions) if they are far from the
 * visible area, or with hi-pri otherwise to minimize the potential of seeing blank space.
 *
 * Some 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` or `id` prop on each item and uses that for the React key.
 *   Alternatively, you can provide a custom `keyExtractor` prop.
 *
 */
class VirtualizedList extends React.PureComponent<Props, State> {
  props: Props;

// scrollToEnd may be janky without getItemLayout prop
  scrollToEnd(params?: ?{animated?: ?boolean, ...}) {
    const animated = params ? params.animated : true;
    const veryLast = this.props.getItemCount(this.props.data) - 1;
    const frame = this._getFrameMetricsApprox(veryLast);
    const offset = Math.max(
      0,
      frame.offset +
        frame.length +
        this._footerLength -
        this._scrollMetrics.visibleLength,
    );

if (this._scrollRef == null) {
      return;
    }

this._scrollRef.scrollTo(
      this.props.horizontal ? {x: offset, animated} : {y: offset, animated},
    );
  }

// scrollToIndex may be janky without getItemLayout prop
  scrollToIndex(params: {
    animated?: ?boolean,
    index: number,
    viewOffset?: number,
    viewPosition?: number,
    ...
  }) {
    const {
      data,
      horizontal,
      getItemCount,
      getItemLayout,
      onScrollToIndexFailed,
    } = this.props;
    const {animated, index, viewOffset, viewPosition} = params;
    invariant(
      index >= 0 && index < getItemCount(data),
      `scrollToIndex out of range: requested index ${index} but maximum is ${getItemCount(
        data,
      ) - 1}`,
    );
    if (!getItemLayout && index > this._highestMeasuredFrameIndex) {
      invariant(
        !!onScrollToIndexFailed,
        'scrollToIndex should be used in conjunction with getItemLayout or onScrollToIndexFailed, ' +
          'otherwise there is no way to know the location of offscreen indices or handle failures.',
      );
      onScrollToIndexFailed({
        averageItemLength: this._averageCellLength,
        highestMeasuredFrameIndex: this._highestMeasuredFrameIndex,
        index,
      });
      return;
    }
    const frame = this._getFrameMetricsApprox(index);
    const offset =
      Math.max(
        0,
        frame.offset -
          (viewPosition || 0) *
            (this._scrollMetrics.visibleLength - frame.length),
      ) - (viewOffset || 0);

if (this._scrollRef == null) {
      return;
    }

this._scrollRef.scrollTo(
      horizontal ? {x: offset, animated} : {y: offset, animated},
    );
  }

// scrollToItem may be janky without getItemLayout prop. Required linear scan through items -
  // use scrollToIndex instead if possible.
  scrollToItem(params: {
    animated?: ?boolean,
    item: Item,
    viewPosition?: number,
    ...
  }) {
    const {item} = params;
    const {data, getItem, getItemCount} = this.props;
    const itemCount = getItemCount(data);
    for (let index = 0; index < itemCount; index++) {
      if (getItem(data, index) === item) {
        this.scrollToIndex({...params, index});
        break;
      }
    }
  }

/**
   * Scroll to a specific content pixel offset in the list.
   *
   * Param `offset` expects the offset to scroll to.
   * In case of `horizontal` is true, the offset is the x-value,
   * in any other case the offset is the y-value.
   *
   * Param `animated` (`true` by default) defines whether the list
   * should do an animation while scrolling.
   */
  scrollToOffset(params: {animated?: ?boolean, offset: number, ...}) {
    const {animated, offset} = params;

if (this._scrollRef == null) {
      return;
    }

this._scrollRef.scrollTo(
      this.props.horizontal ? {x: offset, animated} : {y: offset, animated},
    );
  }

recordInteraction() {
    this._nestedChildLists.forEach(childList => {
      childList.ref && childList.ref.recordInteraction();
    });
    this._viewabilityTuples.forEach(t => {
      t.viewabilityHelper.recordInteraction();
    });
    this._updateViewableItems(this.props.data);
  }

flashScrollIndicators() {
    if (this._scrollRef == null) {
      return;
    }

this._scrollRef.flashScrollIndicators();
  }

/**
   * Provides a handle to the underlying scroll responder.
   * Note that `this._scrollRef` might not be a `ScrollView`, so we
   * need to check that it responds to `getScrollResponder` before calling it.
   */
  getScrollResponder(): ?ScrollResponderType {
    if (this._scrollRef && this._scrollRef.getScrollResponder) {
      return this._scrollRef.getScrollResponder();
    }
  }

getScrollableNode(): ?number {
    if (this._scrollRef && this._scrollRef.getScrollableNode) {
      return this._scrollRef.getScrollableNode();
    } else {
      return ReactNative.findNodeHandle(this._scrollRef);
    }
  }

getScrollRef():
    | ?React.ElementRef<typeof ScrollView>
    | ?React.ElementRef<typeof View> {
    if (this._scrollRef && this._scrollRef.getScrollRef) {
      return this._scrollRef.getScrollRef();
    } else {
      return this._scrollRef;
    }
  }

setNativeProps(props: Object) {
    if (this._scrollRef) {
      this._scrollRef.setNativeProps(props);
    }
  }

static defaultProps: DefaultProps = {
    disableVirtualization: false,
    horizontal: false,
    initialNumToRender: 10,
    keyExtractor: (item: Item, index: number) => {
      if (item.key != null) {
        return item.key;
      }
      if (item.id != null) {
        return item.id;
      }
      _usedIndexForKey = true;
      if (item.type && item.type.displayName) {
        _keylessItemComponentName = item.type.displayName;
      }
      return String(index);
    },
    maxToRenderPerBatch: 10,
    onEndReachedThreshold: 2, // multiples of length
    scrollEventThrottle: 50,
    updateCellsBatchingPeriod: 50,
    windowSize: 21, // multiples of length
  };

static contextTypes:
    | any
    | {|
        virtualizedCell: {|
          cellKey: React$PropType$Primitive<string>,
        |},
        virtualizedList: {|
          getScrollMetrics: React$PropType$Primitive<Function>,
          horizontal: React$PropType$Primitive<boolean>,
          getOutermostParentListRef: React$PropType$Primitive<Function>,
          getNestedChildState: React$PropType$Primitive<Function>,
          registerAsNestedChild: React$PropType$Primitive<Function>,
          unregisterAsNestedChild: React$PropType$Primitive<Function>,
          debugInfo: {|
            listKey: React$PropType$Primitive<string>,
            cellKey: React$PropType$Primitive<string>,
          |},
        |},
      |} = {
    virtualizedCell: PropTypes.shape({
      cellKey: PropTypes.string,
    }),
    virtualizedList: PropTypes.shape({
      getScrollMetrics: PropTypes.func,
      horizontal: PropTypes.bool,
      getOutermostParentListRef: PropTypes.func,
      getNestedChildState: PropTypes.func,
      registerAsNestedChild: PropTypes.func,
      unregisterAsNestedChild: PropTypes.func,
      debugInfo: PropTypes.shape({
        listKey: PropTypes.string,
        cellKey: PropTypes.string,
      }),
    }),
  };

static childContextTypes:
    | any
    | {|
        getScrollMetrics: React$PropType$Primitive<Function>,
        horizontal: React$PropType$Primitive<boolean>,
        getOutermostParentListRef: React$PropType$Primitive<Function>,
        getNestedChildState: React$PropType$Primitive<Function>,
        registerAsNestedChild: React$PropType$Primitive<Function>,
        unregisterAsNestedChild: React$PropType$Primitive<Function>,
      |} = {
    virtualizedList: PropTypes.shape({
      getScrollMetrics: PropTypes.func,
      horizontal: PropTypes.bool,
      getOutermostParentListRef: PropTypes.func,
      getNestedChildState: PropTypes.func,
      registerAsNestedChild: PropTypes.func,
      unregisterAsNestedChild: PropTypes.func,
    }),
  };

getChildContext(): {|
    virtualizedList: {
      getScrollMetrics: () => {
        contentLength: number,
        dOffset: number,
        dt: number,
        offset: number,
        timestamp: number,
        velocity: number,
        visibleLength: number,
        ...
      },
      horizontal: ?boolean,
      getOutermostParentListRef: Function,
      getNestedChildState: string => ?ChildListState,
      registerAsNestedChild: ({
        cellKey: string,
        key: string,
        ref: VirtualizedList,
        parentDebugInfo: ListDebugInfo,
        ...
      }) => ?ChildListState,
      unregisterAsNestedChild: ({
        key: string,
        state: ChildListState,
        ...
      }) => void,
      debugInfo: ListDebugInfo,
      ...
    },
  |} {
    return {
      virtualizedList: {
        getScrollMetrics: this._getScrollMetrics,
        horizontal: this.props.horizontal,
        getOutermostParentListRef: this._getOutermostParentListRef,
        getNestedChildState: this._getNestedChildState,
        registerAsNestedChild: this._registerAsNestedChild,
        unregisterAsNestedChild: this._unregisterAsNestedChild,
        debugInfo: this._getDebugInfo(),
      },
    };
  }

_getCellKey(): string {
    return (
      (this.context.virtualizedCell && this.context.virtualizedCell.cellKey) ||
      'rootList'
    );
  }

_getListKey(): string {
    return this.props.listKey || this._getCellKey();
  }

_getDebugInfo(): ListDebugInfo {
    return {
      listKey: this._getListKey(),
      cellKey: this._getCellKey(),
      horizontal: !!this.props.horizontal,
      parent: this.context.virtualizedList
        ? this.context.virtualizedList.debugInfo
        : null,
    };
  }

_getScrollMetrics = () => {
    return this._scrollMetrics;
  };

hasMore(): boolean {
    return this._hasMore;
  }

_getOutermostParentListRef = () => {
    if (this._isNestedWithSameOrientation()) {
      return this.context.virtualizedList.getOutermostParentListRef();
    } else {
      return this;
    }
  };

_getNestedChildState = (key: string): ?ChildListState => {
    const existingChildData = this._nestedChildLists.get(key);
    return existingChildData && existingChildData.state;
  };

_registerAsNestedChild = (childList: {
    cellKey: string,
    key: string,
    ref: VirtualizedList,
    parentDebugInfo: ListDebugInfo,
    ...
  }): ?ChildListState => {
    // Register the mapping between this child key and the cellKey for its cell
    const childListsInCell =
      this._cellKeysToChildListKeys.get(childList.cellKey) || new Set();
    childListsInCell.add(childList.key);
    this._cellKeysToChildListKeys.set(childList.cellKey, childListsInCell);
    const existingChildData = this._nestedChildLists.get(childList.key);
    if (existingChildData && existingChildData.ref !== null) {
      console.error(
        'A VirtualizedList contains a cell which itself contains ' +
          'more than one VirtualizedList of the same orientation as the parent ' +
          'list. You must pass a unique listKey prop to each sibling list.\n\n' +
          describeNestedLists({
            ...childList,
            // We're called from the child's componentDidMount, so it's safe to
            // read the child's props here (albeit weird).
            horizontal: !!childList.ref.props.horizontal,
          }),
      );
    }
    this._nestedChildLists.set(childList.key, {
      ref: childList.ref,
      state: null,
    });

if (this._hasInteracted) {
      childList.ref.recordInteraction();
    }
  };

_unregisterAsNestedChild = (childList: {
    key: string,
    state: ChildListState,
    ...
  }): void => {
    this._nestedChildLists.set(childList.key, {
      ref: null,
      state: childList.state,
    });
  };

state: State;

constructor(props: Props, context: Object) {
    super(props, context);
    invariant(
      // $FlowFixMe
      !props.onScroll || !props.onScroll.__isNative,
      'Components based on VirtualizedList must be wrapped with Animated.createAnimatedComponent ' +
        'to support native onScroll events with useNativeDriver',
    );

invariant(
      props.windowSize > 0,
      'VirtualizedList: The windowSize prop must be present and set to a value greater than 0.',
    );

this._fillRateHelper = new FillRateHelper(this._getFrameMetrics);
    this._updateCellsToRenderBatcher = new Batchinator(
      this._updateCellsToRender,
      this.props.updateCellsBatchingPeriod,
    );

if (this.props.viewabilityConfigCallbackPairs) {
      this._viewabilityTuples = this.props.viewabilityConfigCallbackPairs.map(
        pair => ({
          viewabilityHelper: new ViewabilityHelper(pair.viewabilityConfig),
          onViewableItemsChanged: pair.onViewableItemsChanged,
        }),
      );
    } else if (this.props.onViewableItemsChanged) {
      this._viewabilityTuples.push({
        viewabilityHelper: new ViewabilityHelper(this.props.viewabilityConfig),
        onViewableItemsChanged: this.props.onViewableItemsChanged,
      });
    }

let initialState = {
      first: this.props.initialScrollIndex || 0,
      last:
        Math.min(
          this.props.getItemCount(this.props.data),
          (this.props.initialScrollIndex || 0) + this.props.initialNumToRender,
        ) - 1,
    };

if (this._isNestedWithSameOrientation()) {
      const storedState = this.context.virtualizedList.getNestedChildState(
        this._getListKey(),
      );
      if (storedState) {
        initialState = storedState;
        this.state = storedState;
        this._frames = storedState.frames;
      }
    }

this.state = initialState;
  }

componentDidMount() {
    if (this._isNestedWithSameOrientation()) {
      this.context.virtualizedList.registerAsNestedChild({
        cellKey: this._getCellKey(),
        key: this._getListKey(),
        ref: this,
        // NOTE: When the child mounts (here) it's not necessarily safe to read
        // the parent's props. This is why we explicitly propagate debugInfo
        // "down" via context and "up" again via this method call on the
        // parent.
        parentDebugInfo: this.context.virtualizedList.debugInfo,
      });
    }
  }

componentWillUnmount() {
    if (this._isNestedWithSameOrientation()) {
      this.context.virtualizedList.unregisterAsNestedChild({
        key: this._getListKey(),
        state: {
          first: this.state.first,
          last: this.state.last,
          frames: this._frames,
        },
      });
    }
    this._updateViewableItems(null);
    this._updateCellsToRenderBatcher.dispose({abort: true});
    this._viewabilityTuples.forEach(tuple => {
      tuple.viewabilityHelper.dispose();
    });
    this._fillRateHelper.deactivateAndFlush();
  }

static getDerivedStateFromProps(newProps: Props, prevState: State): State {
    const {data, getItemCount, maxToRenderPerBatch} = newProps;
    // first and last could be stale (e.g. if a new, shorter items props is passed in), so we make
    // sure we're rendering a reasonable range here.
    return {
      first: Math.max(
        0,
        Math.min(prevState.first, getItemCount(data) - 1 - maxToRenderPerBatch),
      ),
      last: Math.max(0, Math.min(prevState.last, getItemCount(data) - 1)),
    };
  }

_pushCells(
    cells: Array<Object>,
    stickyHeaderIndices: Array<number>,
    stickyIndicesFromProps: Set<number>,
    first: number,
    last: number,
    inversionStyle: ViewStyleProp,
  ) {
    const {
      CellRendererComponent,
      ItemSeparatorComponent,
      data,
      getItem,
      getItemCount,
      horizontal,
      keyExtractor,
    } = this.props;
    const stickyOffset = this.props.ListHeaderComponent ? 1 : 0;
    const end = getItemCount(data) - 1;
    let prevCellKey;
    last = Math.min(end, last);
    for (let ii = first; ii <= last; ii++) {
      const item = getItem(data, ii);
      const key = keyExtractor(item, ii);
      this._indicesToKeys.set(ii, key);
      if (stickyIndicesFromProps.has(ii + stickyOffset)) {
        stickyHeaderIndices.push(cells.length);
      }
      cells.push(
        <CellRenderer
          CellRendererComponent={CellRendererComponent}
          ItemSeparatorComponent={ii < end ? ItemSeparatorComponent : undefined}
          cellKey={key}
          fillRateHelper={this._fillRateHelper}
          horizontal={horizontal}
          index={ii}
          inversionStyle={inversionStyle}
          item={item}
          key={key}
          prevCellKey={prevCellKey}
          onUpdateSeparators={this._onUpdateSeparators}
          onLayout={e => this._onCellLayout(e, key, ii)}
          onUnmount={this._onCellUnmount}
          parentProps={this.props}
          ref={ref => {
            this._cellRefs[key] = ref;
          }}
        />,
      );
      prevCellKey = key;
    }
  }

_onUpdateSeparators = (keys: Array<?string>, newProps: Object) => {
    keys.forEach(key => {
      const ref = key != null && this._cellRefs[key];
      ref && ref.updateSeparatorProps(newProps);
    });
  };

_isVirtualizationDisabled(): boolean {
    return this.props.disableVirtualization || false;
  }

_isNestedWithSameOrientation(): boolean {
    const nestedContext = this.context.virtualizedList;
    return !!(
      nestedContext && !!nestedContext.horizontal === !!this.props.horizontal
    );
  }

render(): React.Node {
    if (__DEV__) {
      const flatStyles = flattenStyle(this.props.contentContainerStyle);
      warning(
        flatStyles == null || flatStyles.flexWrap !== 'wrap',
        '`flexWrap: `wrap`` is not supported with the `VirtualizedList` components.' +
          'Consider using `numColumns` with `FlatList` instead.',
      );
    }
    const {
      ListEmptyComponent,
      ListFooterComponent,
      ListHeaderComponent,
    } = this.props;
    const {data, horizontal} = this.props;
    const isVirtualizationDisabled = this._isVirtualizationDisabled();
    const inversionStyle = this.props.inverted
      ? this.props.horizontal
        ? styles.horizontallyInverted
        : styles.verticallyInverted
      : null;
    const cells = [];
    const stickyIndicesFromProps = new Set(this.props.stickyHeaderIndices);
    const stickyHeaderIndices = [];
    if (ListHeaderComponent) {
      if (stickyIndicesFromProps.has(0)) {
        stickyHeaderIndices.push(0);
      }
      const element = React.isValidElement(ListHeaderComponent) ? (
        ListHeaderComponent
      ) : (
        // $FlowFixMe
        <ListHeaderComponent />
      );
      cells.push(
        <VirtualizedCellWrapper
          cellKey={this._getCellKey() + '-header'}
          key="$header">
          <View
            onLayout={this._onLayoutHeader}
            style={StyleSheet.compose(
              inversionStyle,
              this.props.ListHeaderComponentStyle,
            )}>
            {
              // $FlowFixMe - Typing ReactNativeComponent revealed errors
              element
            }
          </View>
        </VirtualizedCellWrapper>,
      );
    }
    const itemCount = this.props.getItemCount(data);
    if (itemCount > 0) {
      _usedIndexForKey = false;
      _keylessItemComponentName = '';
      const spacerKey = !horizontal ? 'height' : 'width';
      const lastInitialIndex = this.props.initialScrollIndex
        ? -1
        : this.props.initialNumToRender - 1;
      const {first, last} = this.state;
      this._pushCells(
        cells,
        stickyHeaderIndices,
        stickyIndicesFromProps,
        0,
        lastInitialIndex,
        inversionStyle,
      );
      const firstAfterInitial = Math.max(lastInitialIndex + 1, first);
      if (!isVirtualizationDisabled && first > lastInitialIndex + 1) {
        let insertedStickySpacer = false;
        if (stickyIndicesFromProps.size > 0) {
          const stickyOffset = ListHeaderComponent ? 1 : 0;
          // See if there are any sticky headers in the virtualized space that we need to render.
          for (let ii = firstAfterInitial - 1; ii > lastInitialIndex; ii--) {
            if (stickyIndicesFromProps.has(ii + stickyOffset)) {
              const initBlock = this._getFrameMetricsApprox(lastInitialIndex);
              const stickyBlock = this._getFrameMetricsApprox(ii);
              const leadSpace =
                stickyBlock.offset -
                initBlock.offset -
                (this.props.initialScrollIndex ? 0 : initBlock.length);
              cells.push(
                /* $FlowFixMe(>=0.111.0 site=react_native_fb) This comment
                 * suppresses an error found when Flow v0.111 was deployed. To
                 * see the error, delete this comment and run Flow. */
                <View key="$sticky_lead" style={{[spacerKey]: leadSpace}} />,
              );
              this._pushCells(
                cells,
                stickyHeaderIndices,
                stickyIndicesFromProps,
                ii,
                ii,
                inversionStyle,
              );
              const trailSpace =
                this._getFrameMetricsApprox(first).offset -
                (stickyBlock.offset + stickyBlock.length);
              cells.push(
                /* $FlowFixMe(>=0.111.0 site=react_native_fb) This comment
                 * suppresses an error found when Flow v0.111 was deployed. To
                 * see the error, delete this comment and run Flow. */
                <View key="$sticky_trail" style={{[spacerKey]: trailSpace}} />,
              );
              insertedStickySpacer = true;
              break;
            }
          }
        }
        if (!insertedStickySpacer) {
          const initBlock = this._getFrameMetricsApprox(lastInitialIndex);
          const firstSpace =
            this._getFrameMetricsApprox(first).offset -
            (initBlock.offset + initBlock.length);
          cells.push(
            /* $FlowFixMe(>=0.111.0 site=react_native_fb) This comment
             * suppresses an error found when Flow v0.111 was deployed. To see
             * the error, delete this comment and run Flow. */
            <View key="$lead_spacer" style={{[spacerKey]: firstSpace}} />,
          );
        }
      }
      this._pushCells(
        cells,
        stickyHeaderIndices,
        stickyIndicesFromProps,
        firstAfterInitial,
        last,
        inversionStyle,
      );
      if (!this._hasWarned.keys && _usedIndexForKey) {
        console.warn(
          'VirtualizedList: missing keys for items, make sure to specify a key or id property on each ' +
            'item or provide a custom keyExtractor.',
          _keylessItemComponentName,
        );
        this._hasWarned.keys = true;
      }
      if (!isVirtualizationDisabled && last < itemCount - 1) {
        const lastFrame = this._getFrameMetricsApprox(last);
        // Without getItemLayout, we limit our tail spacer to the _highestMeasuredFrameIndex to
        // prevent the user for hyperscrolling into un-measured area because otherwise content will
        // likely jump around as it renders in above the viewport.
        const end = this.props.getItemLayout
          ? itemCount - 1
          : Math.min(itemCount - 1, this._highestMeasuredFrameIndex);
        const endFrame = this._getFrameMetricsApprox(end);
        const tailSpacerLength =
          endFrame.offset +
          endFrame.length -
          (lastFrame.offset + lastFrame.length);
        cells.push(
          /* $FlowFixMe(>=0.111.0 site=react_native_fb) This comment suppresses
           * an error found when Flow v0.111 was deployed. To see the error,
           * delete this comment and run Flow. */
          <View key="$tail_spacer" style={{[spacerKey]: tailSpacerLength}} />,
        );
      }
    } else if (ListEmptyComponent) {
      const element: React.Element<any> = ((React.isValidElement(
        ListEmptyComponent,
      ) ? (
        ListEmptyComponent
      ) : (
        // $FlowFixMe
        <ListEmptyComponent />
      )): any);
      cells.push(
        React.cloneElement(element, {
          key: '$empty',
          onLayout: event => {
            this._onLayoutEmpty(event);
            if (element.props.onLayout) {
              element.props.onLayout(event);
            }
          },
          style: StyleSheet.compose(
            inversionStyle,
            element.props.style,
          ),
        }),
      );
    }
    if (ListFooterComponent) {
      const element = React.isValidElement(ListFooterComponent) ? (
        ListFooterComponent
      ) : (
        // $FlowFixMe
        <ListFooterComponent />
      );
      cells.push(
        <VirtualizedCellWrapper
          cellKey={this._getFooterCellKey()}
          key="$footer">
          <View
            onLayout={this._onLayoutFooter}
            style={StyleSheet.compose(
              inversionStyle,
              this.props.ListFooterComponentStyle,
            )}>
            {
              // $FlowFixMe - Typing ReactNativeComponent revealed errors
              element
            }
          </View>
        </VirtualizedCellWrapper>,
      );
    }
    const scrollProps = {
      ...this.props,
      onContentSizeChange: this._onContentSizeChange,
      onLayout: this._onLayout,
      onScroll: this._onScroll,
      onScrollBeginDrag: this._onScrollBeginDrag,
      onScrollEndDrag: this._onScrollEndDrag,
      onMomentumScrollEnd: this._onMomentumScrollEnd,
      scrollEventThrottle: this.props.scrollEventThrottle, // TODO: Android support
      invertStickyHeaders:
        this.props.invertStickyHeaders !== undefined
          ? this.props.invertStickyHeaders
          : this.props.inverted,
      stickyHeaderIndices,
      style: inversionStyle
        ? [inversionStyle, this.props.style]
        : this.props.style,
    };

this._hasMore =
      this.state.last < this.props.getItemCount(this.props.data) - 1;

componentDidUpdate(prevProps: Props) {
    const {data, extraData} = this.props;
    if (data !== prevProps.data || extraData !== prevProps.extraData) {
      // clear the viewableIndices cache to also trigger
      // the onViewableItemsChanged callback with the new data
      this._viewabilityTuples.forEach(tuple => {
        tuple.viewabilityHelper.resetViewableIndices();
      });
    }
    // The `this._hiPriInProgress` is guaranteeing a hiPri cell update will only happen
    // once per fiber update. The `_scheduleCellsToRenderUpdate` will set it to true
    // if a hiPri update needs to perform. If `componentDidUpdate` is triggered with
    // `this._hiPriInProgress=true`, means it's triggered by the hiPri update. The
    // `_scheduleCellsToRenderUpdate` will check this condition and not perform
    // another hiPri update.
    const hiPriInProgress = this._hiPriInProgress;
    this._scheduleCellsToRenderUpdate();
    // Make sure setting `this._hiPriInProgress` back to false after `componentDidUpdate`
    // is triggered with `this._hiPriInProgress = true`
    if (hiPriInProgress) {
      this._hiPriInProgress = false;
    }
  }

_averageCellLength = 0;
  // Maps a cell key to the set of keys for all outermost child lists within that cell
  _cellKeysToChildListKeys: Map<string, Set<string>> = new Map();
  _cellRefs = {};
  _fillRateHelper: FillRateHelper;
  _frames = {};
  _footerLength = 0;
  _hasDoneInitialScroll = false;
  _hasInteracted = false;
  _hasMore = false;
  _hasWarned = {};
  _headerLength = 0;
  _hiPriInProgress: boolean = false; // flag to prevent infinite hiPri cell limit update
  _highestMeasuredFrameIndex = 0;
  _indicesToKeys: Map<number, string> = new Map();
  _nestedChildLists: Map<
    string,
    {
      ref: ?VirtualizedList,
      state: ?ChildListState,
      ...
    },
  > = new Map();
  _offsetFromParentVirtualizedList: number = 0;
  _prevParentOffset: number = 0;
  _scrollMetrics = {
    contentLength: 0,
    dOffset: 0,
    dt: 10,
    offset: 0,
    timestamp: 0,
    velocity: 0,
    visibleLength: 0,
  };
  _scrollRef: ?React.ElementRef<any> = null;
  _sentEndForContentLength = 0;
  _totalCellLength = 0;
  _totalCellsMeasured = 0;
  _updateCellsToRenderBatcher: Batchinator;
  _viewabilityTuples: Array<ViewabilityHelperCallbackTuple> = [];

_captureScrollRef = ref => {
    this._scrollRef = ref;
  };

_computeBlankness() {
    this._fillRateHelper.computeBlankness(
      this.props,
      this.state,
      this._scrollMetrics,
    );
  }

_defaultRenderScrollComponent = props => {
    const onRefresh = props.onRefresh;
    if (this._isNestedWithSameOrientation()) {
      // $FlowFixMe - Typing ReactNativeComponent revealed errors
      return <View {...props} />;
    } else if (onRefresh) {
      invariant(
        typeof props.refreshing === 'boolean',
        '`refreshing` prop must be set as a boolean in order to use `onRefresh`, but got `' +
          /* $FlowFixMe(>=0.111.0 site=react_native_fb) This comment suppresses
           * an error found when Flow v0.111 was deployed. To see the error,
           * delete this comment and run Flow. */
          JSON.stringify(props.refreshing) +
          '`',
      );
      return (
        // $FlowFixMe Invalid prop usage
        <ScrollView
          {...props}
          refreshControl={
            props.refreshControl == null ? (
              <RefreshControl
                refreshing={props.refreshing}
                onRefresh={onRefresh}
                progressViewOffset={props.progressViewOffset}
              />
            ) : (
              props.refreshControl
            )
          }
        />
      );
    } else {
      // $FlowFixMe Invalid prop usage
      return <ScrollView {...props} />;
    }
  };

_onCellLayout(e, cellKey, index) {
    const layout = e.nativeEvent.layout;
    const next = {
      offset: this._selectOffset(layout),
      length: this._selectLength(layout),
      index,
      inLayout: true,
    };
    const curr = this._frames[cellKey];
    if (
      !curr ||
      next.offset !== curr.offset ||
      next.length !== curr.length ||
      index !== curr.index
    ) {
      this._totalCellLength += next.length - (curr ? curr.length : 0);
      this._totalCellsMeasured += curr ? 0 : 1;
      this._averageCellLength =
        this._totalCellLength / this._totalCellsMeasured;
      this._frames[cellKey] = next;
      this._highestMeasuredFrameIndex = Math.max(
        this._highestMeasuredFrameIndex,
        index,
      );
      this._scheduleCellsToRenderUpdate();
    } else {
      this._frames[cellKey].inLayout = true;
    }

this._triggerRemeasureForChildListsInCell(cellKey);

this._computeBlankness();
    this._updateViewableItems(this.props.data);
  }

_onCellUnmount = (cellKey: string) => {
    const curr = this._frames[cellKey];
    if (curr) {
      this._frames[cellKey] = {...curr, inLayout: false};
    }
  };

_triggerRemeasureForChildListsInCell(cellKey: string): void {
    const childListKeys = this._cellKeysToChildListKeys.get(cellKey);
    if (childListKeys) {
      for (let childKey of childListKeys) {
        const childList = this._nestedChildLists.get(childKey);
        childList &&
          childList.ref &&
          childList.ref.measureLayoutRelativeToContainingList();
      }
    }
  }

measureLayoutRelativeToContainingList(): void {
    // TODO (T35574538): findNodeHandle sometimes crashes with "Unable to find
    // node on an unmounted component" during scrolling
    try {
      if (!this._scrollRef) {
        return;
      }
      // We are assuming that getOutermostParentListRef().getScrollRef()
      // is a non-null reference to a ScrollView
      this._scrollRef.measureLayout(
        this.context.virtualizedList.getOutermostParentListRef().getScrollRef(),
        (x, y, width, height) => {
          this._offsetFromParentVirtualizedList = this._selectOffset({x, y});
          this._scrollMetrics.contentLength = this._selectLength({
            width,
            height,
          });
          const scrollMetrics = this._convertParentScrollMetrics(
            this.context.virtualizedList.getScrollMetrics(),
          );
          this._scrollMetrics.visibleLength = scrollMetrics.visibleLength;
          this._scrollMetrics.offset = scrollMetrics.offset;
        },
        error => {
          console.warn(
            "VirtualizedList: Encountered an error while measuring a list's" +
              ' offset from its containing VirtualizedList.',
          );
        },
      );
    } catch (error) {
      console.warn(
        'measureLayoutRelativeToContainingList threw an error',
        error.stack,
      );
    }
  }

_onLayout = (e: Object) => {
    if (this._isNestedWithSameOrientation()) {
      // Need to adjust our scroll metrics to be relative to our containing
      // VirtualizedList before we can make claims about list item viewability
      this.measureLayoutRelativeToContainingList();
    } else {
      this._scrollMetrics.visibleLength = this._selectLength(
        e.nativeEvent.layout,
      );
    }
    this.props.onLayout && this.props.onLayout(e);
    this._scheduleCellsToRenderUpdate();
    this._maybeCallOnEndReached();
  };

_onLayoutEmpty = e => {
    this.props.onLayout && this.props.onLayout(e);
  };

_getFooterCellKey(): string {
    return this._getCellKey() + '-footer';
  }

_onLayoutFooter = e => {
    this._triggerRemeasureForChildListsInCell(this._getFooterCellKey());
    this._footerLength = this._selectLength(e.nativeEvent.layout);
  };

_onLayoutHeader = e => {
    this._headerLength = this._selectLength(e.nativeEvent.layout);
  };

_renderDebugOverlay() {
    const normalize =
      this._scrollMetrics.visibleLength /
      (this._scrollMetrics.contentLength || 1);
    const framesInLayout = [];
    const itemCount = this.props.getItemCount(this.props.data);
    for (let ii = 0; ii < itemCount; ii++) {
      const frame = this._getFrameMetricsApprox(ii);
      /* $FlowFixMe(>=0.68.0 site=react_native_fb) This comment suppresses an
       * error found when Flow v0.68 was deployed. To see the error delete this
       * comment and run Flow. */
      if (frame.inLayout) {
        framesInLayout.push(frame);
      }
    }
    const windowTop = this._getFrameMetricsApprox(this.state.first).offset;
    const frameLast = this._getFrameMetricsApprox(this.state.last);
    const windowLen = frameLast.offset + frameLast.length - windowTop;
    const visTop = this._scrollMetrics.offset;
    const visLen = this._scrollMetrics.visibleLength;

return (
      <View style={[styles.debugOverlayBase, styles.debugOverlay]}>
        {framesInLayout.map((f, ii) => (
          <View
            key={'f' + ii}
            style={[
              styles.debugOverlayBase,
              styles.debugOverlayFrame,
              {
                top: f.offset * normalize,
                height: f.length * normalize,
              },
            ]}
          />
        ))}
        <View
          style={[
            styles.debugOverlayBase,
            styles.debugOverlayFrameLast,
            {
              top: windowTop * normalize,
              height: windowLen * normalize,
            },
          ]}
        />
        <View
          style={[
            styles.debugOverlayBase,
            styles.debugOverlayFrameVis,
            {
              top: visTop * normalize,
              height: visLen * normalize,
            },
          ]}
        />
      </View>
    );
  }

_selectLength(
    metrics: $ReadOnly<{
      height: number,
      width: number,
      ...
    }>,
  ): number {
    return !this.props.horizontal ? metrics.height : metrics.width;
  }

_selectOffset(
    metrics: $ReadOnly<{
      x: number,
      y: number,
      ...
    }>,
  ): number {
    return !this.props.horizontal ? metrics.y : metrics.x;
  }

_maybeCallOnEndReached() {
    const {
      data,
      getItemCount,
      onEndReached,
      onEndReachedThreshold,
    } = this.props;
    const {contentLength, visibleLength, offset} = this._scrollMetrics;
    const distanceFromEnd = contentLength - visibleLength - offset;
    const threshold = onEndReachedThreshold
      ? onEndReachedThreshold * visibleLength
      : 0;
    if (
      onEndReached &&
      this.state.last === getItemCount(data) - 1 &&
      distanceFromEnd < threshold &&
      this._scrollMetrics.contentLength !== this._sentEndForContentLength
    ) {
      // Only call onEndReached once for a given content length
      this._sentEndForContentLength = this._scrollMetrics.contentLength;
      onEndReached({distanceFromEnd});
    } else if (distanceFromEnd > threshold) {
      // If the user scrolls away from the end and back again cause
      // an onEndReached to be triggered again
      this._sentEndForContentLength = 0;
    }
  }

_onContentSizeChange = (width: number, height: number) => {
    if (
      width > 0 &&
      height > 0 &&
      this.props.initialScrollIndex != null &&
      this.props.initialScrollIndex > 0 &&
      !this._hasDoneInitialScroll
    ) {
      this.scrollToIndex({
        animated: false,
        index: this.props.initialScrollIndex,
      });
      this._hasDoneInitialScroll = true;
    }
    if (this.props.onContentSizeChange) {
      this.props.onContentSizeChange(width, height);
    }
    this._scrollMetrics.contentLength = this._selectLength({height, width});
    this._scheduleCellsToRenderUpdate();
    this._maybeCallOnEndReached();
  };

/* Translates metrics from a scroll event in a parent VirtualizedList into
   * coordinates relative to the child list.
   */
  _convertParentScrollMetrics = (metrics: {
    visibleLength: number,
    offset: number,
    ...
  }) => {
    // Offset of the top of the nested list relative to the top of its parent's viewport
    const offset = metrics.offset - this._offsetFromParentVirtualizedList;
    // Child's visible length is the same as its parent's
    const visibleLength = metrics.visibleLength;
    const dOffset = offset - this._scrollMetrics.offset;
    const contentLength = this._scrollMetrics.contentLength;

return {
      visibleLength,
      contentLength,
      offset,
      dOffset,
    };
  };

_onScroll = (e: Object) => {
    this._nestedChildLists.forEach(childList => {
      childList.ref && childList.ref._onScroll(e);
    });
    if (this.props.onScroll) {
      this.props.onScroll(e);
    }
    const timestamp = e.timeStamp;
    let visibleLength = this._selectLength(e.nativeEvent.layoutMeasurement);
    let contentLength = this._selectLength(e.nativeEvent.contentSize);
    let offset = this._selectOffset(e.nativeEvent.contentOffset);
    let dOffset = offset - this._scrollMetrics.offset;

if (this._isNestedWithSameOrientation()) {
      if (this._scrollMetrics.contentLength === 0) {
        // Ignore scroll events until onLayout has been called and we
        // know our offset from our offset from our parent
        return;
      }
      ({
        visibleLength,
        contentLength,
        offset,
        dOffset,
      } = this._convertParentScrollMetrics({
        visibleLength,
        offset,
      }));
    }

const dt = this._scrollMetrics.timestamp
      ? Math.max(1, timestamp - this._scrollMetrics.timestamp)
      : 1;
    const velocity = dOffset / dt;

if (
      dt > 500 &&
      this._scrollMetrics.dt > 500 &&
      contentLength > 5 * visibleLength &&
      !this._hasWarned.perf
    ) {
      infoLog(
        'VirtualizedList: You have a large list that is slow to update - make sure your ' +
          'renderItem function renders components that follow React performance best practices ' +
          'like PureComponent, shouldComponentUpdate, etc.',
        {dt, prevDt: this._scrollMetrics.dt, contentLength},
      );
      this._hasWarned.perf = true;
    }
    this._scrollMetrics = {
      contentLength,
      dt,
      dOffset,
      offset,
      timestamp,
      velocity,
      visibleLength,
    };
    this._updateViewableItems(this.props.data);
    if (!this.props) {
      return;
    }
    this._maybeCallOnEndReached();
    if (velocity !== 0) {
      this._fillRateHelper.activate();
    }
    this._computeBlankness();
    this._scheduleCellsToRenderUpdate();
  };

_scheduleCellsToRenderUpdate() {
    const {first, last} = this.state;
    const {offset, visibleLength, velocity} = this._scrollMetrics;
    const itemCount = this.props.getItemCount(this.props.data);
    let hiPri = false;
    const scrollingThreshold =
      /* $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.props.onEndReachedThreshold * visibleLength) / 2;
    // Mark as high priority if we're close to the start of the first item
    // But only if there are items before the first rendered item
    if (first > 0) {
      const distTop = offset - this._getFrameMetricsApprox(first).offset;
      hiPri =
        hiPri || distTop < 0 || (velocity < -2 && distTop < scrollingThreshold);
    }
    // Mark as high priority if we're close to the end of the last item
    // But only if there are items after the last rendered item
    if (last < itemCount - 1) {
      const distBottom =
        this._getFrameMetricsApprox(last).offset - (offset + visibleLength);
      hiPri =
        hiPri ||
        distBottom < 0 ||
        (velocity > 2 && distBottom < scrollingThreshold);
    }
    // Only trigger high-priority updates if we've actually rendered cells,
    // and with that size estimate, accurately compute how many cells we should render.
    // Otherwise, it would just render as many cells as it can (of zero dimension),
    // each time through attempting to render more (limited by maxToRenderPerBatch),
    // starving the renderer from actually laying out the objects and computing _averageCellLength.
    // If this is triggered in an `componentDidUpdate` followed by a hiPri cellToRenderUpdate
    // We shouldn't do another hipri cellToRenderUpdate
    if (
      hiPri &&
      (this._averageCellLength || this.props.getItemLayout) &&
      !this._hiPriInProgress
    ) {
      this._hiPriInProgress = true;
      // Don't worry about interactions when scrolling quickly; focus on filling content as fast
      // as possible.
      this._updateCellsToRenderBatcher.dispose({abort: true});
      this._updateCellsToRender();
      return;
    } else {
      this._updateCellsToRenderBatcher.schedule();
    }
  }

_onScrollBeginDrag = (e): void => {
    this._nestedChildLists.forEach(childList => {
      childList.ref && childList.ref._onScrollBeginDrag(e);
    });
    this._viewabilityTuples.forEach(tuple => {
      tuple.viewabilityHelper.recordInteraction();
    });
    this._hasInteracted = true;
    this.props.onScrollBeginDrag && this.props.onScrollBeginDrag(e);
  };

_onScrollEndDrag = (e): void => {
    const {velocity} = e.nativeEvent;
    if (velocity) {
      this._scrollMetrics.velocity = this._selectOffset(velocity);
    }
    this._computeBlankness();
    this.props.onScrollEndDrag && this.props.onScrollEndDrag(e);
  };

_onMomentumScrollEnd = (e): void => {
    this._scrollMetrics.velocity = 0;
    this._computeBlankness();
    this.props.onMomentumScrollEnd && this.props.onMomentumScrollEnd(e);
  };

_updateCellsToRender = () => {
    const {data, getItemCount, onEndReachedThreshold} = this.props;
    const isVirtualizationDisabled = this._isVirtualizationDisabled();
    this._updateViewableItems(data);
    if (!data) {
      return;
    }
    this.setState(state => {
      let newState;
      const {contentLength, offset, visibleLength} = this._scrollMetrics;
      if (!isVirtualizationDisabled) {
        // If we run this with bogus data, we'll force-render window {first: 0, last: 0},
        // and wipe out the initialNumToRender rendered elements.
        // So let's wait until the scroll view metrics have been set up. And until then,
        // we will trust the initialNumToRender suggestion
        if (visibleLength > 0 && contentLength > 0) {
          // If we have a non-zero initialScrollIndex and run this before we've scrolled,
          // we'll wipe out the initialNumToRender rendered elements starting at initialScrollIndex.
          // So let's wait until we've scrolled the view to the right place. And until then,
          // we will trust the initialScrollIndex suggestion.
          if (!this.props.initialScrollIndex || this._scrollMetrics.offset) {
            newState = computeWindowedRenderLimits(
              this.props,
              state,
              this._getFrameMetricsApprox,
              this._scrollMetrics,
            );
          }
        }
      } else {
        const distanceFromEnd = contentLength - visibleLength - offset;
        const renderAhead =
          /* $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. */
          distanceFromEnd < onEndReachedThreshold * visibleLength
            ? this.props.maxToRenderPerBatch
            : 0;
        newState = {
          first: 0,
          last: Math.min(state.last + renderAhead, getItemCount(data) - 1),
        };
      }
      if (newState && this._nestedChildLists.size > 0) {
        const newFirst = newState.first;
        const newLast = newState.last;
        // If some cell in the new state has a child list in it, we should only render
        // up through that item, so that we give that list a chance to render.
        // Otherwise there's churn from multiple child lists mounting and un-mounting
        // their items.
        for (let ii = newFirst; ii <= newLast; ii++) {
          const cellKeyForIndex = this._indicesToKeys.get(ii);
          const childListKeys =
            cellKeyForIndex &&
            this._cellKeysToChildListKeys.get(cellKeyForIndex);
          if (!childListKeys) {
            continue;
          }
          let someChildHasMore = false;
          // For each cell, need to check whether any child list in it has more elements to render
          for (let childKey of childListKeys) {
            const childList = this._nestedChildLists.get(childKey);
            if (childList && childList.ref && childList.ref.hasMore()) {
              someChildHasMore = true;
              break;
            }
          }
          if (someChildHasMore) {
            newState.last = ii;
            break;
          }
        }
      }
      if (
        newState != null &&
        newState.first === state.first &&
        newState.last === state.last
      ) {
        newState = null;
      }
      return newState;
    });
  };

_createViewToken = (index: number, isViewable: boolean) => {
    const {data, getItem, keyExtractor} = this.props;
    const item = getItem(data, index);
    return {index, item, key: keyExtractor(item, index), isViewable};
  };

_getFrameMetricsApprox = (
    index: number,
  ): {
    length: number,
    offset: number,
    ...
  } => {
    const frame = this._getFrameMetrics(index);
    if (frame && frame.index === index) {
      // check for invalid frames due to row re-ordering
      return frame;
    } else {
      const {getItemLayout} = this.props;
      invariant(
        !getItemLayout,
        'Should not have to estimate frames when a measurement metrics function is provided',
      );
      return {
        length: this._averageCellLength,
        offset: this._averageCellLength * index,
      };
    }
  };

_getFrameMetrics = (
    index: number,
  ): ?{
    length: number,
    offset: number,
    index: number,
    inLayout?: boolean,
    ...
  } => {
    const {
      data,
      getItem,
      getItemCount,
      getItemLayout,
      keyExtractor,
    } = this.props;
    invariant(
      getItemCount(data) > index,
      'Tried to get frame for out of range index ' + index,
    );
    const item = getItem(data, index);
    let frame = item && this._frames[keyExtractor(item, index)];
    if (!frame || frame.index !== index) {
      if (getItemLayout) {
        frame = getItemLayout(data, index);
        if (__DEV__) {
          const frameType = PropTypes.shape({
            length: PropTypes.number.isRequired,
            offset: PropTypes.number.isRequired,
            index: PropTypes.number.isRequired,
          }).isRequired;
          PropTypes.checkPropTypes(
            {frame: frameType},
            {frame},
            'frame',
            'VirtualizedList.getItemLayout',
          );
        }
      }
    }
    /* $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 frame;
  };

_updateViewableItems(data: any) {
    const {getItemCount} = this.props;

this._viewabilityTuples.forEach(tuple => {
      tuple.viewabilityHelper.onUpdate(
        getItemCount(data),
        this._scrollMetrics.offset,
        this._scrollMetrics.visibleLength,
        this._getFrameMetrics,
        this._createViewToken,
        tuple.onViewableItemsChanged,
        this.state,
      );
    });
  }
}

type CellRendererProps = {
  CellRendererComponent?: ?React.ComponentType<any>,
  ItemSeparatorComponent: ?React.ComponentType<*>,
  cellKey: string,
  fillRateHelper: FillRateHelper,
  horizontal: ?boolean,
  index: number,
  inversionStyle: ViewStyleProp,
  item: Item,
  // This is extracted by ScrollViewStickyHeader
  onLayout: (event: Object) => void,
  onUnmount: (cellKey: string) => void,
  onUpdateSeparators: (cellKeys: Array<?string>, props: Object) => void,
  parentProps: {
    // e.g. height, y,
    getItemLayout?: (
      data: any,
      index: number,
    ) => {
      length: number,
      offset: number,
      index: number,
      ...
    },
    renderItem?: ?RenderItemType<Item>,
    ListItemComponent?: ?(React.ComponentType<any> | React.Element<any>),
    ...
  },
  prevCellKey: ?string,
  ...
};

type CellRendererState = {
  separatorProps: $ReadOnly<{|
    highlighted: boolean,
    leadingItem: ?Item,
  |}>,
  ...
};

class CellRenderer extends React.Component<
  CellRendererProps,
  CellRendererState,
> {
  state = {
    separatorProps: {
      highlighted: false,
      leadingItem: this.props.item,
    },
  };

static childContextTypes = {
    virtualizedCell: PropTypes.shape({
      cellKey: PropTypes.string,
    }),
  };

static getDerivedStateFromProps(
    props: CellRendererProps,
    prevState: CellRendererState,
  ): ?CellRendererState {
    return {
      separatorProps: {
        ...prevState.separatorProps,
        leadingItem: props.item,
      },
    };
  }

getChildContext() {
    return {
      virtualizedCell: {
        cellKey: this.props.cellKey,
      },
    };
  }

// TODO: consider factoring separator stuff out of VirtualizedList into FlatList since it's not
  // reused by SectionList and we can keep VirtualizedList simpler.
  _separators = {
    highlight: () => {
      const {cellKey, prevCellKey} = this.props;
      this.props.onUpdateSeparators([cellKey, prevCellKey], {
        highlighted: true,
      });
    },
    unhighlight: () => {
      const {cellKey, prevCellKey} = this.props;
      this.props.onUpdateSeparators([cellKey, prevCellKey], {
        highlighted: false,
      });
    },
    updateProps: (select: 'leading' | 'trailing', newProps: Object) => {
      const {cellKey, prevCellKey} = this.props;
      this.props.onUpdateSeparators(
        [select === 'leading' ? prevCellKey : cellKey],
        newProps,
      );
    },
  };

updateSeparatorProps(newProps: Object) {
    this.setState(state => ({
      separatorProps: {...state.separatorProps, ...newProps},
    }));
  }

componentWillUnmount() {
    this.props.onUnmount(this.props.cellKey);
  }

_renderElement(renderItem, ListItemComponent, item, index) {
    if (renderItem && ListItemComponent) {
      console.warn(
        'VirtualizedList: Both ListItemComponent and renderItem props are present. ListItemComponent will take' +
          ' precedence over renderItem.',
      );
    }

if (ListItemComponent) {
      /* $FlowFixMe(>=0.108.0 site=react_native_fb) This comment suppresses an
       * error found when Flow v0.108 was deployed. To see the error, delete
       * this comment and run Flow. */
      return React.createElement(ListItemComponent, {
        item,
        index,
        separators: this._separators,
      });
    }

if (renderItem) {
      return renderItem({
        item,
        index,
        separators: this._separators,
      });
    }

invariant(
      false,
      'VirtualizedList: Either ListItemComponent or renderItem props are required but none were found.',
    );
  }

render() {
    const {
      CellRendererComponent,
      ItemSeparatorComponent,
      fillRateHelper,
      horizontal,
      item,
      index,
      inversionStyle,
      parentProps,
    } = this.props;
    const {renderItem, getItemLayout, ListItemComponent} = parentProps;
    const element = this._renderElement(
      renderItem,
      ListItemComponent,
      item,
      index,
    );

class VirtualizedCellWrapper extends React.Component<{
  cellKey: string,
  children: React.Node,
  ...
}> {
  static childContextTypes = {
    virtualizedCell: PropTypes.shape({
      cellKey: PropTypes.string,
    }),
  };

getChildContext() {
    return {
      virtualizedCell: {
        cellKey: this.props.cellKey,
      },
    };
  }

render() {
    return this.props.children;
  }
}

function describeNestedLists(childList: {
  +cellKey: string,
  +key: string,
  +ref: VirtualizedList,
  +parentDebugInfo: ListDebugInfo,
  +horizontal: boolean,
  ...
}) {
  let trace =
    'VirtualizedList trace:\n' +
    `  Child (${childList.horizontal ? 'horizontal' : 'vertical'}):\n` +
    `    listKey: ${childList.key}\n` +
    `    cellKey: ${childList.cellKey}`;

const styles = StyleSheet.create({
  verticallyInverted: {
    transform: [{scaleY: -1}],
  },
  horizontallyInverted: {
    transform: [{scaleX: -1}],
  },
  row: {
    flexDirection: 'row',
  },
  rowReverse: {
    flexDirection: 'row-reverse',
  },
  columnReverse: {
    flexDirection: 'column-reverse',
  },
  debug: {
    flex: 1,
  },
  debugOverlayBase: {
    position: 'absolute',
    top: 0,
    right: 0,
  },
  debugOverlay: {
    bottom: 0,
    width: 20,
    borderColor: 'blue',
    borderWidth: 1,
  },
  debugOverlayFrame: {
    left: 0,
    backgroundColor: 'orange',
  },
  debugOverlayFrameLast: {
    left: 0,
    borderColor: 'green',
    borderWidth: 2,
  },
  debugOverlayFrameVis: {
    left: 0,
    borderColor: 'red',
    borderWidth: 2,
  },
});

module.exports = VirtualizedList;

Changed text

Open file

'use strict';

const Batchinator = require('../Interaction/Batchinator');
const FillRateHelper = require('./FillRateHelper');
const ReactNative = require('../Renderer/shims/ReactNative');
const RefreshControl = require('../Components/RefreshControl/RefreshControl');
const ScrollView = require('../Components/ScrollView/ScrollView');
const StyleSheet = require('../StyleSheet/StyleSheet');
const View = require('../Components/View/View');
const ViewabilityHelper = require('./ViewabilityHelper');

const flattenStyle = require('../StyleSheet/flattenStyle');
const infoLog = require('../Utilities/infoLog');
const invariant = require('invariant');

const {computeWindowedRenderLimits} = require('./VirtualizeUtils');

import * as React from 'react';
import type {ScrollResponderType} from '../Components/ScrollView/ScrollView';
import type {ViewStyleProp} from '../StyleSheet/StyleSheet';
import type {
  ViewabilityConfig,
  ViewToken,
  ViewabilityConfigCallbackPair,
} from './ViewabilityHelper';
import {
  VirtualizedListCellContextProvider,
  VirtualizedListContext,
  VirtualizedListContextProvider,
  type ChildListState,
  type ListDebugInfo,
} from './VirtualizedListContext.js';

type Item = any;

export type Separators = {
  highlight: () => void,
  unhighlight: () => void,
  updateProps: (select: 'leading' | 'trailing', newProps: Object) => void,
  ...
};

export type RenderItemProps<ItemT> = {
  item: ItemT,
  index: number,
  separators: Separators,
  ...
};

export type RenderItemType<ItemT> = (
  info: RenderItemProps<ItemT>,
) => React.Node;

type Props = {|
  ...React.ElementConfig<typeof ScrollView>,
  ...RequiredProps,
  ...OptionalProps,
|};

let _usedIndexForKey = false;
let _keylessItemComponentName: string = '';

type State = {
  first: number,
  last: number,
};

if (this._scrollRef == null) {
      return;
    }

if (this._scrollRef.scrollTo == null) {
      console.warn(
        'No scrollTo method provided. This may be because you have two nested ' +
          'VirtualizedLists with the same orientation, or because you are ' +
          'using a custom component that does not implement scrollTo.',
      );
      return;
    }

this._scrollRef.scrollTo(
      this.props.horizontal ? {x: offset, animated} : {y: offset, animated},
    );
  }

// scrollToIndex may be janky without getItemLayout prop
  scrollToIndex(params: {
    animated?: ?boolean,
    index: number,
    viewOffset?: number,
    viewPosition?: number,
    ...
  }) {
    const {
      data,
      horizontal,
      getItemCount,
      getItemLayout,
      onScrollToIndexFailed,
    } = this.props;
    const {animated, index, viewOffset, viewPosition} = params;
    invariant(
      index >= 0,
      `scrollToIndex out of range: requested index ${index} but minimum is 0`,
    );
    invariant(
      getItemCount(data) >= 1,
      `scrollToIndex out of range: item length ${getItemCount(
        data,
      )} but minimum is 1`,
    );
    invariant(
      index < getItemCount(data),
      `scrollToIndex out of range: requested index ${index} is out of 0 to ${getItemCount(
        data,
      ) - 1}`,
    );
    if (!getItemLayout && index > this._highestMeasuredFrameIndex) {
      invariant(
        !!onScrollToIndexFailed,
        'scrollToIndex should be used in conjunction with getItemLayout or onScrollToIndexFailed, ' +
          'otherwise there is no way to know the location of offscreen indices or handle failures.',
      );
      onScrollToIndexFailed({
        averageItemLength: this._averageCellLength,
        highestMeasuredFrameIndex: this._highestMeasuredFrameIndex,
        index,
      });
      return;
    }
    const frame = this._getFrameMetricsApprox(index);
    const offset =
      Math.max(
        0,
        frame.offset -
          (viewPosition || 0) *
            (this._scrollMetrics.visibleLength - frame.length),
      ) - (viewOffset || 0);

if (this._scrollRef == null) {
      return;
    }

this._scrollRef.scrollTo(
      horizontal ? {x: offset, animated} : {y: offset, animated},
    );
  }

if (this._scrollRef == null) {
      return;
    }

this._scrollRef.scrollTo(
      this.props.horizontal ? {x: offset, animated} : {y: offset, animated},
    );
  }

flashScrollIndicators() {
    if (this._scrollRef == null) {
      return;
    }

this._scrollRef.flashScrollIndicators();
  }

setNativeProps(props: Object) {
    if (this._scrollRef) {
      this._scrollRef.setNativeProps(props);
    }
  }

_getCellKey(): string {
    return this.context?.cellKey || 'rootList';
  }

_getListKey(): string {
    return this.props.listKey || this._getCellKey();
  }

_getDebugInfo(): ListDebugInfo {
    return {
      listKey: this._getListKey(),
      cellKey: this._getCellKey(),
      horizontal: !!this.props.horizontal,
      parent: this.context?.debugInfo,
    };
  }

_getScrollMetrics = () => {
    return this._scrollMetrics;
  };

hasMore(): boolean {
    return this._hasMore;
  }

_getOutermostParentListRef = () => {
    if (this._isNestedWithSameOrientation()) {
      return this.context.getOutermostParentListRef();
    } else {
      return this;
    }
  };

_getNestedChildState = (key: string): ?ChildListState => {
    const existingChildData = this._nestedChildLists.get(key);
    return existingChildData && existingChildData.state;
  };

if (this._hasInteracted) {
      childList.ref.recordInteraction();
    }
  };

state: State;

constructor(props: Props) {
    super(props);
    invariant(
      // $FlowFixMe
      !props.onScroll || !props.onScroll.__isNative,
      'Components based on VirtualizedList must be wrapped with Animated.createAnimatedComponent ' +
        'to support native onScroll events with useNativeDriver',
    );

invariant(
      props.windowSize > 0,
      'VirtualizedList: The windowSize prop must be present and set to a value greater than 0.',
    );

if (this._isNestedWithSameOrientation()) {
      const storedState = this.context.getNestedChildState(this._getListKey());
      if (storedState) {
        initialState = storedState;
        this.state = storedState;
        this._frames = storedState.frames;
      }
    }

this.state = initialState;
  }

componentDidMount() {
    if (this._isNestedWithSameOrientation()) {
      this.context.registerAsNestedChild({
        cellKey: this._getCellKey(),
        key: this._getListKey(),
        ref: this,
        // NOTE: When the child mounts (here) it's not necessarily safe to read
        // the parent's props. This is why we explicitly propagate debugInfo
        // "down" via context and "up" again via this method call on the
        // parent.
        parentDebugInfo: this.context.debugInfo,
      });
    }
  }

componentWillUnmount() {
    if (this._isNestedWithSameOrientation()) {
      this.context.unregisterAsNestedChild({
        key: this._getListKey(),
        state: {
          first: this.state.first,
          last: this.state.last,
          frames: this._frames,
        },
      });
    }
    this._updateViewableItems(null);
    this._updateCellsToRenderBatcher.dispose({abort: true});
    this._viewabilityTuples.forEach(tuple => {
      tuple.viewabilityHelper.dispose();
    });
    this._fillRateHelper.deactivateAndFlush();
  }

_isVirtualizationDisabled(): boolean {
    return this.props.disableVirtualization || false;
  }

_isNestedWithSameOrientation(): boolean {
    const nestedContext = this.context;
    return !!(
      nestedContext && !!nestedContext.horizontal === !!this.props.horizontal
    );
  }

render(): React.Node {
    if (__DEV__) {
      const flatStyles = flattenStyle(this.props.contentContainerStyle);
      if (flatStyles != null && flatStyles.flexWrap === 'wrap') {
        console.warn(
          '`flexWrap: `wrap`` is not supported with the `VirtualizedList` components.' +
            'Consider using `numColumns` with `FlatList` instead.',
        );
      }
    }
    const {
      ListEmptyComponent,
      ListFooterComponent,
      ListHeaderComponent,
    } = this.props;
    const {data, horizontal} = this.props;
    const isVirtualizationDisabled = this._isVirtualizationDisabled();
    const inversionStyle = this.props.inverted
      ? this.props.horizontal
        ? styles.horizontallyInverted
        : styles.verticallyInverted
      : null;
    const cells = [];
    const stickyIndicesFromProps = new Set(this.props.stickyHeaderIndices);
    const stickyHeaderIndices = [];
    if (ListHeaderComponent) {
      if (stickyIndicesFromProps.has(0)) {
        stickyHeaderIndices.push(0);
      }
      const element = React.isValidElement(ListHeaderComponent) ? (
        ListHeaderComponent
      ) : (
        // $FlowFixMe
        <ListHeaderComponent />
      );
      cells.push(
        <VirtualizedListCellContextProvider
          cellKey={this._getCellKey() + '-header'}
          key="$header">
          <View
            onLayout={this._onLayoutHeader}
            style={StyleSheet.compose(
              inversionStyle,
              this.props.ListHeaderComponentStyle,
            )}>
            {
              // $FlowFixMe - Typing ReactNativeComponent revealed errors
              element
            }
          </View>
        </VirtualizedListCellContextProvider>,
      );
    }
    const itemCount = this.props.getItemCount(data);
    if (itemCount > 0) {
      _usedIndexForKey = false;
      _keylessItemComponentName = '';
      const spacerKey = !horizontal ? 'height' : 'width';
      const lastInitialIndex = this.props.initialScrollIndex
        ? -1
        : this.props.initialNumToRender - 1;
      const {first, last} = this.state;
      this._pushCells(
        cells,
        stickyHeaderIndices,
        stickyIndicesFromProps,
        0,
        lastInitialIndex,
        inversionStyle,
      );
      const firstAfterInitial = Math.max(lastInitialIndex + 1, first);
      if (!isVirtualizationDisabled && first > lastInitialIndex + 1) {
        let insertedStickySpacer = false;
        if (stickyIndicesFromProps.size > 0) {
          const stickyOffset = ListHeaderComponent ? 1 : 0;
          // See if there are any sticky headers in the virtualized space that we need to render.
          for (let ii = firstAfterInitial - 1; ii > lastInitialIndex; ii--) {
            if (stickyIndicesFromProps.has(ii + stickyOffset)) {
              const initBlock = this._getFrameMetricsApprox(lastInitialIndex);
              const stickyBlock = this._getFrameMetricsApprox(ii);
              const leadSpace =
                stickyBlock.offset -
                initBlock.offset -
                (this.props.initialScrollIndex ? 0 : initBlock.length);
              cells.push(
                /* $FlowFixMe(>=0.111.0 site=react_native_fb) This comment
                 * suppresses an error found when Flow v0.111 was deployed. To
                 * see the error, delete this comment and run Flow. */
                <View key="$sticky_lead" style={{[spacerKey]: leadSpace}} />,
              );
              this._pushCells(
                cells,
                stickyHeaderIndices,
                stickyIndicesFromProps,
                ii,
                ii,
                inversionStyle,
              );
              const trailSpace =
                this._getFrameMetricsApprox(first).offset -
                (stickyBlock.offset + stickyBlock.length);
              cells.push(
                /* $FlowFixMe(>=0.111.0 site=react_native_fb) This comment
                 * suppresses an error found when Flow v0.111 was deployed. To
                 * see the error, delete this comment and run Flow. */
                <View key="$sticky_trail" style={{[spacerKey]: trailSpace}} />,
              );
              insertedStickySpacer = true;
              break;
            }
          }
        }
        if (!insertedStickySpacer) {
          const initBlock = this._getFrameMetricsApprox(lastInitialIndex);
          const firstSpace =
            this._getFrameMetricsApprox(first).offset -
            (initBlock.offset + initBlock.length);
          cells.push(
            /* $FlowFixMe(>=0.111.0 site=react_native_fb) This comment
             * suppresses an error found when Flow v0.111 was deployed. To see
             * the error, delete this comment and run Flow. */
            <View key="$lead_spacer" style={{[spacerKey]: firstSpace}} />,
          );
        }
      }
      this._pushCells(
        cells,
        stickyHeaderIndices,
        stickyIndicesFromProps,
        firstAfterInitial,
        last,
        inversionStyle,
      );
      if (!this._hasWarned.keys && _usedIndexForKey) {
        console.warn(
          'VirtualizedList: missing keys for items, make sure to specify a key or id property on each ' +
            'item or provide a custom keyExtractor.',
          _keylessItemComponentName,
        );
        this._hasWarned.keys = true;
      }
      if (!isVirtualizationDisabled && last < itemCount - 1) {
        const lastFrame = this._getFrameMetricsApprox(last);
        // Without getItemLayout, we limit our tail spacer to the _highestMeasuredFrameIndex to
        // prevent the user for hyperscrolling into un-measured area because otherwise content will
        // likely jump around as it renders in above the viewport.
        const end = this.props.getItemLayout
          ? itemCount - 1
          : Math.min(itemCount - 1, this._highestMeasuredFrameIndex);
        const endFrame = this._getFrameMetricsApprox(end);
        const tailSpacerLength =
          endFrame.offset +
          endFrame.length -
          (lastFrame.offset + lastFrame.length);
        cells.push(
          /* $FlowFixMe(>=0.111.0 site=react_native_fb) This comment suppresses
           * an error found when Flow v0.111 was deployed. To see the error,
           * delete this comment and run Flow. */
          <View key="$tail_spacer" style={{[spacerKey]: tailSpacerLength}} />,
        );
      }
    } else if (ListEmptyComponent) {
      const element: React.Element<any> = ((React.isValidElement(
        ListEmptyComponent,
      ) ? (
        ListEmptyComponent
      ) : (
        // $FlowFixMe
        <ListEmptyComponent />
      )): any);
      cells.push(
        React.cloneElement(element, {
          key: '$empty',
          onLayout: event => {
            this._onLayoutEmpty(event);
            if (element.props.onLayout) {
              element.props.onLayout(event);
            }
          },
          style: StyleSheet.compose(inversionStyle, element.props.style),
        }),
      );
    }
    if (ListFooterComponent) {
      const element = React.isValidElement(ListFooterComponent) ? (
        ListFooterComponent
      ) : (
        // $FlowFixMe
        <ListFooterComponent />
      );
      cells.push(
        <VirtualizedListCellContextProvider
          cellKey={this._getFooterCellKey()}
          key="$footer">
          <View
            onLayout={this._onLayoutFooter}
            style={StyleSheet.compose(
              inversionStyle,
              this.props.ListFooterComponentStyle,
            )}>
            {
              // $FlowFixMe - Typing ReactNativeComponent revealed errors
              element
            }
          </View>
        </VirtualizedListCellContextProvider>,
      );
    }
    const scrollProps = {
      ...this.props,
      onContentSizeChange: this._onContentSizeChange,
      onLayout: this._onLayout,
      onScroll: this._onScroll,
      onScrollBeginDrag: this._onScrollBeginDrag,
      onScrollEndDrag: this._onScrollEndDrag,
      onMomentumScrollBegin: this._onMomentumScrollBegin,
      onMomentumScrollEnd: this._onMomentumScrollEnd,
      scrollEventThrottle: this.props.scrollEventThrottle, // TODO: Android support
      invertStickyHeaders:
        this.props.invertStickyHeaders !== undefined
          ? this.props.invertStickyHeaders
          : this.props.inverted,
      stickyHeaderIndices,
      style: inversionStyle
        ? [inversionStyle, this.props.style]
        : this.props.style,
    };

this._hasMore =
      this.state.last < this.props.getItemCount(this.props.data) - 1;

_captureScrollRef = ref => {
    this._scrollRef = ref;
  };

_computeBlankness() {
    this._fillRateHelper.computeBlankness(
      this.props,
      this.state,
      this._scrollMetrics,
    );
  }

this._triggerRemeasureForChildListsInCell(cellKey);

this._computeBlankness();
    this._updateViewableItems(this.props.data);
  }

_onCellUnmount = (cellKey: string) => {
    const curr = this._frames[cellKey];
    if (curr) {
      this._frames[cellKey] = {...curr, inLayout: false};
    }
  };

measureLayoutRelativeToContainingList(): void {
    // TODO (T35574538): findNodeHandle sometimes crashes with "Unable to find
    // node on an unmounted component" during scrolling
    try {
      if (!this._scrollRef) {
        return;
      }
      // We are assuming that getOutermostParentListRef().getScrollRef()
      // is a non-null reference to a ScrollView
      this._scrollRef.measureLayout(
        this.context.getOutermostParentListRef().getScrollRef(),
        (x, y, width, height) => {
          this._offsetFromParentVirtualizedList = this._selectOffset({x, y});
          this._scrollMetrics.contentLength = this._selectLength({
            width,
            height,
          });
          const scrollMetrics = this._convertParentScrollMetrics(
            this.context.getScrollMetrics(),
          );
          this._scrollMetrics.visibleLength = scrollMetrics.visibleLength;
          this._scrollMetrics.offset = scrollMetrics.offset;
        },
        error => {
          console.warn(
            "VirtualizedList: Encountered an error while measuring a list's" +
              ' offset from its containing VirtualizedList.',
          );
        },
      );
    } catch (error) {
      console.warn(
        'measureLayoutRelativeToContainingList threw an error',
        error.stack,
      );
    }
  }

_onLayoutEmpty = e => {
    this.props.onLayout && this.props.onLayout(e);
  };

_getFooterCellKey(): string {
    return this._getCellKey() + '-footer';
  }

_onLayoutFooter = e => {
    this._triggerRemeasureForChildListsInCell(this._getFooterCellKey());
    this._footerLength = this._selectLength(e.nativeEvent.layout);
  };

_onLayoutHeader = e => {
    this._headerLength = this._selectLength(e.nativeEvent.layout);
  };

_selectLength(
    metrics: $ReadOnly<{
      height: number,
      width: number,
      ...
    }>,
  ): number {
    return !this.props.horizontal ? metrics.height : metrics.width;
  }

_selectOffset(
    metrics: $ReadOnly<{
      x: number,
      y: number,
      ...
    }>,
  ): number {
    return !this.props.horizontal ? metrics.y : metrics.x;
  }

_maybeCallOnEndReached() {
    const {
      data,
      getItemCount,
      onEndReached,
      onEndReachedThreshold,
    } = this.props;
    const {contentLength, visibleLength, offset} = this._scrollMetrics;
    const distanceFromEnd = contentLength - visibleLength - offset;
    const threshold = onEndReachedThreshold
      ? onEndReachedThreshold * visibleLength
      : 2;
    if (
      onEndReached &&
      this.state.last === getItemCount(data) - 1 &&
      distanceFromEnd < threshold &&
      this._scrollMetrics.contentLength !== this._sentEndForContentLength
    ) {
      // Only call onEndReached once for a given content length
      this._sentEndForContentLength = this._scrollMetrics.contentLength;
      onEndReached({distanceFromEnd});
    } else if (distanceFromEnd > threshold) {
      // If the user scrolls away from the end and back again cause
      // an onEndReached to be triggered again
      this._sentEndForContentLength = 0;
    }
  }

_onContentSizeChange = (width: number, height: number) => {
    if (
      width > 0 &&
      height > 0 &&
      this.props.initialScrollIndex != null &&
      this.props.initialScrollIndex > 0 &&
      !this._hasDoneInitialScroll
    ) {
      if (this.props.contentOffset == null) {
        this.scrollToIndex({
          animated: false,
          index: this.props.initialScrollIndex,
        });
      }
      this._hasDoneInitialScroll = true;
    }
    if (this.props.onContentSizeChange) {
      this.props.onContentSizeChange(width, height);
    }
    this._scrollMetrics.contentLength = this._selectLength({height, width});
    this._scheduleCellsToRenderUpdate();
    this._maybeCallOnEndReached();
  };

return {
      visibleLength,
      contentLength,
      offset,
      dOffset,
    };
  };

const dt = this._scrollMetrics.timestamp
      ? Math.max(1, timestamp - this._scrollMetrics.timestamp)
      : 1;
    const velocity = dOffset / dt;

_onScrollEndDrag = (e): void => {
    this._nestedChildLists.forEach(childList => {
      childList.ref && childList.ref._onScrollEndDrag(e);
    });
    const {velocity} = e.nativeEvent;
    if (velocity) {
      this._scrollMetrics.velocity = this._selectOffset(velocity);
    }
    this._computeBlankness();
    this.props.onScrollEndDrag && this.props.onScrollEndDrag(e);
  };

_onMomentumScrollBegin = (e): void => {
    this._nestedChildLists.forEach(childList => {
      childList.ref && childList.ref._onMomentumScrollBegin(e);
    });
    this.props.onMomentumScrollBegin && this.props.onMomentumScrollBegin(e);
  };

_onMomentumScrollEnd = (e): void => {
    this._nestedChildLists.forEach(childList => {
      childList.ref && childList.ref._onMomentumScrollEnd(e);
    });
    this._scrollMetrics.velocity = 0;
    this._computeBlankness();
    this.props.onMomentumScrollEnd && this.props.onMomentumScrollEnd(e);
  };

_updateViewableItems(data: any) {
    const {getItemCount} = this.props;

type CellRendererState = {
  separatorProps: $ReadOnly<{|
    highlighted: boolean,
    leadingItem: ?Item,
  |}>,
  ...
};

class CellRenderer extends React.Component<
  CellRendererProps,
  CellRendererState,
> {
  state = {
    separatorProps: {
      highlighted: false,
      leadingItem: this.props.item,
    },
  };

updateSeparatorProps(newProps: Object) {
    this.setState(state => ({
      separatorProps: {...state.separatorProps, ...newProps},
    }));
  }

componentWillUnmount() {
    this.props.onUnmount(this.props.cellKey);
  }

if (renderItem) {
      return renderItem({
        item,
        index,
        separators: this._separators,
      });
    }

invariant(
      false,
      'VirtualizedList: Either ListItemComponent or renderItem props are required but none were found.',
    );
  }

return (
      <VirtualizedListCellContextProvider cellKey={this.props.cellKey}>
        {result}
      </VirtualizedListCellContextProvider>
    );
  }
}

module.exports = VirtualizedList;