React-native: image missing after reloading JS sev

Question

Not sure whether anyone else is encountering this issue...

I have a simple page which contains several images. When I start the app at the first time, everything loads perfectly. However, after I reload JS for several times, the images start to disappear randomly. If I close the app and start over, it will come back to normal and repeat the issue if I reload JS.

What's the reason causing this? Is it something I am missing or it is just an issue of the debug mode?

The environment is React-native Android, Win10 + Genymotion emulator

Here are some screenshots of the issue: The expected view:

One of the problematical view. The background images are missing.

And attach the code for completeness:

var React = require('react-native');
var {
  StyleSheet,
  PixelRatio,
  View,
  Text,
  Image,
} = React;

var PropTypes = require('ReactPropTypes');
var util = require('../lib/util');

var MainView = React.createClass({
  render: function() {

    return(
        <View style={styles.body1}>
            <Image source={require('./images/bg.png')} style={[styles.stretch, styles.bg]} resizeMode={Image.resizeMode.stretch}>
                <Image source={require('./images/bg_high.png')} style={styles.bg_high}>
                    <Image source={require('./images/starFigure_bg.png')} style={styles.block_high}>
                        <Image source={require('./images/starFigure.png')} />
                    </Image>
                </Image>
            </Image>
        </View>
        )}
  })

var styles = StyleSheet.create({
    main: {
        flex: 1,
    },

    body1: {
        flex: 1,
        alignItems: 'stretch'
    },

    stretch: {
        flex: 1,        
    },

    bg: {
        paddingTop: 160 / PixelRatio.get(),
        paddingLeft: 30 / PixelRatio.get(),
    },

    bg_high: {
        paddingLeft: 7 / PixelRatio.get(),
        paddingTop: 37 / PixelRatio.get(),
        flexDirection : 'row',
    },

    block_high: {
        marginLeft: 20 / PixelRatio.get(),
        paddingLeft: 25 / PixelRatio.get(),
        paddingTop: 25 / PixelRatio.get(),
    },

    btn : {
        height: 30,

    },

    bg_s: {
        width: util.size.width / 2
    },
});

module.exports = MainView

Answer 1

i am encountering this issue when i use Image.resizeMode.stretch use cover or contain instead

edit: it may due to memory issue. you can try to add android:largeHeap="true" in your android manifest application tag.