1 00:00:04,540 --> 00:00:11,110 Inline styles are very easy to apply but their downside is that the more complex your app gets and your 2 00:00:11,110 --> 00:00:18,260 setup gets, your component gets, the harder it is to follow along with all these inline styles. 3 00:00:18,370 --> 00:00:24,040 You will have a lot of code up there, in your jsx code and it can be hard to read it, to understand 4 00:00:24,040 --> 00:00:24,720 it. 5 00:00:24,870 --> 00:00:27,870 Therefore whilst you can use inline styles, 6 00:00:27,940 --> 00:00:32,740 it's actually recommended to use a stylesheet object and that's exactly what's getting created down 7 00:00:32,740 --> 00:00:33,820 there. 8 00:00:33,820 --> 00:00:39,120 This uses stylesheet which is a class in the end provided by React Native which is why we import it 9 00:00:39,130 --> 00:00:46,660 from there and this in the end creates a Javascript object which contains all your style configuration. 10 00:00:46,660 --> 00:00:51,940 The difference to a vanilla Javascript object which you could also create on your own like this is simply 11 00:00:51,940 --> 00:00:59,590 that Stylesheet.create could in the future also apply some performance optimizations and apply your 12 00:00:59,590 --> 00:01:01,530 styles more efficiently in the end. 13 00:01:01,600 --> 00:01:07,480 Therefore, you should use that because you lose nothing but in the future, you might benefit from additional 14 00:01:07,540 --> 00:01:12,190 optimizations. Right now when I'm recording this, there is no difference though 15 00:01:12,190 --> 00:01:17,800 but again you should use Stylesheet.create because it won't hurt and you might get additional performance 16 00:01:17,800 --> 00:01:22,120 optimizations in the future. Another advantage of using the stylesheet is that 17 00:01:22,120 --> 00:01:28,150 this will automatically add some validation which means that if you're using an incorrect style property 18 00:01:28,150 --> 00:01:33,550 or an incorrect value, React Native will detect this and will throw an error which simply makes it easier 19 00:01:33,550 --> 00:01:35,380 for you to spot such errors, 20 00:01:35,470 --> 00:01:39,370 if there would be no validation, it would fail silently, 21 00:01:39,370 --> 00:01:45,160 it would just not apply the style and you might not even see that instantly or you'll see that the styling 22 00:01:45,160 --> 00:01:48,070 isn't correct but you don't really see why it's not working, 23 00:01:48,070 --> 00:01:53,950 therefore this built-in validation is another advantage of using that stylesheet object here. To create, 24 00:01:54,040 --> 00:01:56,680 you pass a Javascript object as an argument, 25 00:01:56,680 --> 00:02:01,450 so the argument you pass here is a Javascript object and in that object, you can now define your 26 00:02:01,450 --> 00:02:07,000 styles and you don't do this by adding padding 10 because it would be unclear where this should be 27 00:02:07,000 --> 00:02:08,020 applied, 28 00:02:08,020 --> 00:02:15,280 instead you use any property name of your choice, like for example screen, to setup the style for our 29 00:02:15,370 --> 00:02:16,810 overall screen view, 30 00:02:16,810 --> 00:02:21,040 so for this top level of you here and you could have chosen any name you want here, 31 00:02:21,040 --> 00:02:26,490 this doesn't have to be screen. Here, you now have a nested Javascript object, 32 00:02:26,560 --> 00:02:30,610 so the value for this property is another Javascript object 33 00:02:30,610 --> 00:02:33,800 and there, you setup padding 50 for example, 34 00:02:33,820 --> 00:02:37,630 so the styling we had up there as well. 35 00:02:37,700 --> 00:02:40,510 Now we can remove that style up here, 36 00:02:40,520 --> 00:02:45,980 I still have the style property but I no longer have the inline style object and instead here, 37 00:02:46,010 --> 00:02:52,120 I now point at styles which is this constant which holds our stylesheet object, 38 00:02:52,150 --> 00:02:58,430 I point at styles and then with dot, I point at the screen style and that's what I meant, 39 00:02:58,430 --> 00:03:00,090 you can choose any name you want here, 40 00:03:00,170 --> 00:03:06,440 if you would have named this root, then you would have just have to use root up there. So you can use 41 00:03:06,440 --> 00:03:07,160 any name you want, 42 00:03:07,160 --> 00:03:12,550 you just have to make sure that the names you use down there meet the names you use up here and now 43 00:03:12,570 --> 00:03:18,540 just tells React Native that this view should get the styles defined for screen down there. 44 00:03:18,650 --> 00:03:20,990 You can do the same for our input container 45 00:03:20,990 --> 00:03:25,860 let's say, again this name is totally up to you, input container. Here 46 00:03:25,880 --> 00:03:28,400 I will take this style object 47 00:03:28,400 --> 00:03:37,130 I applied as an inline style to this view before and I applied this as my value for this input container. 48 00:03:37,130 --> 00:03:42,260 Now here on that view, we reference styles.inputContainer, 49 00:03:42,260 --> 00:03:48,110 now with some auto formatting which you by the way can do in Visual Studio Code by going to preferences, 50 00:03:49,130 --> 00:03:54,860 keyboard shortcuts and then search for format document, that's the shortcut you want to press so that 51 00:03:55,010 --> 00:04:00,780 autoformats the documents, the file. With that, we have some clean code structure here, 52 00:04:00,860 --> 00:04:04,710 WE see these are our input container styles and we apply them here. 53 00:04:04,730 --> 00:04:10,910 Another advantage of having this stylesheet object is also THAT you can apply the same style to multiple 54 00:04:10,910 --> 00:04:12,680 views without copying it. 55 00:04:12,710 --> 00:04:18,200 So if we want to have the input container style, not just on this view but also on this one down there, 56 00:04:18,350 --> 00:04:25,160 we could simply write style styles.inputContainer, you can apply this style to as many components 57 00:04:25,190 --> 00:04:26,290 as you want. 58 00:04:26,290 --> 00:04:32,460 Now of course, I don't need it here but we could use it here if we would need it. Now the last style I 59 00:04:32,460 --> 00:04:35,030 want to apply is on the text input here. 60 00:04:35,030 --> 00:04:40,970 There, I'll just name this input, 61 00:04:41,130 --> 00:04:50,220 too many curly braces, set up my styles here then and then on the text input, refer to styles.input, 62 00:04:50,430 --> 00:04:55,430 like that. And with that if we save this, we have the same look as before 63 00:04:55,560 --> 00:05:01,320 but now we're using the stylesheet object which makes sharing and reusing styles easier and which 64 00:05:01,320 --> 00:05:05,610 possibly also yields us some future performance optimizations 65 00:05:05,610 --> 00:05:10,290 and in addition, our jsx code here simply is much leaner now.