WEBVTT 00:01.770 --> 00:02.370 Okay. 00:02.370 --> 00:05.340 So we have two components now. 00:05.340 --> 00:10.590 And in this video I will be talking about styles. 00:10.590 --> 00:14.130 So what we have here, I removed everything here. 00:14.340 --> 00:19.830 So it's a kind of a barebone, a container component for for the applications. 00:19.830 --> 00:26.010 I can close it here and from now on we'll be working with this one and whatever we want to add, something 00:26.010 --> 00:29.520 more components, we can actually import that component here. 00:29.580 --> 00:37.290 So what we have here is we already have some styles I already mentioned about this, so this will be 00:37.470 --> 00:43.110 pretty much similar to what we have in React as a styled component. 00:43.110 --> 00:49.440 So basically this is not just a JavaScript object here. 00:49.440 --> 00:58.920 So what we use is we import stylesheet from React Native and then in here we have a variable that's 00:58.920 --> 00:59.610 constant. 00:59.610 --> 01:07.330 So we use this stylesheet and then we have create, then we open the parentheses and inside we have 01:07.330 --> 01:08.320 just an object. 01:08.320 --> 01:10.630 So what is the object here? 01:10.630 --> 01:13.930 It's actually whatever we want it to be. 01:13.930 --> 01:19.450 So this object, the wording here, like container, that's our own name. 01:19.450 --> 01:29.740 So let's say we have a this component displaying our home so I can name it home like this and that will 01:29.740 --> 01:30.610 be home. 01:30.610 --> 01:39.850 So basically what I have here is I create a stylesheet here and then I inside that object you can see 01:40.210 --> 01:43.240 curly brackets here or you could move it to another line. 01:43.240 --> 01:45.520 So it will be easier to see. 01:46.120 --> 01:52.360 What we have here is just a normal object JavaScript object. 01:52.360 --> 02:01.120 So this object has home and this home we can refer actually in styles, in any component, in any element 02:01.120 --> 02:03.340 in our page we can actually refer it. 02:03.340 --> 02:11.920 So to refer to this styles, we do styles equal and then in a curly braces, then in a curly braces, 02:11.920 --> 02:13.000 we have styles. 02:13.860 --> 02:20.370 Which is this constant name and then home, which is actually soup element here. 02:20.460 --> 02:24.360 So we are not really limited to one. 02:24.360 --> 02:29.050 What we could have is we could have multiple objects inside. 02:29.070 --> 02:38.940 So let's say I will say name this is my my name that I pick for this and I can do color. 02:40.110 --> 02:44.400 Let's say I would like to do green 02:46.950 --> 02:47.930 like that. 02:47.940 --> 02:52.320 And I will come back to this format later on. 02:52.320 --> 02:58.890 And at the moment, if I change this not and actually change because I haven't applied this style yet. 02:58.890 --> 03:07.530 So to apply this style, I will just pick this text here and I will do style equal to and then I can 03:07.530 --> 03:08.670 do styles. 03:08.820 --> 03:11.820 That's the name I have set up here. 03:11.820 --> 03:17.140 And then Dot and I will go inside that folder and then I will pick the name. 03:17.140 --> 03:19.840 So I will go name like this. 03:19.960 --> 03:21.880 So if I will refresh it. 03:23.440 --> 03:33.280 You can see this is green now because I applied this styles, this object into this element on the on 03:33.280 --> 03:34.120 my page. 03:34.120 --> 03:40.660 So you can see this is how you actually link and it's very convenient way to do you have one style sheet 03:40.660 --> 03:47.500 and then you have one object and inside you you might have multiple and then you refer to that here. 03:47.500 --> 03:50.650 So that's very convenient way to do so. 03:50.650 --> 03:52.870 What are the options here? 03:52.870 --> 03:57.100 Basically, there are the same as the CSS in most cases. 03:57.130 --> 03:58.420 What is the difference? 03:58.420 --> 04:01.600 Basically the difference is kind of notation. 04:01.930 --> 04:06.100 So as you can see here, we have a background color of white. 04:06.130 --> 04:13.720 Normally in CSS we would have background color like this, but this is not acceptable in JavaScript. 04:13.720 --> 04:20.680 So instead of having that dash in between the different words, what we have is we have camelcase. 04:20.680 --> 04:25.310 So instead of background color, you will have background color like this. 04:25.310 --> 04:35.360 And then if you, for example, if you have Mar margin top, you also need to do that notation and then 04:35.360 --> 04:37.250 I can do 30 here. 04:37.370 --> 04:38.900 So if I will save it here. 04:42.440 --> 04:45.110 You can see I have a little bit of margin. 04:45.110 --> 04:53.000 So instead of margin dash top or lowercase, I will have margin top with a Camelcase So every single 04:53.000 --> 04:57.140 every new word will be capital letter first. 04:57.470 --> 04:59.810 So what else is different? 05:00.080 --> 05:07.070 Actually, this one, we don't provide unit here, so we don't provide by default. 05:07.070 --> 05:10.460 It will be a pixels so you don't have to provide it. 05:10.460 --> 05:13.820 This will this is a simple number if you want to provide it. 05:13.820 --> 05:21.170 So it knows that I have 30 pixels here and it's smart enough to to do it on the mobile for us. 05:21.200 --> 05:26.870 So you don't need to provide a specific unit, you just provide the amount you would like to push it 05:26.870 --> 05:27.440 from. 05:27.440 --> 05:33.530 Another difference will be actually this syntax here in the CSS. 05:33.560 --> 05:40.550 What we do is we have simple things like this, but it's not going to work here because this is not 05:40.550 --> 05:42.680 readable by for JavaScript. 05:42.680 --> 05:47.660 What we need to do is we need to actually wrap it inside the quotes. 05:47.660 --> 05:54.590 So whatever we have the value here like this, if it's not numeric, then we need to write it in quotes 05:54.590 --> 05:57.110 and in that way it will be readable. 05:57.110 --> 06:01.430 So you can see here all of all of them are inside the quotes. 06:01.430 --> 06:05.000 So that's the main big difference here. 06:05.000 --> 06:08.270 And there is nothing super complicated here. 06:08.270 --> 06:16.040 Once you know the CSS, it's very easy and straightforward to catch it with that kind of styling and 06:16.040 --> 06:17.810 you can do it very easily.