img-background

Two Easy Ways to Add React Native Background Image

The ultimate guide to adding a react native background image to your application with two straightforward different approaches

Two Easy Ways to Add React Native Background Image

This post is structured as follows.

If you are building a React Native mobile application and looking for the easiest ways to add a background image with full width to your screens, then this post provides the most straightforward approaches to do so.

Approach One: Using React Native ImageBackground right from the react-native library and pass the desired styling and source image.

Approach Two: Building a custom Background image component which will act flawlessly as a full width background image using a React Native Image and View. This approach turns out to provide a reusable component that can be consumed using only the desired properties that achieve the goal.


A Working React Native Application Code is Attached to this Post

Before we start digging into the React Native world building background image, it’s important to mention that a fully working React Native project code is attached to this post. Scroll down to the bottom of this post until you reach the “Attachments” section, and feel free to download the project code and run it.

The running app should look exactly like the following snapshot:

React Native Background Image Running App


The screen on the left is the custom background image approach, while the one on the right is the ImageBackground from React Native.

To successfully run the app, you should navigate to the root directory with your terminal first then type in the command yarn install to install all node modules dependencies, then finally run react-native run-ios to launch the app on your iPhone simulator.


First Approach - Using React Native ImageBackground

In this approach, It’s fairly easy to import the ImageBackground from react-native library and consume it, passing the target background image.

React Native ImageBackground

Code is attached to this post in the attachments section


  1. The source property requires a source to your background image placed in your assets' folder in your app.
  2. It’s required to pass the width and height to the style property, otherwise the image will not show on your app.
  3. You can also pass opacity to the style property.


Second Approach - Using a Custom Background Image Component

In this approach, we will build a custom reusable component that works as a background image, and you can call this custom component anywhere in your app.

Code is attached to this post in the attachments section

The above code is extremely easy creating a custom background image component that allow you to pass the background image source, any child components and an opacity.

You can modify this component to add any additional custom properties that suit your app requirements.

  1. Using flex: Basically, this component relies on setting a View container to flex to 1 which will expand it to fill the app screen and also setting the Image’s flex to 1 to expand and fill the containing view’s width and height.
  2. Positioning: Another key factor that let the image act as a background literally, is positioning it as absolute with z-index as 0 with width and height set to 100% implicitly. You won’t need to pass that in to the consuming component, which will make your code looking better.
  3. The StyleSheetFactory class: this class is created to allow passing the opacity as an external property that will be passed by the consuming component.
  4. Passing Child Components: To allow the consuming component to embed other components into the background image, this.props.children is added.

Finally, to consume this custom component, your code should look like the following:

Consuming the Custom Background Image Component


Notice that no styling is needed in this case, since all the needed styles are enclosed inside the custom component. Also, Two components, Text and Button, are embedded inside it without any problems.


Why the custom approach since React Native provides ImageBackground already?

This post provides two different alternatives with two different coding styles because, in some cases, you would find it useful to use a custom background component rather than using the out-of-the-box ImageBackground provided by React Native.

There is no right or wrong when it comes to architecting an application. It always depends on your desired coding mindset, and it’s always better to have different options in mind to achieve a certain goal.

Attachments

You can download the full application React Native project code here.

What You Should Read Next

The following articles are related to two easy ways to add react native background image.

Reactjs is becoming popular to build seamless and scalable websites. The article explains why use react js for web development.

The ultimate guide to React Native swiper plugins including swipeable lists, swipeout style examples and swipe a list item to delete.

A guide to show a React Native Modal box in full screen, bottom-half screen, transparent background, close on click outside with style examples

A step by step guide to retrieve device information in a React Native application using react-native-device-info plugin with code snippets in each step

A step-by-step thorough guide that will use both React Native video and player plugins into one single demo app with code attached

The simplest and unique guide to upgrade your react native app to version 0.60.5 and handle all the common errors gracefully and step by step

The simplest and straight forward guide to adding a react native dropdown select menu to a react native project in 3 steps

The ultimate and simplest guide to run "react native run android" on mac in 3 easy steps with screenshots and commands.

img-background
Fady Soliman
Fady SolimanMember since
Jun 22, 2013
Loading...
Did you find this helpful?
Leave your Comment
Loading...
Contact us now!
Loading...