Images fail to render after a certain number are added to the page [Android, RN 0.36]

[Cxxxx100]

Description

I've written a simple RN app that displays a large number of images in a horizontal scroll view. After a certain number of images, they being to stop loading.

Reproduction

See code below, I've reproduced this on an android device, but it doesn't reproduce on iOS simulator. I haven't tried an iOS device or an Android simulator. Run the app and notice images stop loading about half way through the scroll view. See:

import React from "react";
import {
    AppRegistry,
    Image,
    ScrollView,
    StyleSheet,
    Text,
    TouchableHighlight,
    View
} from "react-native";

AppRegistry.registerComponent("AwesomeProject", () =>
    React.createClass({
        render() {
            var imageMap = [
                "https://avatars2.githubusercontent.com/u/22461323",
                // ...
                // More Images as necessary, I needed ~ 200 to trigger the issue
                "https://avatars2.githubusercontent.com/u/22461323"
            ];

            return (
                <View>
                    <Text>Lots of Images</Text>
                    <ScrollView
                        horizontal={true}
                        automaticallyAdjustContentInsets={false}
                        directionalLockEnabled={true}>
                        {imageMap.map((imageUri, i) =>
                            <View key={i}>
                                <TouchableHighlight key={i}>
                                    <Image style={styles.image} source={{ uri: imageUri }} key={i}/>
                                </TouchableHighlight>
                            </View>
                        )}
                    </ScrollView>
                </View>
            );
        }
    })
);

const styles = StyleSheet.create({
    image: {
        width: 150,
        height: 150,
        marginHorizontal: 20,
        resizeMode: "contain"
    }
});

Additional Information

*If I load the same number of images in a webview, I don't run into the issue. So I think the issue is specific to the React Image component logic leaking memory and not just "Your app has too many images"

• React Native version: 0.36
• Platform: Android
• Operating System: MacOS

[brentvatne]

@Cxxxx100 - can you repro this on the latest version and ensure that it is still happening?

[malaman]

hi,
for our application the issue is reproducible on RN v.0.36.
Our use case is ListView with many network images (jpg).
I suppose it is related to #8677

[Cxxxx100]

@brentvatne I just tested on RN 0.36 and the issue is still happening. I'll update the title and description.

[gold-duo]

I had the same problem

[janaka120]

I also had same problem. But I find out solution. I resize the original image size less 100 KB. I check it in my sample project by using 1000 images and it works find.

[marxsk]

@janaka120 thanks for a tip but it did not work in our case. But it pointed us to in a right direction. It looks like the problem is when pictures has to be down-scaled. There were similar issues with PNG before and this looks quite similar.

[Cxxxx100]

@marxsk Thanks for the suggestion, but this did not work for me. I tried updating my code to use the original image size (420x420) however after a certain number of images they still fail to render.

[andreyluiz]

Of course keeping small images is good but the Image component should handle this memory leak as well.

@Cxxxx100 you said that using webview it works fine. In my case I'm using the prefetch to cache the image. Do you know if there's a way to keep the images in cache to load in the webviews?

[Cxxxx100]

@andreyluiz I'm not sure if there is a way to keep the images in cache to load in the webview. In my case I'm not prefetching the images.

Also, @brentvatne should the "Needs more information" label be removed? I added the information you requested.

[andreyluiz]

@janaka120 I followed your tip and it worked. But I have 10 images only. How many images are you handling? Do you know if just reducing the size makes a list of 100 images, for example, render with no problems?

EDIT: since my images are uploaded in a Node.js server, I created a combination of image-size + sharp + image-min to resize and optimize my images. I will do that by now, but I will keep watching for news about this memory leak.

[colin3dmax]

I have the same problem,I loaded many product list image after about 40 image loaded, then image stop load more pictures. Only on android

[ericvicenti]

Can somebody investigate the correlation of this issue to memory usage? I suspect that images may stop working when reaching a limit on available memory.

[ericvicenti]

cc @AaaChiuuu who may have more context on this (Or Aaron, feel free to cc somebody else)

[luco]

Oh yeah, I'm getting this. But not a single image renders. My issue, I think, it's related to image size and resize.

Im on 0.39.2

[Cxxxx100]

I was stepping into the React Native Java code today and saw the following exception being caught here: https://github.com/facebook/fresco/blob/master/imagepipeline/src/main/java/com/facebook/imagepipeline/datasource/AbstractProducerToDataSourceAdapter.java#L57

com.facebook.imagepipeline.memory.BasePool$PoolSizeViolationException: Pool hard cap violation? Hard cap = 75497472 Used size = 74793600 Free size = 0 Request size = 705600

Seems related to this issue: #11326

It's interesting that this error is being swallowed up and I'm not seeing it in adb logcat. Is there a verbose logging mode I'd need to enable to see it? I'm already doing setUseDeveloperSupport(true)

[hxkuan]

I hava the same problem on rn0.40 for android,but ,when I set "resizeMethod='resize'" in Image ,it's ok

[luco]

@hxkuan Doesn't work for me:
image: { width:width, height: 200, resizeMethod: 'resize', resizeMode: 'contain' }

No matter what I do.

[kiki-le-singe]

Hi guys!

I have the same problem and I saw this article: React Native on Android — Lessons Learned

I tried some recommendations and it seems to work well.

[colin3dmax]

`import React,{Component} from "react";
import {
AppRegistry,
Image,
ScrollView,
StyleSheet,
Text,
TouchableHighlight,
View
} from "react-native";

export default class Demo extends Component{
constructor(props){
super(props);
this.imageMap = [];
for(let i=0;i<300;i++){
this.imageMap.push("https://avatars2.githubusercontent.com/u/22461323");
}
}
render() {
return (

Lots of Images

{this.imageMap.map((imageUri, i) =>


<Image style={styles.image} source={{ uri: imageUri }} key={i}>
{i}



)}


);
}
}
const styles = StyleSheet.create({
image: {
width: 150,
height: 150,
marginHorizontal: 20,
resizeMode: "contain",
borderWidth:1,
borderColor:'green',
}
});`

[pepavesely]

Still happening on 0.42. I wonder whether it will be ever solved since a lot of applications cannot go to production with this bug ...

My application uses 574 images of total size 16MB.

[pepavesely]

This is logged in android device monitor for every picture that failed to render:
04-17 11:31:32.981: W/System.err(22738): remove failed: ENOENT (No such file or directory) : /data/user/0/com.glo_pro/cache/image_cache/v2.ols100.1/50/c1n6mj8nyCjrBcXvISD59rAokjA.cnt

[mitranos]

This issue is still reproducible on react native 0.44.0. Can somebody that worked with Fresco issues give some insights or advice? Sorry in advance for tagging ;) ... @narychen @oprisnik @fab1an @balazsbalazs

[oprisnik]

I guess something is holding on to the images so that they are kept in memory. Maybe view recycling doesn't work correctly for the ScrollView? Can you try adding removeClippedSubviews={true} to the ScrollView? cc @foghina

[narychen]

I agree with @oprisnik. On android you should adding removeClippedSubviews={true} to ListView or you will be blocked to show any more images. On ios it is not needed.
You could also use the latest FlatList. It will not need to set the removeClippedSubviews={true}

[mitranos]

On the Scrollview adding removeClippedSubviews={true} solved the problem ... Thanks guys!

[Cxxxx100]

removeClippedSubviews={true} resolved this issue for me, thanks @oprisnik. (RN 0.41)

[subhajitmondalglb]

Check the solution
https://stackoverflow.com/questions/45736887/react-native-images-are-not-getting-rendered/45751391#45751391

[justfede]

removeClippedSubviews={true}

[pavanmehta91]

Do we've to explicitly set it? Because the documentation says it's true by default

[dwilt]

What's funny is that if I turn on Remote JS Debugging, the images show.

[ghost]

Thanks very much, removeClippedSubviews={true} done it ... I was rendering out a tone of small images into a scroll view, some images wouldn't show up and this would vary - now they all show up.

[fatfatson]

I'm using ViewPagerAndroid, which hasn't removeClippedSubviews prop.. what's the way ?

[h-asadollahi]

check this answer. It might help.

I solved the problem without using any third-party component.

[austin-roberts]

@oprisnik adding removeClippedSubviews={true} to <ScrollView> resolved the issue for me thank you!