[Android] not all images are shown

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

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

[pepavesely]

For me, https://github.com/facebook/react-native/issues/10569 worked very well. I’m using ScrollViews and setting removeClippedSubviews={true} solved my issue.