VirtualizedList + getItemLayout only renders initialNumToRender items

Is this a bug report?

Yes

Have you read the Contributing Guidelines?

Yes

Environment

1. react-native -v: 0.47.2
2. node -v: v6.10.3
3. npm -v: 3.10.10
4. yarn --version: n/a

Then, specify:

• Target Platform: iOS

• Development Operating System: macOS

• Build tools: Xcode

Steps to Reproduce

(Write your steps here:)

1. Create a component with a FlatList w/t getItemLayout, i.e.

<FlatList
            ref={ref => { const anyRef: any = ref; this._flatList = anyRef }}
            data={data}
            renderItem={this._renderItem}
            onViewableItemsChanged={this._onViewableItemsChanged}
            getItemLayout={this._getItemLayout}
            initialNumToRender={10}
          />

I am using the standard getItemLayout:

getItemLayout={(data, index) => (
  {length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index}
)}

1. Provide a data source that has more than initialNumToRender items
2. Render and scroll to bottom

Expected Behavior

(Write what you thought would happen.)

All items are rendered.

Actual Behavior

Only initialNumToRender items are rendered.

(Write what happened. Add screenshots!)

Reproducible Demo

The bug is in VirtualizedList:

const onLayout =
      getItemLayout && !parentProps.debug && !fillRateHelper.enabled()
        ? undefined
        : this.props.onLayout;

The fix is:

const onLayout = this.props.onLayout;

You need onLayout because somebody needs to call _onCellLayout(e, key, ii).

(Paste the link to an example project and exact instructions to reproduce the issue.)

[PublicParadise]

After working with getItemLayout plus my proposed fix for a few weeks I have come to the conclusion that getItemLayout cannot be used in production code.

Here are my recommendations:

1. Avoid getItemLayout. It’s not working correctly. I would classify the quality of the code as experimental at best.
2. Avoid scrollToIndex, scrollToItem, and scrollToEnd , because they require getItemLayout. Instead use scrollToOffset, which comes with fewer bugs.
3. Consider changing the documentation and let clients know about the experimental status of getItemLayout. Something along the lines of the removeClippedSubviews warning:

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

1. Please do something about the bug triage turn around times.

Good luck, I am closing this issue.

[Elijen]

Why is this issue closed? If getItemLayout is not working correctly the issue should stay open.