Image and ImageBackground memory leaks in iOS?

[xzilja]

• Review the documentation: https://facebook.github.io/react-native
• Search for existing issues: https://github.com/facebook/react-native/issues
• Use the latest React Native release: https://github.com/facebook/react-native/releases

Environment

  React Native Environment Info:
    System:
      OS: macOS 10.14.1
      CPU: x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
      Memory: 658.77 MB / 16.00 GB
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 10.11.0 - /usr/local/bin/node
      Yarn: 1.10.1 - /usr/local/bin/yarn
      npm: 6.4.1 - /usr/local/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
    IDEs:
      Xcode: 10.1/10B61 - /usr/bin/xcodebuild
    npmPackages:
      @types/react: 16.7.7 => 16.7.7 
      @types/react-native: 0.57.13 => 0.57.13 
      react: 16.7.0-alpha.2 => 16.7.0-alpha.2 
      react-native: 0.57.5 => 0.57.7 
    npmGlobalPackages:
      react-native-cli: 2.0.1

Description

I noticed high memory usage in my app that didn't go away. After tracing for leaks it looks like this is due to images. It seems like iOS is storing all images in memory and is never offloading them. I looked through documentation of Image but didn't find anything related to image caching nor how to offload them manually. Below is my profiler output for leaks

Each "spike" happens when new image is used / loaded. All these images are local and stored in Images.xcassets folder i.e. when I load them it looks something like

This happens with images loaded from Images.xcassets as well as ones required locally, i.e.

<Image source={{ uri: 'image_name' }} />

<Image source={require("../src/assets/myImage.png")} />

Note: This is not actually a lot of images loaded on one page, rather me navigating through my app and loading new assets on different views, so images are mounted and unmounted, but memory seems to be accumulating.

[xzilja]

Possibly related (some of these were closed due to inactivity, but as far as I can tell no solution was present prior to closing)

#2529
#21902
#12220

[xzilja]

UPDATE I got my hands on a low memory device (iPhone 5s running iOS) and wanted to see if iOS auto manages and offloads images from memory, but it was not the case. App keeps all these images in memory and crashes

[xzilja]

If I require images from custom assets folder defined in my project i.e. use require("./assets/someimg.png") graph looks fine, it loads images, but its not accumulating memory and is auto offloading.

UPDATE: I think it only happens in development, I guess due to images being loaded over http from packager, or images are minified in release so I can't get my app to crash.

[raphaelrk]

Also running into this issue but with remote images I save in my filesystem. Showing just ~40 of the same saved image (not that many for the feed app I'm working on) brings my RAM usage over 1gb, at which point my phone reboots.

This doesn't happen when I refer to remote URI's rather than local ones, but then the images flicker / aren't very performative which is why I save them to my device. Haven't checked whether this is also happening on Android since our app hasn't been crashing there.

[raphaelrk]

Update: made a reproducible demo with this snack. If you open it and show the perf monitor, you'll see as you scroll down the memory usage skyrockets until the point at which your phone crashes. Whereas if you switch out the local URIs for the remote URIs, memory usage stays low (but then you get flickering when mounting / unmounting these images).

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[xzilja]

Still an issue

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[raphaelrk]

Still an issue: updated snack for expo 35

Testing on physical iPhone Xs on iOS 13.1.3, using the cached images crashes and reboots my phone, while using the remote images works smoothly.

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[raphaelrk]

Still seeing the same testing on expo 36

[xzilja]

issue also persists in rn 61

[mohamedshuaau]

I am seeing 100+ new leaks and I am really not sure where this is occurring. I am not that experienced on IOS but I have my app running on iPhone. It starts off with 1000 memory leaks and there are new 100+ leaks everytime

[peterzanetti]

How are people working around this? Surely there are apps that have more than a handful of images in them?

[raphaelrk]

@peterzanetti I moved to using resized/compressed images after first running into this and that helped a ton. Previously my app was loading lots of high quality profile pictures over and over, now it loads 100, 320, or 800px wide compressed jpegs depending on how big the image will appear in the app.

[peterzanetti]

It seems insane to me that working with lots of high quality images is somehow unusual for a modern iOS app. When an image is not mounted, it should not be in memory. Period.

[MegaMaddin]

Sounds stupid, but worked in our case - for the assets stored within the app package, we switched to using PNGs. It's a bit more storage intensive and increases the app size, but that solved [as in workaround] the memory issues for us.

[jordangrant]

Big issue for me. Local bundled image assets all stored in memory and never released. Accumulates and crashes. ImageBackground component.

[jordangrant]

Solution for my app, Staats which has over 225 images bundled as templates.

1. Resize all local, bundled assets (Xcassets and android drawable folder) to 414x896 @ 458ppi (max iPhone res)
2. Save as PNG-8 (vs PNG-24)
3. Compress resulting images on tinyPNG.com

The reason I did this is because of DylanVann/react-native-fast-image#715 (comment) which states the resolution matters, not just the filesize!
This immediately dropped my memory usage from 1.2GB -> 885MB

When loading all my images at once (View All) my app easily crept up to 1.7GB and crashed.
After resizing the main images, it holds at 1.17GB.

If I use the app for an extended period of time, and load every (hundreds) of templates I'm still able to crash the app, so still lots of room for improvement...

Edit: After further resizing even more of my assets, memory stays below 900MB.

[github-actions]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions]

This issue was closed because it has been stalled for 7 days with no activity.