OK so let's talk about abuse and let's talk about styles.
I'm gonna go to my project.
I'm going to delete everything else going to delete style sheet as well and I get to leave leave The
View and the text and inside I'm just going to delete this and this I'm going to get rid of this and
begin to do everything again we can start again so by default when you want to of course add something
to the screen or some code you always gonna end up using that debut component.
So think of the blue component like div div with a class of container.
If you come from web where you going to wrap all your code instead of there just to keep the stylings
or to center everything on the screen.
So the view is what wraps whatever code you can put inside.
And of course then React Native will grab that view and convert it to something that the device can
understand.
So again think of the view like a div with a class of a wrapper or container.
So of course if I want to start doing something I need to bring and wrap everything inside of the few
components.
That's the main thing.
Now for example if I want to render send some text you can not do something like this.
This is not going to work.
So let me just reload it.
You're gonna get an error and the errors are you know they make sense that that's pretty cool.
So if you want to add some text you will need to import the top and use the component text and everything
you put inside.
Hello guys for example it's going to work all right.
Now I'm going to reload the page and I'm going to get a black screen.
Don't panic.
This is.
This is correct.
Right.
You should be getting a black screen.
I explaining why in a couple of minutes.
Now the thing is that for example I want to render some texts right here and this is cool but they will
be rendered inside of a single view.
What happens if I want to get more views inside.
Of course you can totally do this.
You can put as many views you want.
And this again works like a div with a class of container.
You can put as much containers as you want in your application just going to copy this.
I'm going to put maybe three and I'm just going to delete it.
All right now I'm gonna give you the some heads up with this.
I'm pretty sure that you're getting a black screen and this is actually normal.
Now React Native that's not understand CSX not really what what it does is going to grab an object like
the one we had at the bottom previously.
It's going to grab that object that looks like CSX it will convert that code that object into something
that the device can understand for stylings.
Now one of the thing that we need to do pretty much every time is Gibson's style to the view that wraps
the whole content.
So on the browser for example when we put a div that doesn't matter it's going to render whatever we
have inside.
Now with the in the device right here in React Native it's a little bit different.
We need to tell the view which properties is going to need to render the content we have inside.
So that's why we get nothing.
It's because it's like with a height of 0 percent and you know we get nothing we get a black screen
nothing is showing.
So we need a way to tell the application that this view has a size.
And in this size we have some other components and of course this we need to add some styles.
Right.
The thing is that view or actually any components in React Native cannot understand floats or you know
some different values.
So if I wanted to add some floats for example we're not gonna be able to do it just like we do for Webb.
So what we act native use is going to be flex maybe you know flex box from the browser from your developer
as a web developer life.
Well we're going to use flex in this case which is a little bit different from flex box flex books is
going to be for Webb but flex follows pretty much the same CSX rules we would follow with Flex box.
So we follow the same patterns.
Don't worry we're gonna we're gonna do pretty much everything together.
Don't worry.
So in order to get something on the screen we need to tell the application that the main power in view
needs some stylings.
Right.
Okay.
So we have to waste pretty much to add you know stylings in inside of our application.
The first one is going to be the inline styling.
The other one we had right near the bottom.
Remember we when we started this we had kind of a different like a class for example we can still do
this but you also get the style that inline styles.
And this again works just like they can def for web.
It's going to say style.
And if I open the right here the keys nothing's going to happen.
This one of course accepts a value could be true could be boolean could be whatever but two at CSX.
We need to pass an object.
Now the object of course it can be it's going to take the styles we want to add.
In this case I'm gonna say that I want a background color.
And again we need to use all incoming common case.
This will not work.
It's not going to say background color.
I'm going to say OK this one it's going to be red.
Do coma.
And I'm going to add with we can still use with I've I've got a web link to give you a few minutes which
is a style sheet of all the properties we can use.
But that's OK.
I'm going to save it and I'm gonna reload the application.
OK.
So I reload the application and for AOS it's a little bit weird because we get this weird thing at the
top.
So if I maybe go right here and I add a margin and a and a margin top let's say I want to add I don't
know 50 pixels and I'm gonna show you something and I read the application and we get an error message.
So it says Jason value fifty pixels it's type of and it's gonna be converted to you know whatever the
thing is that we can not use pixels and it's because each phone has a device that has kind of a ratio
for the four unit measures.
So we cannot really use pixels this works for web not gonna work here.
So there's two things you can do.
You can use something like this with percentages maybe let's say 10 percent and we reload and that it's
you know it's going to take it works or you can use no pixels something like that.
I'm sorry.
No.
And this will be translator to translate it to whatever unit the phone it's really using.
So if I do reload it again you know we get something a little bit better.
OK.
So I'm gonna do some padding at the top.
Do padding top 50 so you can still do this.
You know it's a little bit better now.
Of course in real life you're not going to use inline stylings just like this because you will need
to add a lot of styles.
And after a while if you add styles on all the tax it's going to get a little bit confusing.
So what do we do we get the way to of course use stylings as an import.
So not not as an import but right here on this component on a viral.
So you need to import styles sheet at the top.
So we need to import this component.
So what we do we use.
We use a style sheet just like a class.
So we need to create a variable called styles.
And this is just a viral just a viral then I'm gonna say style sheet and we need to use the method create.
And then this create will take an object.
So now instead of putting everything just here we can defined maybe the name of an I.D. or you know
on a theory or a class and say maybe you open and close.
If I use this actually works like a class if I copy maybe you and put it in different components is
it still going to work.
So on the main view I'm going to pretty much do the same thing I'm doing here and I'm going to do this
and I'm going to leave it just with an empty object.
So the main view will have some padding top of the bottom not 50 pixels going into a coma.
Again same background background color of a red and two that's a red.
Sorry.
Gonna do coma.
And then again we're gonna get some width with of one hundred percent I'm gonna save the application
and of course if we reloaded nothing happens you know this is not gonna work.
We are parsing an empty object.
So the way we do this we need to tell the application that now we want to add we want to pass an access
to styles and we want to put whatever it's inside the main view.
So I'm gonna put it right here to save it.
And if I reload again we get the same result right.
No really cool now maybe you noticed that we are of course putting this content inside this view and
we get just this and everything else is just black.
And this is because this view this main view it's acting as a container.
So it's only showing what's inside what's inside you know.
So again right here we need to use flex.
OK.
So I'm going to go here and delete.
Maybe this could go on said this.
I it just delete it.
I'm going to start over.
So whenever you want to return a component or render the main container of whatever code you have right
here you will need to use flex so I'm going to say flex.
You're going to say one I'm to pretty much do the same thing than before and can at a petting and then
maybe bottom and I'm still adding those 50 pixels.
And now in this case I'm gonna do still do a background color background color and this time is going
to be white.
So if I reload the application now we can we can get it.
You know we get something better.
So instead of padding top it's putting batting tops out instead of putting bottom putting top.
And now we get pretty much the same results.
But it's a little bit nicer.
So flex of course is going to extend the container to cover the whole screen of the phone.
Now of course with Flex we get some other you know properties.
So I'm gonna do coma and I'm gonna say a line items just like this opening close.
So we have different properties with a line items.
So we can put center we can put base line and we can put Flick flick and or start or stretch and this
will align the contents we have in this container in a horizontal way.
So if I do for example center gonna save it reload the application and it's going to at center all the
tiles that are inside that container.
Right.
So then of course we can do it vertically.
So if I go right here and say justify just to fi and then content contents I'm going to open and close
and we pretty much get the same options but this is going to happen on the y axis you know vertically.
So if I do center again and reload the application everything's going to be you know the middle.
Now of course you get some other four options.
I'm gonna give you this time sheet the cheat sheet in a minute.
I'm gonna do flex and then I'm going to put everything at the start and same thing with the birth article
axis.
You know the y axis going to read the application and you know now now now it makes a little bit more
sense.
I'm still going to do that with 100 percent.
All right.
Gonna save it and we get the same much same result.
So now of course I want to do something else with this you know three components I'm gonna do it just
to two.
So you could of course apply the same logic let's say I want to add some stylings to these new Well
I'm just going to copy this gonna go right here and we can handle this just like a C assess going to
say basic view and they're going to pretty much do the same with the other ones I'm going to copy and
paste.
All right.
So now of course we need to add some logic right here on the CSX you know between quotes to go and say
Okay now we have a basic view and the properties are gonna be I don't know something dumb background
color of green I don't know what else what else can we put right here.
Green We can give it a width of 100 percent.
Gonna do coma and maybe a margin bottom.
So yeah margin and the bottom and instead of giving a percentage I'm gonna say just five.
Now we reload the application.
All right.
So that's okay we get something a little bit better.
Now if we say background key green or for say color for example let me do color and I'm gonna do what
we know that this one's this one is for the fonts right.
For the color of the text if I reload the application.
Notice that the class is still white.
So this does not work like WEP.
It will not inherit from the parent.
The color of the.
You know the text the color of the font.
We still need to pass a class or a rule to the actual components.
So I'm gonna go to text and I'm gonna say that this one is going to be the basic and text basic text.
And again I'm gonna go at the bottom and you know again something dumb can open close and this one we
can still do font size.
Remember that everything is in camel case right now.
And I'm gonna give it 20.
Again we cannot use pixels.
So then I got to give the color and this one is going to be white what else what else can we do.
We can do a text line so text line just like that and we can at center and I'm gonna add some panic
now the padding works just like for web if you do padding top it will add painting to the top part bottom
left and right.
If you do padding for all it's going to add a painting for all going to save it.
And if I reload it you know ugly but we get something a little bit better.
And for Android it's pretty much the same idea.
So if I double tap we still get it.
Now the problem is that for ISIS sometimes devices since you need to kind of move this from the not
far and that's not going to work for Android maybe for Android.
We don't want to you know at this space later we're going to see how we can add some styles for some
you know four different devices maybe showed this on AOS but not show this on Android you know don't
add these this press space and Android.
But again we are not there yet.
We're going to get there in a minute.
OK.
So I'm going to I'm going to let me just give me one minute I'm going to give you the link so we can
we can check the cheat sheet for Flex and pretty much all the properties with stylings inside reactivated
which just one second.
OK.
So I'm going to look it on the web.
So I'm going to say cheat and then she'd.
And then react native.
You can look it up.
So when you go right here you get React Native is styling cheat sheet.
And this is actually really really useful and you get something for weeks.
But this one is the one we know.
So they have really fun to give.
You can do it.
So you get the contents are you know the rules that we have available for using flex box.
And then you know different types of transforms and some other components.
Now in React Native you can ATS that stylings to the components but not all components inside React
Native will support the style property you can do it to some of the components and they you know tells
you right here where you can use it.
You can use it on view you can use it on text.
And later we're going to talk about this components so not remember that not all components allow this
style property they have their own stylings and you you need to modify the style on a different way.
But again we will get there.
All right.
So let's go to the next section.
We're going to talk about something else.