Background image for entire application in ReactNative

Question

In React Native, we have ImageBackground component, that will show the background image in a controller. I want to have same background image for all the controllers. Instead of writing it in all the controllers, is there a way whee I can set the background image for the entire application?

Answer 1

An easy approach is to define one MainComponent which is always the parent view of your screens. You can inject the subviews easily with {this.props.children}.

See simplified example below:

MainComponent :

class MainComponent extends Component {

   render() {

      return (
         <View style ...>
            <ImageBackground .../> 
          {this.props.children}
         </View>
      );
   } 
}

Controller:

import MainComponent from 'yourPATH'

class Controller extends Component {

   render() {
      return (
         <MainComponent>

          //ADD YOUR Regular Controller Screen here. 

         </MainComponent>
      );
   } 
}

You can read more about it here: https://reactjs.org/docs/composition-vs-inheritance.html