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.

[thymikee]

Can confirm the getItemLayout is called with every cell update, which doesn't seem to be right. Will try to investigate this further, but any help is appreciated

[cpojer]

@thymikee any chance you could send a PR? ;)

[thymikee]

I have it on my list, but it may take a while :D

[stale]

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]

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.