Repository navigation
FlatList.getItemLayout called too many times #22444
Description
- 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,
}
});
Activity
genogeno commentedon Dec 6, 2018
The same thing happens to me.
malacca commentedon Dec 21, 2018
+1
gsunsnackv commentedon Jan 18, 2019
@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 commentedon Jan 18, 2019
@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 commentedon Jan 18, 2019
@genogeno Are you using https://bolan9999.github.io/react-native-largelist ?
genogeno commentedon Jan 18, 2019
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.
thymikee commentedon Mar 19, 2019
Can confirm the
getItemLayoutis called with every cell update, which doesn't seem to be right. Will try to investigate this further, but any help is appreciatedcpojer commentedon Mar 26, 2019
@thymikee any chance you could send a PR? ;)
thymikee commentedon Mar 27, 2019
I have it on my list, but it may take a while :D
stale commentedon Aug 4, 2019
Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.
stale commentedon Aug 11, 2019
Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.