In this lesson we will use Flexbox to scale a background image to fit on the screen of our React Native application.
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
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
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.
You must be a Pro Member to view code
Access all courses and lessons, track your progress, gain confidence and expertise.