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 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.


img-background
Fady Soliman
Fady SolimanMember since
Jun 22, 2013
An experienced, resourceful and highly motivated IT professional, with a proven record of success in both Stack Development and Software Architecture. Possesses a wealth of transferable skills, including outstanding interpersonal, problem solving and staff management abilities. A capable organizer, quick to grasp – and make good use of – new ideas and information, and reliable and conscientious in all he takes on.
Did you find this helpful?
Related Posts
 The Easiest Way to Upgrade React Native to Version 0.60.5 - The easiest guide online to upgrade react native to the latest version at 0.60.5
 3 Steps to Add React Native Dropdown List to your Project - Adding a dropdown list menu to your React Native app in just 3 steps
 React Native Run Android on Mac in 3 Steps - How to run "react-native run-android" on Mac in 3 steps
 React Native Video by Example - All Issues Resolved - How to add a working React Native Video to your app using 2 different plugins
 The Easiest Way to Get React Native Device Information - The simplest guide to retrieve device information in a React Native app.
 React Native Modal Box - Everything you Need to Know - 6 Examples to showing and styling a React Native Modal box
 React Native Swiper - The Easiest Unique 5 Ways to Start - The ultimate guide to integrating with React Native Swiper plugins providing 5 different ways to 5 different plugins.
Leave your Comment
img-background

Contact us NOW!

We will be glad to answer all your questions. We normally respond within 2 - 3 business days.

Contact us on this channel if you have any suggestion, idea, problem or feedback.

By using this channel you approve that you agree on our Terms and Conditions