React-native: FlatList with getItemLayout(): Invariant Violation: Should not have to estimate frames when a measurement metrics function is provided

[Phrosh]

Is this a bug report?

yes

Environment

Environment:
OS: Windows 10 x64
Node: 10.0
npm: 5.5.1
Watchman: 4.9.0

Packages:
react-native: 0.50.0
react: 16.0.0

Target Platform: Android

Steps to Reproduce

Use a FlatList and pass in a getItemLayout prop

Expected Behavior

Everything works normal and I get a beautiful FlatList

Actual Behavior

The items are rendered but I get a red error screen of death stating the following:

Invariant Violation: TaskQueue: Error with task: Should not have to estimate frames when a measurement metrics function is provided

.

Reproducible Demo

Just return a
<FlatList getItemLayout={() => { return {length: 33, index: 3, offset: 334} }} data={['asdf', 'sdfsdf']} renderItem={({item}) => <Text>{item}</Text>} />
from the render method of a component and let the magic happen

[ChrisLahaye]

getItemLayout is called for each item, your method needs to depend on index.

Try something like this

 <FlatList getItemLayout={(data, index) => { return {length: 33, index, offset: 33 * index} }} data={['asdf', 'sdfsdf']} renderItem={({item}) => <Text>{item}</Text>} />

[Phrosh]

Nope, this still does not work

[ChrisLahaye]

@Phrosh Well if you expect someone to seriously help you, then you should come with a more detailed problem description. Your getItemLayout method needs to depend on index.

[ChristopherSheehan01]

@ChrisLahaye your answer is helpful to me! However I'm new to react-native so forgive my confusion, I see where "data" comes from because it's a FlatList prop, but where does index variable point to?

[rewieer]

You pass a function to getItemLayout that get called for every entry in your array.
In this case index is just the index of the current element in the array.

[bolan9999]

FlatList and SectionList is bad performance. Try this,please. may be it is a surprise for you

https://github.com/bolan9999/react-native-largelist

[cyphire]

I have had a similarproblem for a long time... gave up...

The new error changes it to explain about the 'key' property, but there IS NO KEY PROPERTY in the documentation. I changed:

to the following: (Added: key = {this.state.slideNum}).. Now it works!
`
....
key = {this.state.slideNum}
numColumns={this.state.slideNum}

`

[ChrisLahaye]

@cyphire that is most like unrelated to this issue. It is due to the fact that you are rendering an array of components instead of a single component. When rendering an array of components each component requires a key property for optimization.

And don't use react-native-largelist its full of bugs and null pointer exceptions, if only that library was as good as @bolan9999 is in marketing

[cyphire]

Yeah you are right, this is unrelated... I do have the key component updating in each element of the array. The problem I was having is that I was trying to change the numColumns, not dynamically but as a new value passed into the props. Nothing I did worked, i kept getting the invariantViolation, but about "cannot dynamically change column size, look at the key property of the list". Nothing has ever worked this way, no way to fix it. I just discovered that by putting the key property in the actual list of properties, it finally worked! I just don't think that this is documented.

Also I agree with the -largelist it even messed up my gradles and such!

[react-native-bot]

Thanks for posting this! It looks like you may not be using the latest version of React Native, v0.53.0, released on January 2018. Can you make sure this issue can still be reproduced in the latest version?

I am going to close this, but please feel free to open a new issue if you are able to confirm that this is still a problem in v0.53.0 or newer.

_{How to Contribute • What to Expect from Maintainers}

[alpamys-qanybet]

@ChrisLahaye, @cyphire I have a question maybe not related to this issue. How do calculate getItemLayout with 2 columns? There are two items on each row so, they must have same offset, am I right? But we do specify as offset: ITEM_HEIGHT * index which means that they have different offset.

[ChrisLahaye]

@alpamys-qanybet Offset dictates the space above the corresponding item (so the start position of an item). The offset is based on the assumption that each of the prior items are ITEM_HEIGHT in height. No matter how many horizontal columns you have, or maybe you even have two vertically placed rows in an item, ITEM_HEIGHT should match the total height of the most outer container for the most accurate rendering.

If your items are dynamic in size you should not use getItemLayout or add a static height which matches ITEM_HEIGHT.

[alpamys-qanybet]

@ChrisLahaye, I use getItemLayout and viewabilityConfig properties to get better performance, and yes, it does matter but after scrolling deep I see jumping effects, don't know why.

[ChrisLahaye]

@alpamys-qanybet You see jumping if your offset calculation (which is used to dictate the initial position of an item) doesn't match the actual offset caused by the prior items, so one or more items don't have ITEM_HEIGHT in height.