Adding Full-Screen Background Image in React-Native

in React Native on

In this tutorial we are going to add full screen background cover to the mobile application with help of React Native. Before starting to implement this, you only needs very basic knowledge of React Native.

react-native-background-image

Final Output


Let’s start creating our component that holds the background image. I have created a ./src directory to the root of the project that keep separating my files. You are independent to keep your files, but its a good practice to keep the files separated.

For full screen background image, We are going to use React Native’s Image own component that helps us to include network images, static resources, temporary local images and images from the local disk.

Take a look on the code:

We are using the in-built component Image, The source property of the component holds the image sources that is located on your application. You can set the network image as well. As the name suggests style property hold the applied styles on the Image component. Let’s create a file BackgroundImage.js on the following path: ./src/assets/BackgroundImage.js. This file hold our component for background image.

Full Code of our component for background image

File path: ./src/BackgroundImage.js

Final Step:

Now let’s implement this BackgroundImage component to the index.ios.js file. Take a look on the complete codes of index.ios.js:

On line number 8 we have imported our component and implement on line number 14 to 25. Our BackgroundImage component holds child component that take cares through {this.props.children} on our component.