[Android] not all images are shown

[sergey-akhalkov]

Hey guys,

Description

I've created sample app, that should show 100 images.
Actual: App randomly shows around 50% of the images. example1, example2
Expected: All 100 images should be shown.

Reproduction Steps and Sample Code

Download the app where the issues reproduces: rnapp.zip

Repro steps:

1. Perform react-native init rnapp command.
2. Add 100 images in the ./images folder
3. Change index.android.js file like this:

import React, { Component } from 'react';
import {
 AppRegistry,
 StyleSheet,
 Image,
 View
} from 'react-native';

export default class rnapp extends Component {
 render() {
 return (
 <View style={styles.container}>
 <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
 <Image style={styles.image} resizeMode={Image.resizeMode.contain} source={require("./images/laptop_phone_howitworks.1.png")}/>
 ...
 <Image style={styles.image} resizeMode={Image.resizeMode.contain} source={require("./images/laptop_phone_howitworks.100.png")}/>
 </View>
 </View>
 );
 }
}

const styles = StyleSheet.create({
 container: {
 flex: 1,
 justifyContent: 'center',
 alignItems: 'center',
 backgroundColor: '#F5FCFF',
 },
 image: {
 width: 25,
 height: 25,
 margin: 3,
 }
});

AppRegistry.registerComponent('rnapp', () => rnapp);

Additional Information

• React Native version: 0.43.3
• Platform: Android
• Development Operating System: Windows
• Dev tools: Android Studio version 2.3.1, Android SDK version 23

[nihgwu]

That's a known bug for quit a long time
#7408 #9581 #10470 I believe they are related
This would be a better choice, #9581 (comment)

[sergey-akhalkov]

Hi @nihgwu, thanks for the clarification. Do I get it right that the root cause of this issues is a memory problem? As of now, I've found a workaround that fixes the issue: add android:largeHeap="true" to AndroidManifest.xml Application section.

[jcampalo]

@sergey-akhalkov Thanks it worked for me

[surmerming]

@sergey-akhalkov I tried as your method, but it does not help

[pepavesely]

I see android:largeHeap="true" as an accepted solution very often but this is not the right solution. You just enlarge the heap (if the target device has an ability to do so) which means that your application might work longer but might fail eventually anyway.

[treemore]

@pepavesely that is right . before i set android:largeHeap="true" ,the image will not show when i get 50 records. but after i set it , i can only show 200 records.
use ListView and set renderItem use an Image ,when every Image uri different ,the problem will be come.
if use FlatList ,Image will be show right .but FlatList has a delay problem..
#12884

[treemore]

every renderItem has a different Image uri .
if all the image has the same uri will work well.

[pepavesely]

For me, #10569 worked very well. I'm using ScrollViews and setting removeClippedSubviews={true} solved my issue.

[treemore]

@pepavesely . very thank you.

[jjoe64]

It's also worth mention that with the property resizeMethod="resize" I was able to display large images, even though I don't resize the image.

[subhajitmondalglb]

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

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. If you think this issue should definitely remain open, please let us know why. Thank you for your contributions.