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
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
    Transcript

    Transcript

    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.

    Discuss

    Discuss