question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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

screenshot_1511455651 .

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

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:14

github_iconTop GitHub Comments

6reactions
bolan9999commented, Dec 25, 2017

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

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

3reactions
ChrisLahayecommented, Nov 28, 2017

@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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

getItemLayout in React-Native FlatList - Stack Overflow
I have rendered items with the same alphabet as an item in the parent flatlist and rendered the items inside the children flatlists,...
Read more >
React Native's SectionList and getItemLayout - Medium
As for FlatList , you get given an index parameter, which, according to my experiments and the source, flattens all section headers and...
Read more >
Optimizing Flatlist Configuration - React Native
This prop is used for caching and as the React key to track item re-ordering. You can also use a key prop in...
Read more >
React Native FlatList scrollToIndex with Fixed or ... - Syntax Byte
Use the react-native FlatList scrollToIndex function to scroll a list view to a certain item's index whether you have fixed or variable row ......
Read more >
Usage | FlashList
If you are familiar with FlatList, you already know how to use FlashList. You can try out FlashList by changing the component name...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found