flatList (usage memory higher then Android OS)

[Navidhp]

React Native version:

System:
   OS: macOS High Sierra 10.13.6
   CPU: (4) x64 Intel(R) Core(TM) i5-2400 CPU @ 3.10GHz
   Memory: 1.97 GB / 12.00 GB
   Shell: 3.2.57 - /bin/bash
 Binaries:
   Node: 11.13.0 - /usr/local/bin/node
   Yarn: 1.15.2 - /usr/local/bin/yarn
   npm: 6.7.0 - /usr/local/bin/npm
 SDKs:
   iOS SDK:
     Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
   Android SDK:
     API Levels: 23, 26, 27, 28
     Build Tools: 23.0.1, 26.0.2, 26.0.3, 27.0.3, 28.0.2, 28.0.3
     System Images: android-23 | Google APIs Intel x86 Atom, android-27 | Android TV Intel x86 Atom, android-27 | Intel x86 Atom, android-27 | Intel x86 Atom_64, android-27 | Google APIs Intel x86 Atom, android-27 | Google Play Intel x86 Atom
 IDEs:
   Android Studio: 3.4 AI-183.6156.11.34.5522156
   Xcode: 10.1/10B61 - /usr/bin/xcodebuild
 npmPackages:
   react: 16.8.6 => 16.8.6 
   react-native: 0.60.4 => 0.60.4

i have a flatlist + image (react-native-fast-image) and my code have all recommended
standards for optimization of flatlist and all component's are pureComponent . shouldComponentUpdate implement for stateless component.
removeClippedSubviews , legacyImplementation and getItemLayout have been implemented
all but our consumptioned memory is higher than android os memory ,i looked to #13413 but not have any good solution, do you have any solution ?

related links :

https://facebook.github.io/react-native/docs/next/optimizing-flatlist-configuration

re-render message :

VirtualizedList: You have a large list that is slow to update - make sure your renderItem function renders components that follow React performance best practices like PureComponent, shouldComponentUpdate, etc. {dt: 5123, prevDt: 11364, contentLength: 4791.23828125}

flatList :

return (
                <FlatList
                    data={data}
                    extraData={this.state}
                    renderItem={_renderItemProduct}
                    keyExtractor={_keyExtractor}
                    removeClippedSubviews={true}
                    legacyImplementation={true}
                    getItemLayout={_getItemLayout}
                    windowSize={*default 21 but --> data.length*}
                    initialNumToRender={5}
                />
        );

renderItem and keyExtractor :

const _keyExtractor = (item, index) => `Row_${index}`;
const _renderItemProduct = ({ item }) => <ProductItem item={item} />  ---pureComponent--

getItemLayout :

ITEM_HEIGHT = 150;
const _getItemLayout = (data, index) => ({
            length: ITEM_HEIGHT * index,
            offset: ITEM_HEIGHT * index,
            index,
});

[react-native-bot]

It looks like you are using an older version of React Native. Please update to the latest release, v0.61 and verify if the issue still exists.

Details

The "Resolution: Old Version" label will be removed automatically once you edit your original post with the results of running `react-native info` on a project using the latest release.

[abhi-nahi]

This issue is present in newer version too.

[Navidhp]

any news ?

[react-native-bot]

I am closing this issue because it does not appear to have been verified on the latest release, and there has been no followup in a while.

If you found this thread after encountering the same issue in the latest release, please feel free to create a new issue with up-to-date information by clicking here.