Name: Use Flex to Scale React Native Background Image
Uploaded: 2016-10-22T14:14:23-05:00
Description: In this lesson we will use Flexbox to scale a background image to fit on the screen of our React Native application.

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

https://app.egghead.io/api/v1/lessons/react-use-flex-to-scale-react-native-background-image/subtitles

Use Flex to Scale React Native Background Image

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.


Use Flex to Scale React Native Background Image

Share this video with your friends