Okay.
So we have two components now.
And in this video I will be talking about styles.
So what we have here, I removed everything here.
So it's a kind of a barebone, a container component for for the applications.
I can close it here and from now on we'll be working with this one and whatever we want to add, something
more components, we can actually import that component here.
So what we have here is we already have some styles I already mentioned about this, so this will be
pretty much similar to what we have in React as a styled component.
So basically this is not just a JavaScript object here.
So what we use is we import stylesheet from React Native and then in here we have a variable that's
constant.
So we use this stylesheet and then we have create, then we open the parentheses and inside we have
just an object.
So what is the object here?
It's actually whatever we want it to be.
So this object, the wording here, like container, that's our own name.
So let's say we have a this component displaying our home so I can name it home like this and that will
be home.
So basically what I have here is I create a stylesheet here and then I inside that object you can see
curly brackets here or you could move it to another line.
So it will be easier to see.
What we have here is just a normal object JavaScript object.
So this object has home and this home we can refer actually in styles, in any component, in any element
in our page we can actually refer it.
So to refer to this styles, we do styles equal and then in a curly braces, then in a curly braces,
we have styles.
Which is this constant name and then home, which is actually soup element here.
So we are not really limited to one.
What we could have is we could have multiple objects inside.
So let's say I will say name this is my my name that I pick for this and I can do color.
Let's say I would like to do green
like that.
And I will come back to this format later on.
And at the moment, if I change this not and actually change because I haven't applied this style yet.
So to apply this style, I will just pick this text here and I will do style equal to and then I can
do styles.
That's the name I have set up here.
And then Dot and I will go inside that folder and then I will pick the name.
So I will go name like this.
So if I will refresh it.
You can see this is green now because I applied this styles, this object into this element on the on
my page.
So you can see this is how you actually link and it's very convenient way to do you have one style sheet
and then you have one object and inside you you might have multiple and then you refer to that here.
So that's very convenient way to do so.
What are the options here?
Basically, there are the same as the CSS in most cases.
What is the difference?
Basically the difference is kind of notation.
So as you can see here, we have a background color of white.
Normally in CSS we would have background color like this, but this is not acceptable in JavaScript.
So instead of having that dash in between the different words, what we have is we have camelcase.
So instead of background color, you will have background color like this.
And then if you, for example, if you have Mar margin top, you also need to do that notation and then
I can do 30 here.
So if I will save it here.
You can see I have a little bit of margin.
So instead of margin dash top or lowercase, I will have margin top with a Camelcase So every single
every new word will be capital letter first.
So what else is different?
Actually, this one, we don't provide unit here, so we don't provide by default.
It will be a pixels so you don't have to provide it.
This will this is a simple number if you want to provide it.
So it knows that I have 30 pixels here and it's smart enough to to do it on the mobile for us.
So you don't need to provide a specific unit, you just provide the amount you would like to push it
from.
Another difference will be actually this syntax here in the CSS.
What we do is we have simple things like this, but it's not going to work here because this is not
readable by for JavaScript.
What we need to do is we need to actually wrap it inside the quotes.
So whatever we have the value here like this, if it's not numeric, then we need to write it in quotes
and in that way it will be readable.
So you can see here all of all of them are inside the quotes.
So that's the main big difference here.
And there is nothing super complicated here.
Once you know the CSS, it's very easy and straightforward to catch it with that kind of styling and
you can do it very easily.