How to Set a Full-Screen Background Image in React Native

 

This video shows how to get a full-screen background image in your React Native apps.

Transcript

Let’s suppose we want to add a full screen background image to our React Native app. I’ll show you how to do this in an IOS app, but the same principle works just as well for android as well.

Here we go. Here’s our app. There’s no background image at the moment. The first thing I did was to create an images folder in the app. This is at the same level as, this is at the top level. Inside that folder, I’ve added the image that I want to use for the background.

Let’s have a look at that image. Here you go. It’s a nice view of a pier on a lake. You can see it’s landscape mode, landscape orientation image. Let’s apply that image as our, as the background for our app.

Now, you can see the container for the app, is a view element. The first thing we’re going to do is switch that out. Rather than view, we’re going to use an image element. To use an image element we’re going to have to add it up here. Just put image in there and then we can change this over from view to image.

The thing with image elements is of course, that you need to specify the image to use for them. Let’s do that here. The syntax we use is require. Then, because we’ve, what we’re doing here is putting the image inside the app itself. We’re going to use this relative path to the app, which is ./images/pier.jpg. Now, that should give us the image as the background. Let’s really load to the app. There you go, so the image is now being used as the background for the app, but it’s not exactly what we’d want. The image is not really aligned in a nice way and you can see that the text that was here before in the app, has now disappeared.

I believe the reason is that the full image is hidden off the side of the app, here. The text that would have been in the middle is now somewhere, the middle of the … The image element is now somewhere over here, so you can’t even see the text. What can we do about that? Well, the way to handle that is to reset the width and the height of the element.

The way we can do that is, so currently it’s getting the width and the height form the image, I believe. What we can do to reset it, is do width, null. Height, null. Now, let’s reload and there you go. You can see that the image is now nicely centered and so is the text.

That’s looks pretty nice but you can see that the text here, has got this horrible white background. What if we want to get rid of that background and just have a transparent background for the text so that we can see the image, nicely through it? How can we do that?

Let’s go to the text, here. In React Native, background color is inherited down the hierarchy of elements. What we can do is, set a background color for the containing image. We’re going to set it to this, RGBA and this means that the, basically, sets the background color to be transparent.

Let’s reload that, and there you go. You can now nicely see the background image through the text. Now, I think this looks quite good. Let’s suppose for some reason you want to see the sides of the pier, here, which are currently cropped off. What we can do is use a different re-size mode by going into the star sheet for the image again. We’re going to do re-size mode, contain.

Lets reload the app, and there you go. There is one other re-size mode that you may like to use, which is stretch. I’ll show you what that does. It basically, just stretches the image to fit both the height and the width, ignoring the aspect ratio, which is quite a nice affect in this case. There you go. That’s how to create a full screen background image for your app, in React Native.

12 comments on “How to Set a Full-Screen Background Image in React Native”

  1. Dave Reply

    Aces… thanks

    Bit of an aside… a screencast of using custom webfonts with android would be fully belting.

    Thanks again

  2. Nisha Reply

    I have been struggling with image resizing between iOS5 and iOS6, and it was because of this height, width, null thing. Thank you so much

  3. eliprodigy Reply

    const styles = StyleSheet.create({
    backgroundImage: {
    flex: 1,
    width: null,
    height: null,
    resizeMode: ‘cover’
    }
    }

  4. Cotta Lotties Reply

    Thank you very much for the tutorial! It was the best tutorial on the subject and it helped a lot:3

  5. Christopher Reply

    Thank you Very much, but can we use background repeat a small image like css in entire screen, Please let me know.

    i.e..
    background-image: url(“image,png”);
    background-repeat: repeat-y;

Leave A Reply

Your email address will not be published. Required fields are marked *