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.