title: How to set the same background image for all components in React Native?
body: <p>Good morning, everyone. I start in native react and I would like to put the same image in my mobile application, I make for each screes (page) a  which makes my image load each time I change screens, what I want to do is put the same image and load it for all the components so the image loads only once for all the screens </p>
  
  <p>what I did was create a background.js component that contains a  that I export and import into other screens, but it doesn't work </p>
  
  <p>Here's what I did in background.js</p>
  
  <pre><code>import React from 'react';
  import {
      StyleSheet,
      Text,
      View,
      TextInput,
      KeyboardAvoidingView,
      AsyncStorage,
      TouchableOpacity,
      Dimensions,
      ImageBackground, ScrollView, StatusBar
  } from 'react-native';
  import Service from '../../service/base';
  import bgImage from '../../assets/ToG.jpg'
  import {Header} from "react-native-elements";
  
  const service = new Service();
  
  const { width : WIDTH } = Dimensions.get('window');
  
  export default class Background extends React.Component {
      render() {
          return (
              &lt;View style={styles.f}&gt;
              &lt;ImageBackground source={bgImage} style={styles.bgImage}&gt;
  
              &lt;/ImageBackground&gt;
              &lt;/View&gt;
          );
      }
  }
  </code></pre>
  
  <p>and then I import it into the other screens </p>
  
  <pre><code>import React from 'react';
  import {
      StyleSheet,
      Text,
      View,
      TextInput,
      KeyboardAvoidingView,
      AsyncStorage,
      TouchableOpacity,
      Dimensions,
      ImageBackground, ScrollView, StatusBar
  } from 'react-native';
  
  import bgImage from '../../assets/ToG.jpg'
  import Background from './Background'
  import {
      Image,
      Header,
      Button,
  } from "react-native-elements";
  const {width : WIDTH} = Dimensions.get('window')
  export default class Classement extends React.Component {
  
      constructor(props) {
          super(props)
      }
  
      render() {
          return (
              &lt;Background&gt;
                  &lt;ScrollView&gt;
                      &lt;Header leftComponent={{
                          icon: 'menu',
                          size: 30,
                          color: '#fff',
                          fontWeight: 'bold',
                          onPress :() =&gt; this.props.navigation.openDrawer(),
                      }}
                              centerComponent={{ text: 'TOG', style: { color: '#fff' } }}
                              backgroundColor= "transparent"&gt;
                      &lt;/Header&gt;
                      &lt;StatusBar
                          barStyle="light-content"
                          animated={true}
                          backgroundColor="#6a51ae"/&gt;
                      &lt;KeyboardAvoidingView behavior='padding' style={styles.wrapper}&gt;
                          &lt;View style={styles.container}&gt;
                              &lt;Text style={styles.header}&gt;Matchs&lt;/Text&gt;
                              &lt;Text style={styles.text}&gt;
                                  Bah y a rien à montrer p'tit chat, t'attends quoi pour rentrer une feuille de match ?                            &lt;/Text&gt;
                          &lt;/View&gt;
                      &lt;/KeyboardAvoidingView&gt;
                  &lt;/ScrollView&gt;
              &lt;/Background&gt;
          );
      }
  }
  </code></pre>
  
  <p>ça ne marche pas</p>
  
  <p>the result is a screen, the image loads but the component itself no longer loads</p>