Join egghead, unlock knowledge.

Want more egghead? It's 45% off for a limited time only!

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock All Content for 45% Off

Already subscribed? Sign In

Save 45% for a limited time.

Get access to all courses and lessons on egghead today.


    Use Flex to Scale React Native Background Image

    Jason BrownJason Brown

    In this lesson we will use Flexbox to scale a background image to fit on the screen of our React Native application.

    react-nativeReact Native


    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson


    Instructor: 00:00 We'll start by importing image 00:00 from React Native. Next, we'll 00:00 render the image, provide it a 00:00 source, and require an image 00:00 from the file system called "cat. 00:00 jpg." Now that the React Native 00:00 package manager can statically 00:00 analyze that we're requiring the 00:00 image cat.jpg, we can go ahead 00:00 and start up the Xcode emulator. 00:23 React Native is rendering the 00:00 background to the actual 00:00 dimensions of the image. To fix 00:00 this, we'll start by defining a 00:00 variable called "styles," and 00:00 assigning it a style sheet that 00:00 we create. The create is a 00:00 function that takes an object. 00:00 With that object, we then create 00:00 name styles. We'll call ours " 00:00 container," which we'll then 00:00 give and object, and add the 00:00 style "flex" with a property of 00:00 one, to say "take up all 00:00 available space." We'll then 00:00 give it the style width of null, 00:00 and height of null, to tell 00:00 React Native to respect the flex 00:00 box property. 00:56 Now we can apply 00:00 the style to our image by giving 00:00 it the style property, and 00:00 passing in styles.container. 01:03 Then we can refresh our emulator 00:00 and see that the image has 00:00 scaled. Now that we have a 00:00 scaled background image, we can 00:00 add some text to the image. 00:00 First, we'll open up the tag and 00:00 reclose it. 01:18 Then we'll add some 00:00 text as a child to that image. 01:26 Additionally, we'll want to 00:00 center our text. We'll apply the 00:00 style "align items" with the 00:00 property of "center," and the " 00:00 justify content style" with the 00:00 property of "center." Now we can 00:00 refresh our emulator and see 00:00 that we have centered text with 00:00 a scaled background.