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:
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)
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 addingremoveClippedSubviews={true}
to theScrollView
? cc @foghinaDo 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.