React Native: Android is not showing all images (even though they are the same)

I'm using 8 images in my app (store locally)

• 3 sizes of the background image (@1 ~700 kb,@2 ~ 2,9 mb, @3 ~6,5 mb)
• 5 different images of ~100 kb each

I'm placing the images randomly on some cards that can be slid on top of each other (using react-native-snap-carousel.

You can scroll down and flip the cards.

I'm seeing some issues on some Android devices where not all images are loaded..

here is what I tried:

android:largeHeap="true" - in the manifest

Running react-native-assets

react-native bundle ...

There is my code:

Person.js

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 } 

Card.js

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 (       <View style={styles.container}>         <Text           style={{             textAlign: 'center',             padding: 15,             marginHorizontal: 15,           }}           onLayout={({ nativeEvent }) => {             this.setState({               personHeight: cardHeight - 15 - nativeEvent.layout.height,             })           }}         >           {this.props.question}         </Text>          <FadeImage           source={Person[this.state.person]}           style={{             height: this.state.personHeight,             paddingBottom: 30,           }}           resizeMode="contain"           duration={1000}         />       </View>     )   } } 

UPDATE

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.

The entire code is here: https://github.com/Norfeldt/LionFood_FrontEnd

(I know that my code might seem messy, but I'm still learning..)

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.

1 Answers

Answers 1

The only issue I see is with FadeImage's source prop, which would be undefined in your example.

source={Person[this.state.person]} 

should read:

source={Persons[this.state.person]} 

If You Enjoyed This, Take 5 Seconds To Share It

• Facebook
• Twitter
• Google+
• StumbleUpon
• Digg
• Delicious
• LinkedIn
• Reddit
• Technorati