title: React Native: Android is not showing all images (even though they are the same)
body: <p>I'm using 8 images in my app (store locally)</p>
  
  <ul>
  <li>3 sizes of the background image (@1 ~700 kb,@2 ~ 2,9 mb, @3 ~6,5 mb)</li>
  <li>5 different images of ~100 kb each</li>
  </ul>
  
  <p>I'm placing the images randomly on some cards that can be slid on top of each other (<a href="https://github.com/archriss/react-native-snap-carousel" rel="noreferrer">using react-native-snap-carousel</a>.</p>
  
  <p><a href="https://i.stack.imgur.com/eSRpk.png" rel="noreferrer"><img src="https://i.stack.imgur.com/eSRpk.png" alt="Example"></a></p>
  
  <p>You can scroll down and flip the cards.</p>
  
  <p>I'm seeing some issues on some Android devices where not all images are loaded..</p>
  
  <p>here is what I tried:</p>
  
  <p><a href="https://github.com/facebook/react-native/issues/13600#issuecomment-296192734" rel="noreferrer">android:largeHeap="true" - in the manifest</a></p>
  
  <p><a href="https://github.com/unimonkiez/react-native-asset" rel="noreferrer">Running <code>react-native-assets</code></a></p>
  
  <p><a href="https://stackoverflow.com/questions/38941436/react-native-android-static-image-is-not-showing-in-production-released-apk">react-native bundle ...</a></p>
  
  <p>There is my code:</p>
  
  <blockquote>
    <p>Person.js</p>
  </blockquote>
  
  <pre><code>const Persons = {
    bob: require('./images/bob.png'),
    alice: require('./images/alice.png'),
    john: require('./images/john.png'),
    isabella: require('./images/isabella.png'),
    josefine: require('./images/josefine.png'),
  }
  
  const PersonNames = ['bob', 'alice', 'john', 'isabella', 'josefine']
  
  export { Persons, PersonNames }
  </code></pre>
  
  <blockquote>
    <p>Card.js</p>
  </blockquote>
  
  <pre><code>import React, { Component } from 'react'
  import {
    Image,
    View,
    Text,
    StyleSheet,
    Platform,
    Dimensions,
  } from 'react-native'
  import FadeImage from 'react-native-fade-image'
  
  import { Persons, PersonNames } from '../Person'
  
  const cardHeight = Math.round(Dimensions.get('window').width * 0.75)
  
  // create a component
  export default class AngleInvestor extends Component {
    state = {
      person: PersonNames[~~(PersonNames.length * Math.random())],
      personHeight: 250,
    }
  
    render() {
      return (
        &lt;View style={styles.container}&gt;
          &lt;Text
            style={{
              textAlign: 'center',
              padding: 15,
              marginHorizontal: 15,
            }}
            onLayout={({ nativeEvent }) =&gt; {
              this.setState({
                personHeight: cardHeight - 15 - nativeEvent.layout.height,
              })
            }}
          &gt;
            {this.props.question}
          &lt;/Text&gt;
  
          &lt;FadeImage
            source={Person[this.state.person]}
            style={{
              height: this.state.personHeight,
              paddingBottom: 30,
            }}
            resizeMode="contain"
            duration={1000}
          /&gt;
        &lt;/View&gt;
      )
    }
  }
  </code></pre>
  
  <h2>UPDATE</h2>
  
  <p><a href="https://i.stack.imgur.com/7ptpR.png" rel="noreferrer"><img src="https://i.stack.imgur.com/7ptpR.png" alt="Open Source"></a></p>
  
  <p>I open sourced the entire code since it is too hard to give all the needed information in a SO post when the code is so nested.</p>
  
  <p>The entire code is here:
  <a href="https://github.com/Norfeldt/LionFood_FrontEnd" rel="noreferrer">https://github.com/Norfeldt/LionFood_FrontEnd</a></p>
  
  <p>(I know that my code might seem messy, but I'm still learning..)</p>
  
  <p>I don't expect people to go in and fix my code with PR (even though it would be awesome) but just give me some code guidance on how to proper deal images on both platforms.</p>