Believe it or not we've now got a pretty good idea on most of the prime systems around react.
We understand how to handle events deal with props and also update our application using state as well.
So now we're gonna move on to one of our last big topics which is to handle layout.
In other words how do we style or react native app and make it look really nice.
Well first off I want you understand that there are three different systems or kind of three from properties
that we're going to use to control how elements are displayed and react native application.
These three systems are the box object model the Flex box system and a single property called position
with the box object model.
You might be familiar with this from the world of web development.
We're talking about properties like margin border and padding and also the intrinsic height and width
of some element.
We're going to use this box object model anytime that we're trying to position a single element by itself
you might also be familiar with the flex box system as well.
This is also pulled from the world of web development.
The Flex box system is concerned with how we lay out some number of child elements that are all inside
of one common parent.
We're going to use this flex box system and each head that we're trying to position multiple elements
within one common parent element.
And then finally the position property is also kind of talking about how we're going to position a element
inside of a child with the position we're talking about.
One single child inside of a parent in a general we're going to use this position thing and each time
they want to override the box object model or the Flex box systems.
Now in order to understand these three different systems you really have to look at some different examples.
So let's flip back over to our code editor.
We're going to create a new screen and we're going to use it to take a look at this a box object model
system will then go through flex and then position all right.
So back inside my code editor I'll find my source screens directory and inside there I'm going to make
a new file called Box screen dot J.S. will then throw a little bit of boilerplate in here as usual so
we'll get react from react we'll get text you style sheet from react native I'll create my component
that I will call box screen and as usual right now I'll return a View element that shows a piece of
text that just says a box screen and then underneath that we'll create our style sheet.
This time we definitely do want to create our style sheet because we're going to be playing with these
three different systems using some properties that we're going to add into a style sheet.
So let's say con styles is style sheet create the empty object.
Then finally we will export default.
Box screen OK.
So there's our little boilerplate all put together.
So as usual what's now hook this thing up with the button to our home screen and our app dot J.S. file.
Let's start first with the app file.
So inside of app dot J.S. at the top we will add import box screen from 4 source screens box screen
and they'll add that into my navigator object so I'll say box is box screen we can save that file.
And then finally we'll go to our home screen.
I'll go down to the very bottom.
I'll copy paste the last button I'll update the titles so go to box demo and we'll change the navigate
call to box as well get set looks good.
I'm going to go back over to my simulator.
There's the new button.
I should go to tap on it and see box screen appear very good.
Let's take a quick pause right here.
When we come back the next video we can talk a little bit more about what the box object model is and
start to play around with it inside of that new component we put together.