Infinite loop when passing {} as data for FlatList

Description

If you pass a non-array object to FlatList data property, ReactNative javascript thread gets stuck in a infinite loop, due to FlatList._getItemCount returning NaN.

Reproduction Steps

Pass any object that doesn’t has length property to FlatList.

Sample Code

https://snack.expo.io/BJrFCR9QZ

Simply: <FlatList data={{}} />

Solution

Change FlatList._getItemCount to test for the data.length:

_getItemCount = (data: ?Array<ItemT>): number => {
  return (data && data.length) ? Math.ceil(data.length / this.props.numColumns) : 0;
};

https://github.com/facebook/react-native/blob/master/Libraries/Lists/FlatList.js#L470

Additional Information

• React Native version: “0.44.0”,
• Platform: any

[strindhaug]

@Benzer1406 No, I haven’t bothered to create a new issue, yet. I started looking at the source myself and try to see if I could fix it myself.

Unfortunately the tests run by npm test doesn’t seem to be testing the actual execution of the code, and the flow tests npm run flow seems to be testing type information code that seems to be ignored when the actual code is executed.

The tests for the List library seems to mock (too) much of the actual execution; and it seems to be content if the FlatList tag is somehow translated into a RCTScrollView and this conversion by ReactTestRenderer.create does not seem to invoke the infinite loop bug.

The flow tests seem to cause errors about bad datatype when the data property is not an array; while in production code you can put all sort of junk in that property and it will either work (if it’s a valid array) or either an empty list or infinite loop if it’s not; no warnings is ever produced as long as it’s not null.

I have to somehow figure out a way to write a test that actually causes the infinite loop (that I know is still there) so that I can verify that any fix actually fixes the problem.

[Benzer1406]

@strindhaug Thanks for your detailed answer. Yes, I was figuring out and pondering about the fact that the problem was indeed an issue of a bad datatype. I could just figure out up to that point and reiterate the loop, but have no idea what it causes or what needs to be done to get out of the loop. Meanwhile I changed to the classic <ListView> even though it is deprecated, but at least it works.