React Native Flatlist Causing HUGE performance issues on Android with only 5 images loaded

I am loading images from different URLs into a Flatlist in my app. For some reason when the images are not local images it makes the app memory consumption so high on Android that I get terrible frame drops even with only 5 images in the Flatlist... i've seen many posts about how 100+ images cause this issue in Flatlists but I am baffled that only 5 images are making my app basically unresponsive.. I did follow some of the performance optimization techniques i found online but they absolutely made no difference. Im using Expo for this project so id really like to keep it that way and not use react-native-fast-image... I would rather fix the issue than to throw another library at the problem. How is that there are absolutely no issues on iPhone but it causes such a huge performance issue on Android, it does not feel right, I feel like this is some sort of a bug. Here is my code.. is there something i'm missing?

import {FlatList} from 'react-native'

 return (
        <ScreenWrapper>
            <CustomHeaderBasic
                iconName="menu-outline"
                goBack={() => {
                    props.navigation.toggleDrawer()
                }}
                header="Gallery"
                headerColor={{ color: colors.textColor }}
            />

            <FlatList
                style={styles.flatList}
                onRefresh={loadGalleries}
                refreshing={loadingGalleries}
                data={galleries}
                keyExtractor={(item) => `${item.galleryID}`}
                renderItem={({ item, index }) => {
                    return (
                        <Thumbnail
                            images={item}
                            galleryPressedHandler={() => {
                                galleryPressedHandler(item)
                            }}
                            navigation={props.navigation}
                            galleryName={item.galleryName}
                            onActionsPressed={() => {
                                bottomSheetRef.current?.handlePresentModalPress()
                                setDeleteID(item.galleryID)
                            }}
                            key={item.galleryID}
                        />
                    )
                }}
                showsVerticalScrollIndicator={false}
                numColumns={2}
                columnWrapperStyle={{
                    marginLeft: 10,
                }}
                contentContainerStyle={{
                    paddingBottom: tabBarBottomPosition + 80,
                }}
                removeClippedSubviews
                initialNumToRender={8}
                maxToRenderPerBatch={10}
            />
        </ScreenWrapper>
    )
}

here is a console.log of my data being fed into the list, I'm hiding the IP for obvious reasons..

Array [
  Gallery {
    "eventDate": "2021-06-10 18:32:17",
    "galleryID": "48",
    "galleryName": "Test",
    "thumbnail": "http://xxx.xxx.xxx.xxx/uploads/60c25ab9944f0.jpeg",
  },
  Gallery {
    "eventDate": "2021-06-10 18:32:44",
    "galleryID": "49",
    "galleryName": "Test 2",
    "thumbnail": "http://xxx.xxx.xxx.xxx/uploads/60c25ad191549.jpeg",
  },
  Gallery {
    "eventDate": "2021-06-10 18:33:16",
    "galleryID": "50",
    "galleryName": "Desk",
    "thumbnail": "http://xxx.xxx.xxx.xxx/uploads/60c25af2160e9.jpeg",
  },
]


Read more here: https://stackoverflow.com/questions/67926958/react-native-flatlist-causing-huge-performance-issues-on-android-with-only-5-ima

Content Attribution

This content was originally published by haibert at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: