WEBVTT 1 00:00:00.240 --> 00:00:03.340 Hello and welcome to this React Native tutorial for beginners. 2 00:00:03.360 --> 00:00:05.100 Today we're going to be talking about one 3 00:00:05.130 --> 00:00:08.980 of the most important aspects of styling in React Native - borders. 4 00:00:09.000 --> 00:00:12.640 Borders are a great way to add some extra visual interest to your app designs 5 00:00:12.670 --> 00:00:16.500 and help you separate different sections or elements from one another. 6 00:00:16.520 --> 00:00:17.980 They're also incredibly useful 7 00:00:18.010 --> 00:00:21.420 for creating drop shadows, rounded corners and much more. 8 00:00:21.450 --> 00:00:25.780 So let's dive in and take a look at how to use borders. 9 00:00:25.810 --> 00:00:29.460 So currently you're looking at my screen with my Hello World application 10 00:00:29.490 --> 00:00:31.300 opened to a point where we had it 11 00:00:31.330 --> 00:00:35.020 in the first module and it just displays Hello World. 12 00:00:35.050 --> 00:00:37.100 I have the Metro Bundler running to see 13 00:00:37.120 --> 00:00:40.100 all of the updates that we're going to be making in the code editor. 14 00:00:40.130 --> 00:00:41.620 So just follow along. 15 00:00:41.650 --> 00:00:45.100 By this time you already know what view components are. 16 00:00:45.130 --> 00:00:47.000 You have created style sheets and you 17 00:00:47.030 --> 00:00:51.100 might have seen some basic styling applied to our application. 18 00:00:51.130 --> 00:00:55.140 But we're going to dive into this more and we're going to explore all 19 00:00:55.170 --> 00:00:59.700 of the different options for styling for beginners. 20 00:00:59.730 --> 00:01:02.820 So in this video and in the upcoming 21 00:01:02.850 --> 00:01:07.980 videos, we're only going to be using inline styles and you can make it more 22 00:01:08.010 --> 00:01:12.380 advanced and take it to a different file as you have learned before. 23 00:01:12.410 --> 00:01:16.540 Now let's get started on creating our border styles. 24 00:01:16.560 --> 00:01:17.980 For this we're going to need a view 25 00:01:18.010 --> 00:01:21.490 container to make sure that all of the styles are accessible. 26 00:01:21.520 --> 00:01:23.570 And then we're going to create this view 27 00:01:23.600 --> 00:01:27.980 container here and just put our text inside of it. 28 00:01:28.000 --> 00:01:29.930 And then we're going to create an inline 29 00:01:29.960 --> 00:01:33.060 style and we're going to get into the basics of borders. 30 00:01:33.090 --> 00:01:36.820 So in order to be able to see a border, you got to give it some width. 31 00:01:36.850 --> 00:01:42.140 And to do that you will need border width one. 32 00:01:42.170 --> 00:01:44.340 So it's important to mention that all 33 00:01:44.370 --> 00:01:49.980 of the styling in React Native is going to be camel case and you will never have 34 00:01:50.010 --> 00:01:54.620 an opportunity to do something like this that you do in CSS. 35 00:01:54.650 --> 00:01:55.900 This would be wrong. 36 00:01:55.920 --> 00:01:57.340 You can't really do that here. 37 00:01:57.370 --> 00:01:59.820 You got to use Camel case. 38 00:01:59.850 --> 00:02:04.020 Okay, so border width one, this is pretty intuitive. 39 00:02:04.050 --> 00:02:08.780 It just gives us a border of width one around our text 40 00:02:08.810 --> 00:02:14.940 and this shows you pretty much what's the space that text component is taking up. 41 00:02:14.970 --> 00:02:17.500 And then you could do a bunch of things with this. 42 00:02:17.530 --> 00:02:22.420 For example, you could actually have different sizes of borders on each side. 43 00:02:22.450 --> 00:02:27.300 So you could do something like border top width and let's give it five. 44 00:02:27.330 --> 00:02:32.730 If you do that, actually the only border that's going to change is the top border 45 00:02:32.760 --> 00:02:39.060 and it's going to have much thicker visual than the other borders given here. 46 00:02:39.090 --> 00:02:41.340 You can also overwrite the other borders 47 00:02:41.370 --> 00:02:46.610 and give it for example, border bottom width and you can give it ten. 48 00:02:46.640 --> 00:02:51.780 And now your border bottom is going to be much thicker than your top. 49 00:02:51.810 --> 00:02:57.260 You can also give border left width and let's say we give it a value of three. 50 00:02:57.290 --> 00:03:00.540 Here we go. It's visible here and then you can do 51 00:03:00.570 --> 00:03:06.460 border right width and you could give it value of 20 let's say. 52 00:03:06.490 --> 00:03:10.020 And here is how it's going to l ook. 53 00:03:10.050 --> 00:03:13.540 You can also give it a color border color 54 00:03:13.570 --> 00:03:16.180 red for example, and it's going to become red. 55 00:03:16.210 --> 00:03:18.740 Or the colors also can be hexadecimal 56 00:03:18.770 --> 00:03:26.900 value for example like this FF0000 is also going to give us red color. 57 00:03:26.930 --> 00:03:30.900 My editor is also giving me a choice for example to select my color here. 58 00:03:30.930 --> 00:03:32.800 But I don't know what editor you're 59 00:03:32.830 --> 00:03:35.260 working with so your editor might be different. 60 00:03:35.290 --> 00:03:39.180 Okay, so we discussed the border width and border color. 61 00:03:39.210 --> 00:03:42.420 Let's discuss something called border radius. 62 00:03:42.450 --> 00:03:46.340 This allows you to create rounded corners on your elements. 63 00:03:46.370 --> 00:03:48.610 You can specify a single value for all 64 00:03:48.640 --> 00:03:53.140 corners or separate values for each corner using different properties. 65 00:03:53.170 --> 00:03:58.380 So if you do border radius ten it's going to be applied. 66 00:03:58.410 --> 00:04:00.280 It's going to be applied for all 67 00:04:00.310 --> 00:04:05.700 the corners and they are all going to become rounded with a value of ten. 68 00:04:05.730 --> 00:04:07.700 But you could also do something like 69 00:04:07.730 --> 00:04:14.980 border top left radius let's say, and give it a value of 100. 70 00:04:15.010 --> 00:04:21.220 Okay, so top left radius became very circular here. 71 00:04:21.250 --> 00:04:23.620 You could do something like for their 72 00:04:23.650 --> 00:04:27.380 bottom left radius and give it the same value. 73 00:04:27.410 --> 00:04:31.940 And now you're going to see this and they're kind of overwriting each other. 74 00:04:31.970 --> 00:04:35.120 So if we just gave this 20 and we just 75 00:04:35.150 --> 00:04:38.020 gave this 20 as well, it's going to be more visible here. 76 00:04:38.040 --> 00:04:41.300 You could do the same for border top right 77 00:04:41.330 --> 00:04:44.540 radius and you could give it a value of like 30. 78 00:04:44.570 --> 00:04:45.820 Here we go. 79 00:04:45.840 --> 00:04:50.017 And then same for border bottom right 80 00:04:50.217 --> 00:04:54.420 radius and give it value of 30 as well. 81 00:04:54.450 --> 00:04:57.140 And this is how it looks here. 82 00:04:57.160 --> 00:04:58.796 So in addition to these properties, 83 00:04:58.996 --> 00:05:00.760 there are much more properties but I don't 84 00:05:00.780 --> 00:05:03.183 think they are required for you to know 85 00:05:03.383 --> 00:05:05.340 unless there's a specific use case. 86 00:05:05.360 --> 00:05:07.333 And to look those up you can just go 87 00:05:07.533 --> 00:05:09.580 to React native developer website and I'm 88 00:05:09.600 --> 00:05:12.980 going to link that website right below this video. 89 00:05:13.010 --> 00:05:15.220 But for now you already know all the basics 90 00:05:15.250 --> 00:05:18.020 that's more than enough to know about borders. 91 00:05:18.040 --> 00:05:20.100 So get creative and have fun. 92 00:05:20.120 --> 00:05:21.860 And if you have any questions or comments 93 00:05:21.880 --> 00:05:24.340 feel free to leave them in the comment section below. 94 00:05:24.360 --> 00:05:26.320 Thanks for watching. Watching and see you in the next video.