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

Question

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.

Answer 1

I think the problem you're having has a lot of parameters to consider.

1. There is a known Android issue with dissapearing images in React Native. Try to remove the resizeMode prop altogether from your image and see if all of them are loaded. If this works, try to implement the the resizing of the image yourself.

   <Image source={Lions[this.state.lionName]} 
      style={{
         height: this.state.lionHeight,
         paddingBottom: 30
      }}
      // resizeMode="contain"
   /> 
   

2. The carousel package that you're using has some known Android issues and some performance tips that worths having a look at https://github.com/archriss/react-native-snap-carousel#important-note-regarding-android

3. You have a lot of carousels that are FlatLists that are contained inside another FlatList. You can improve performance by using shouldComponentUpdate in your items to prevent multiple unnecessary re rendering.

I hope this helps