Join egghead, unlock knowledge.

Want more egghead?

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

Unlock This Lesson
1×
Become a member
to unlock all features

Level Up!

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

Autoplay

    Use Flex to Scale React Native Background Image

    Jason BrownJason Brown
    react-nativeReact Native
    reactReact

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

    Code

    Code

    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
    Discuss

    Discuss

    Transcript

    Transcript

    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.