Using a Background image in React Native

Well hello again. As i’ve been learning the wonderful world of React and React Native, i’ve found myself wanting to spice things up a bit. And by spice things up I mean use images for backgrounds in my apps!

With regular HTML and CSS this is pretty easy. You simply set a background image with a url source in your CSS file and you are good to go! In fact its about the same in regular React as well. But when we get to React Native things become a little trickier, but only a little.

React Native doesn’t use HTML elements so you have to use their conventions to display content the way you want. For instance instead of a HTML <div>, Native uses <View>. There’s a whole laundry list of elements that can be used, however the one we want for a background image is <ImageBackground>. Let’s take a look and see how its used:

First, make sure to import the element type from React Native, as well as the other element types you’ll need. For this example we will use a View, ImageBackground, and Text:

Next we need to set up am object that contains the image location, like so:

Now we need to implement it into our component. For this we will use a <View> as a container for the whole page, and then place the <ImageBackground> element inside that. The ImageBackground tag requires a source, which we will give it from the image variable. Then finally we will use a little styling to make it take up the page. It should look something like this:

And thats all there is to it! Now get out there and spice up your apps and life!