React-native-fast-image: Taking too much memory, and app crashes

[sandeshnaroju]

Thanks for the beautiful library.

I am making a news app that contains news feed and every news article will have an Image to it. I am using this library to show images. Everything looks good but, the FastImage taking too much memory sometimes it is crossing 200MB and reaching 500MB upon using for few minutes. I don't know if it is kind of memory leak. Kindly assist me to resolve this isssue.

info Fetching system and libraries information...
System:
    OS: Linux 4.15 Ubuntu 16.04.6 LTS (Xenial Xerus)
    CPU: (4) x64 Intel(R) Core(TM) i7-6500U CPU @ 2.50GHz
    Memory: 286.99 MB / 7.68 GB
    Shell: 4.3.48 - /bin/bash
  Binaries:
    Node: 10.15.3 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/bin/yarn
    npm: 6.14.4 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    Android SDK:
      API Levels: 14, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29
      Build Tools: 28.0.3, 29.0.2, 30.0.1
      Android NDK: Not Found
  IDEs:
    Android Studio: Not Found
  Languages:
    Java: 1.8.0_252 - /usr/bin/javac
    Python: 2.7.12 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.13.1 => 16.13.1 
    react-native: 0.62.2 => 0.62.2 
  npmGlobalPackages:
    *react-native*: Not Found

this is how I am using the FastImage in my app.

  getSource = () => {
    if (this.props.item.node.featuredImage) {
      return {
        uri: this.props.item.node.featuredImage.node.sourceUrl,
      }
    } else {
      return require('../../assets/e-logo.png')
    }
  }

<FastImage
       source={this.getSource()}
       style={{
              borderRadius: 5,
              width: Dimensions.get('window').width - 20,
              height: ((Dimensions.get('window').width - 20) * 2) / 3,
     }}
   // resizeMode={FastImage.resizeMode.contain}
 />

[jordangrant]

@sandeshnaroju I used this library a few months ago, and I believe the memory issue I encountered was because the Images I were displaying were large file sizes. So when I was hitting, 4mb, 5mb, 8mb images it was literally using an equivalent amount of memory and the memory usage soared. I had to go and compress all the extremely large images I was pulling. Perhaps inspect the size of the files you're displaying.

[iambavith]

I am also facing this issue. using React Native 0.63.1 and "react-native-fast-image": "^8.3.2",

[mralj]

We have noticed in our app that for displaying local images, react native's _default_ Image actually performs better :)

Apart from that I don't completely agree with @jordangrant, IMHO, it's not file size that matters, but image dimensions.

So, for example, if you have 2MB image and 100kB image and both are of dimensions 1000 x 1000 px, they will take same amount of memory. And memory allocated is easily calculated as follows:
ImageWidth * ImageHeight * BytesUsedToRepresentEachPixel

Regarding BytesUsedToRepresentEachPixel - this can vary from image to image, eg. if you are serving JPEG this number is _usually_ 24 - 8 bits for each of R-G-B, and for example, for transparent PNGs, this number is _usually_ 32 (24 bits for RGB + 8 bits for alpha channel).

Also if you are going to render 1000 x 1000 px image into 100 x 100px container, app will still allocate memory for 1000 x 1000 px image. So, it is super important to serve Images from server which are as close as possible to container you are going to display them in.

They can be resized before caching and displaying them - which would imply smaller memory footprint, but fast-image doesn't support this yet :/ (I have plans to open PR for this feature, but not sure when 😕 nor that it will be merged)

References:

1. SDWebImage docs: link
2. This youtube talk: The Life of an Image on iOS

I hope this was helpful 😁

[mezalejandro]

Use this pr https://github.com/DylanVann/react-native-fast-image/pull/425 and then apply with patch-package