FlatList.getItemLayout called too many times

[HaloWang]

• Search for existing issues: https://github.com/facebook/react-native/issues
• Use the latest React Native release: https://github.com/facebook/react-native/releases
• Review the documentation: https://facebook.github.io/react-native

Environment

 React Native Environment Info:
 System:
 OS: macOS 10.14.1
 CPU: (8) x64 Intel(R) Core(TM) i7-4870HQ CPU @ 2.50GHz
 Memory: 1.78 GB / 16.00 GB
 Shell: 5.3 - /bin/zsh
 Binaries:
 Node: 11.2.0 - /usr/local/bin/node
 Yarn: 1.10.1 - /usr/local/bin/yarn
 npm: 6.4.1 - /usr/local/bin/npm
 Watchman: 4.9.0 - /usr/local/bin/watchman
 SDKs:
 iOS SDK:
 Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
 Android SDK:
 API Levels: 19, 23, 25, 26, 27
 Build Tools: 23.0.1, 23.0.3, 25.0.2, 26.0.2, 27.0.3, 28.0.3
 System Images: android-23 | Intel x86 Atom, android-23 | Intel x86 Atom_64, android-23 | Google APIs ARM EABI v7a, android-23 | Google APIs Intel x86 Atom, android-23 | Google APIs Intel x86 Atom_64
 IDEs:
 Android Studio: 3.2 AI-181.5540.7.32.5056338
 Xcode: 10.1/10B61 - /usr/bin/xcodebuild
 npmPackages:
 react: 16.6.1 => 16.6.1 
 react-native: 0.57.7 => 0.57.7 
 npmGlobalPackages:
 react-native-cli: 2.0.1
 react-native-create-library: 3.1.2
 react-native-git-upgrade: 0.2.7

Description

Using FlatList/SectionList, found FlatList.getItemLayout called too many times.
Even scroll a little distance FlatList will call getItemLayout for whole data, several times, perform bad.

#20467 is closed by bot.

Reproducible Demo

cd Destop && react-native init CrazyFlatList && cd CrazyFlatList && react-native run-ios

// App.js
import React, { Component } from 'react';
import { StyleSheet, Text, View, FlatList } from 'react-native';

const ItemHeight = 15

function _getLargeData() {
 let largeData = []
 for (let index = 0; index < 500; index++) {
 largeData.push(index.toString())
 }
 return largeData
}

export default class App extends Component {
 render() {
 return (
 <View style={styles.container}>
 <FlatList
 data={_getLargeData()}
 renderItem={({ item }) => <ItemView text={item} />}
 keyExtractor={(item, index) => item}
 getItemLayout={(data, index) => {
 // eg. I can find 'getItemLayout 0' 47 times in render method
 if (index == 0) {
 console.log("getItemLayout " + index)
 }
 return {
 index,
 length: ItemHeight,
 offset: ItemHeight * index,
 }
 }}
 />
 </View>
 );
 }
}

class ItemView extends React.PureComponent {
 render() {
 return <Text style={styles.item}>{this.props.text}</Text>
 }
}

const styles = StyleSheet.create({
 container: {
 flex: 1,
 justifyContent: 'center',
 alignItems: 'center',
 backgroundColor: '#F5FCFF',
 },
 item: {
 height: ItemHeight,
 }
});

[genogeno]

The same thing happens to me.

[malacca]

+1

[gsunsnackv]

@HaloWang @genogeno @malacca Is this only happening on Android 9.0 but not 8.x or 7.x ?
I wonder if this could be the root cause of #22744. FlatList try to load everything regardless if they are visible or not

[genogeno]

@gsunsnackv
This also happens to iOS. I gave up using Flatlist and so I used another library for lists.

I used this library. This is high performing when scrolling around 500 items.

https://github.com/Flipkart/recyclerlistview

[gsunsnackv]

@genogeno Are you using https://bolan9999.github.io/react-native-largelist ?

[genogeno]

No I am not using that. I am using this library.

https://github.com/Flipkart/recyclerlistview

This library I think does not use any flatlist implementation.