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

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: screenshot_2016-10-26-18-10-11

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

About this issue

  • Original URL
  • State: closed
  • Created 8 years ago
  • Reactions: 13
  • Comments: 34 (4 by maintainers)

Most upvoted comments

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

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

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

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.

I hava the same problem on rn0.40 for android,but ,when I set “resizeMethod=‘resize’” in Image ,it’s ok

@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.