Taking too much memory, and app crashes
See original GitHub issueThanks 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}
/>
Issue Analytics
- State:
- Created 3 years ago
- Comments:5
Top Results From Across the Web
Apps randomly crashing, possibly due to memory usage ...
Method 2. Run memory diagnostic tool: Memory diagnostic tool is a RAM test to check if there is any issues with RAM. -...
Read more >What are Out Of Memory (OOM) Crashes and How to Avoid ...
As mentioned earlier, avoiding OOM “crashes” in your app really boils down to making sure that your app is using, retaining, and freeing...
Read more >Windows 10: Apps randomly crashing, possibly due to ...
Apps randomly crashing, possibly due to memory usage spiking for some reason. High Memory usage resulting to crashes. Hi Jean Ysrael Marquez,
Read more >How to Diagnose and Fix Errors Caused By High Memory ...
The most common and obvious answer is Out Of Memory errors, but on Android there are several other possible cases. If your application...
Read more >Application crashes because it takes too much memory?
This Error occurs usually when loading large bitmaps. Are the drawables for you ImageButtons high resolution? If so, this is likely the ...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
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:
I hope this was helpful 😁
Use this pr https://github.com/DylanVann/react-native-fast-image/pull/425 and then apply with patch-package