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:

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

[Cxxxx100]

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

[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