Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


    Use Flex to Scale React Native Background Image

    react-nativeReact Native

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



    Become a Member to view code

    You must be a Pro 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
    orLog In




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