React-native: <Image> take up a lot memory on Android

[1c7]

Is this a bug report?

Yes

Have you read the Contributing Guidelines?

Yes

Environment

Environment:
  OS: macOS High Sierra 10.13.2
  Node: 8.9.4
  Yarn: 1.3.2
  npm: 5.6.0
  Watchman: 4.9.0
  Xcode: Xcode 9.2 Build version 9C40b
  Android Studio: 3.0 AI-171.4443003

Packages: (wanted => installed)
  react: 16.0.0 => 16.0.0
  react-native: 0.51.0 => 0.51.0

Steps to Reproduce

1. build a button that allow user to chose multiple image
   (I am using react-native-image-crop-picker for Android
2. display these image in a <FlatList>
3. select >20 image can cause App take 400~600MB memory.
4. app could crash, depending on if the phone is high-spec or low-spec, cheap phone are more likely to crash since it has less memory
   

Expected Behavior

it doesn't take that much memory and cause app crash.

Actual Behavior

take about 400mb to 600mb memory. then my app crash

Reproducible Demo

• Video demo(2 minute 38 second): https://youtu.be/zL1heevcWpk
  

• I am writing a demo using RN 0.52, would post it here once it done

• Here is Image( I also post them in https://github.com/facebook/react-native/issues/17142)

369MB memory and keep growing to 400+mb

Thanks for reading :smile:

[1c7]

I am writing a demo for this, would post link here soon.
and also make a video with that demo.

[1c7]

Demo App (React Native 0.52) with react-native run-android

https://github.com/1c7/react-native-image-memory-problem-demo-app

easily reproduce the problem. hope it help.

[gedeagas]

This is an interesting bug, will try to reproduce the issue.

[1c7]

@gedeagas Thanks!

[1c7]

demo app video is done:

https://youtu.be/Vgq-P826aqw

[aknad]

to reduce the memory usage you can try to add removeClippedSubviews={true} to your FlatList
then you should find a workaround for this old issue: #1831 / #368
we add a +1 scroll on componentWillReceiveProps

[1c7]

@aknad Thanks! would try.

[1c7]

I hope someone can take a look into this issue fast,
display image in a list is quite a common scenario.

[1c7]

btw,
I have a old app(React Native 0.46) using ListView and loading image from Network.
it display a lot image, that list have like 300 item, but it work just fine. everything is smooth.

not sure this high memory problem is with FlatList?
or just display local image/network image are different,
somehow display local image is more difficult? need more work on downsampling or something?

if want try the old app I mention above, you can download here: https://www.coolapk.com/apk/com.crashcourse.china.c17

it's not on Google Play Store.
and also this is not an advertisement for my app,
I am just trying to provide more info to help diagnose this problem.

[react-native-bot]

Thanks for posting this! It looks like you may not be using the latest version of React Native, v0.53.0, released on January 2018. Can you make sure this issue can still be reproduced in the latest version?

I am going to close this, but please feel free to open a new issue if you are able to confirm that this is still a problem in v0.53.0 or newer.

_{How to Contribute • What to Expect from Maintainers}

[1c7]

I don't have time to retest this in 0.53.

[mattmcdonald-uk]

I can confirm this is an issue in 0.53.

Using removeClippedSubviews does mitigate the problem, but this isn't necessary on iOS as loading large lists of images doesn't grow memory usage in the same way.

[1c7]

@mattmcdonald-uk so in 0.53, iOS doesn't have this problem, but Android still does?

[mattmcdonald-uk]

@1c7 Exactly

[mattmcdonald-uk]

@react-native-bot reopen

[facebook-github-bot]

Something went wrong executing that command, @hramos could you take a look?

[kelset]

@mattmcdonald-uk please refer to #13413, so that we avoid redundancy - the core team is aware of this Android+Flat/SectionList+Images issue (going to write a follow up there).