React native: Bad app performance after loading images

user_9854209 0
Viewed 5817

There seems to be no problem with LOADING the images. But there is a problem after they are already loaded.

In my app I load card images one by one throughout the game. Once I get to a point that I loaded 40 card images, the whole app becomes slow. It always happens at the 40th image, and when I continue loading more card images after the 40th, it becomes slower after each image load.

Practical details:

  1. React native with expo
  2. Requiring Images from Local folder into an array and importing that array.
  3. Single Image size between 15KB - 120KB, all images together: 3.1MB
  4. Component used for displaying the image: Image (react native simple image component)
  5. Using Array.map to display all images

Switching all the images with ugly images with a total of 300KB - makes the app run fast without any problem

The required array imported:

const CardsUris = [
  {uri:require('../assets/AC.png'), key:'AC'},
  {uri:require('../assets/AD.png'), key:'AD'},
  {uri:require('../assets/AH.png'), key:'AH'},
  {uri:require('../assets/AS.png'), key:'AS'}...
]

Component tree structure:

- Base
    - Container
        - <Image source={CardsUris[index].uri} />

Is there a way I can troubleshoot this problem? I couldn't find anything about such a problem that appears after loading the images.

expo react-native reactjs image performance
2 Answers

I feel your pain.

One thing I found that you can try to boost up the performance is bundling the image assets into your binary. To do that with Expo, use the assetBundlePatterns key in the app.json to provide a list of paths in your project directory:

"assetBundlePatterns": [
  "assets/images/*"
],

Another approach is to use an alternative package that renders images than the default one. React Native's Image component handles image caching like browsers for the most part. Many times for use-cases like yours I've noticed flickering, low performance loading from the cache and low performance in general.

So what you could try is FastImage - an Image replacement that solves these issues. Below the hood, FastImage is a wrapper around SDWebImage (iOS) and Glide (Android), so that's the secret sauce.

Do you render the images in a <FlatList />? If so, I'd give react-native-optimized-flatlist a shot too. This is an optimized version of React Native's <FlatList /> component that removes every item that is not inside the viewport.

If nothing else helps, I'd go for lower quality thumbnails for the images when they're all 40 in grid view.

user_13338360
user_15709870
Related