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.

Doesn't calling `setState` in `onLayout` prop pops up a warning? Also `cardHeight` is not defined while you are setting it. Did you mean `{cardHeight: this.state.cardHeight - 15 - nativeEvent.layout.height}`? — bennygenel, May 11 '18 at 06:29
@bennygenel I'm sorry. I was using some silly variable names - so renamed them in my SO post - didn't notice I was using reusing the variable name cardHeight. So have updated my question with `cardHeight` and `personHeight` — Norfeldt, May 11 '18 at 15:31
@bennygenel no I didn't see any warnings with calling `setState` in the `onLayout`.. — Norfeldt, May 11 '18 at 15:32

score 3 · Accepted Answer · answered May 17 '18 at 18:48

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

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"
/> 
```
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
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

is this a solution you came up with or have you seen this posted elsewhere? There's a ton of issues about this posted all over and this is the only thing that worked for me — rob5408, Oct 07 '19 at 23:51
This is an old post, but I remember I checked out the repo in the description and tried to debug it. When I removed the resizeMode prop everything was working. After a search I saw that others had the same issue: eg https://stackoverflow.com/questions/38117433/images-fail-to-render-in-react-native-when-using-resizemode-contain-props. I was hoping this would be solved by now... — needsleep, Oct 08 '19 at 07:51

score 0 · Answer 2 · answered May 05 '21 at 22:34

0

I did faced the same problem, and I fixed it by using the react-native-fast-image. you will can still keep all options inside and just change <Image to <FastImage.

answered May 05 '21 at 22:34

BD Tren

11
1
2

score 0 · Answer 3 · answered May 23 '22 at 04:49

0

In my case setting width to auto helped. So this works on android for me:

 <Image
     source={logo}
     style={{ height: 150, width: "auto" }} 
     resizeMode="contain"
 >

answered May 23 '22 at 04:49

Elnoor

3,401
4
24
39

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

UPDATE

3 Answers3