CODEWITHSUNDEEP
androidreact-nativereact-native-flatlist
Naveed Sheriffdeen
Naveed Sheriffdeen

Reputation: 980

React native Flatlist Crashes on android

Using Flatlist causes app to crash on android. My code is,

<ScrollView style={{ flex:1 }}>
  <View style={{
              justifyContent: "space-around"
            }}
          >
            <FlatList
              data={this.state.topSuggested}
              keyExtractor={(item, index) => index.toString()}
              numColumns={3}
              renderItem={({ item, index }) => (
                <TopTileCard
                  id={item.dish_type_id}
                  name={item.name}
                  image={item.image}
                  pieces={item["COUNT(restaurant_items.id)"]}
                  onCardClick={this.topItemClick}
                  key={index}
                />
              )}
            />
          </View>
</ScrollView>

It only renders 6 times as it should, but it causes the app to crash, when the above FlatList was removed the app worked fine,

Any Idea on why this could occur, I have used to FlatList to render more than 200 items in other screens of my app, but this causes the app to crash.

When I ran the app in different devices and checked the logcat I found out that the crash occurs due to insufficient memory. rendering this page takes up around 800 mb of ram for some reason.

sample of topSuggested

[
  {
    COUNT(restaurant_items.id):7,
    dish_type_id:21,
    image:null,
    name:"Cheese Toast",
    type:"top"
  },
  {
    COUNT(restaurant_items.id):6,
    dish_type_id:548,
    image:null,
    name:"Chicken Biryani",
    type:"top"
  }

]

The top Suggested has six objects. like above

Any Help would be appreciated.

Thanks

Upvotes: 2

Views: 4151

Answers (2)

kartik patel
kartik patel

Reputation: 23

Try to Notice After How Much item (on average on different devices) it crashes. Then define MAXLIMIT per cycle and set a counter to measure it, When counter reach MAXLIMIT, just simply empty you DATA and Refill it, Set LOADMORE button at footer to Handle Refresh.

If you want Advanced it to different devices, Get LIMIT from user and set it Dynamically for performance(ex. for 2 Gb ram MAXLIMIT would be 50, and for 6 Gb ram 200) then it will run just as you want.

Upvotes: 0

user11508948
user11508948

Reputation: 31

I was having a similar issue with a Flatlist that was trying to render a large number of items on some older android versions. Adding initialNumToRender prop to FlatList worked for me, try making it a really low number like 1 or 2. It just means that the use will see the further items appear on the screen which I think is fine.

Alternatively you can remove the ScrollView as you don't seem to need it.

Upvotes: 3

Related Questions