Background image disappears after navigating back and forth several times React native

Question

I have made a simple view with a background image and some icons on top of it. Clicking on icons navigate to different pages. It is working fine. Problem is when I navigate to other pages come back to home page and do this for 7-8 times the background image just disappears from all the screens. Below is the code of home screen and Screenshots

  <Image
  source={require('../images/background.jpg')}
  style={{
    justifyContent:'center',                                                       
    resizeMode: "stretch",
    height: height,
    width: width,
    alignItems: "center"
  }} >
  <StatusBar
  backgroundColor="#4e0870"
  barStyle="light-content"

/>
<Image style={{ height: 125, width: 125 }} source={require('../images/guru_logo.png')} />

<View style={{
  marginTop: 30,
  flexDirection: 'row'
}}>
  <TouchableOpacity activeOpacity={.5} onPress={() => {
    BackHandler.removeEventListener('hardwareBackPress', this.handleBackButton);
    navigate("LiveTV")
  }
  }
  >
    <Image
      source={require('../images/live.png')}
      style={{
        resizeMode: "stretch",
        height: 75,
        width: 75
      }} /></TouchableOpacity>
  <TouchableOpacity activeOpacity={.5} onPress={() => {
    BackHandler.removeEventListener('hardwareBackPress', this.handleBackButton);
    navigate("VideoPage")
  }}>

    <Image
      source={require('../images/youtube.png')}
      style={{
        marginTop: 5,

        resizeMode: "stretch",
        marginLeft: 100,
        height: 75,
        width: 75
      }} />
  </TouchableOpacity>
</View>
<View

  style={{

    flexDirection: 'row',
    marginTop: 20
  }}>
  <Text
    style={{
      marginLeft: -5,
      fontSize: 20,
      color: "#FFF"
    }}>Live Tv</Text>
  <Text
    style={{
      fontSize: 20,
      color: "#FFF",
      marginLeft: 125
    }}>Video</Text>
</View>
<View
  style={{

    flexDirection: 'row',
    marginTop: 20
  }}>
  <TouchableOpacity activeOpacity={.5} onPress={() => {
    BackHandler.removeEventListener('hardwareBackPress', this.handleBackButton);
    navigate("FacebookPage")
  }}>
    <Image
      source={require('../images/facebook-logo.png')}
      style={{
        resizeMode: "stretch",
        height: 75,
        width: 75
      }} /></TouchableOpacity>
  <TouchableOpacity activeOpacity={.5} onPress={() => {
    BackHandler.removeEventListener('hardwareBackPress', this.handleBackButton);
    navigate("AudioPage")
  }}>
    <Image
      source={require('../images/icon.png')}
      style={{
        resizeMode: "stretch",
        marginLeft: 100,
        height: 75,
        width: 75
      }} /></TouchableOpacity>
</View>
<View
  style={{

    flexDirection: 'row',
    marginTop: 20
  }}>
  <Text
    style={{
      marginLeft: -20,
      fontSize: 20,
      color: "#FFF"
    }}>Facebook</Text>

  <Text
    style={{
      fontSize: 20,
      color: "#FFF",
      marginLeft: 110
    }}>Audio</Text>
</View>

<TouchableOpacity  activeOpacity={.5} onPress={() => {
  BackHandler.removeEventListener('hardwareBackPress', this.handleBackButton);
  navigate("ContactPage")
}}>
  <Image
    source={require('../images/contact.png')}
    style={{


      marginTop: 20,
      resizeMode: "stretch",
      height: 75,
      width: 75
    }} /></TouchableOpacity>
<Text style={{
  fontSize: 20,
  color: "#FFF"
}}>Contact Us</Text>
</Image>          

Answer 1

Every time you navigate to that screen, it calls a re-render. I work around i've found in the past is to define your image sources as a variable, and simply reference it in the source = {HERE} section. I've provided some sample code below. This has fixed this issue in the past, let me know how it goes.

var images = {
    live: {img: require('../images/live.png')},
    guru: {img: require('../images/guru_logo.png')},
    background: {img: require('../images/background.jpg')},
    //and so on 
}

class SelectionScreen extends Component {
    //all your other code

and then in your Image components

<Image source = {images[background].img}.../>