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