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.