WEBVTT 1 00:00:00.160 --> 00:00:01.300 Hi and welcome back. 2 00:00:01.330 --> 00:00:05.570 Today we're going to be discussing positioning styling in react native. 3 00:00:05.600 --> 00:00:06.690 In react native, 4 00:00:06.720 --> 00:00:12.540 positioning refers to the layout and placement of UI components on the screen. 5 00:00:12.570 --> 00:00:14.540 Understanding positioning is important 6 00:00:14.570 --> 00:00:17.900 for building responsive and dynamic user interfaces. 7 00:00:17.920 --> 00:00:21.820 By default, all react native components have position relative. 8 00:00:21.850 --> 00:00:27.060 For example, if I were to add position relative right here, 9 00:00:27.080 --> 00:00:32.060 you would see that nothing about Hello World would change. Same here, 10 00:00:32.090 --> 00:00:35.220 which means that every element has 11 00:00:35.250 --> 00:00:42.100 position relative set by default, and adding this style would change nothing. 12 00:00:42.130 --> 00:00:45.620 So now let's talk about absolute positioning. 13 00:00:45.650 --> 00:00:47.380 When you set position absolute, 14 00:00:47.410 --> 00:00:52.420 the element is positioned relative to the nearest positioned ancestor. 15 00:00:52.440 --> 00:00:57.540 Okay? So let's realize what this means exactly. 16 00:00:57.560 --> 00:00:58.940 Right now, for example, 17 00:00:58.970 --> 00:01:04.160 if we were to place another container around this, 18 00:01:05.200 --> 00:01:08.570 both of these elements are positioned relative to this. 19 00:01:08.600 --> 00:01:11.900 So now let's give this a style of 20 00:01:11.930 --> 00:01:17.820 position relative, and we're going to see that nothing really changed. 21 00:01:17.850 --> 00:01:20.180 But if I were to set a position 22 00:01:20.210 --> 00:01:25.260 to absolute right here, we're going to see that this view 23 00:01:25.290 --> 00:01:33.060 container actually moved right here and is positioned relative to its ancestor. 24 00:01:33.090 --> 00:01:35.850 So since the ancestor is actually 25 00:01:35.880 --> 00:01:40.980 a container that starts from the top right here, if we give this a background 26 00:01:41.010 --> 00:01:48.420 color of green, we're going to see how big of a space this container takes up. 27 00:01:48.450 --> 00:01:52.850 You're going to see that it starts from the top left corner right here, 28 00:01:52.880 --> 00:01:56.180 which is why our Hello World Two moved over there. 29 00:01:56.210 --> 00:01:58.700 So for example, if I were to change this 30 00:01:58.730 --> 00:02:04.780 absolute positioning back to relative, this is going to move back to where it 31 00:02:04.810 --> 00:02:08.340 was, but it is still actually inside the green container. 32 00:02:08.370 --> 00:02:09.660 We just don't see it. 33 00:02:09.690 --> 00:02:16.450 So if I were to give this container, for example, padding of 20, 34 00:02:16.480 --> 00:02:20.100 you're going to see that this element is actually inside it. 35 00:02:20.120 --> 00:02:20.540 Great. 36 00:02:20.570 --> 00:02:25.860 So now I'm just going to get rid of this padding here and let's go back to our old 37 00:02:25.890 --> 00:02:28.700 setup and give this an absolute positioning. 38 00:02:28.720 --> 00:02:29.960 And let's talk about some 39 00:02:29.990 --> 00:02:34.340 of the properties that you could use when you're using absolute positioning. 40 00:02:34.370 --> 00:02:43.220 So you could use top, right, left, and bottom properties along with positioning. 41 00:02:43.250 --> 00:02:49.460 So let's use top and say that we want space of top 10 from the top. 42 00:02:49.490 --> 00:02:51.740 This is how you would achieve this. 43 00:02:51.770 --> 00:02:55.340 Now if you want to have spacing relative 44 00:02:55.370 --> 00:03:02.500 to your container and you want the spacing to be from the left side, five points, 45 00:03:02.530 --> 00:03:08.540 let's say you would write this and this here would move a little bit to the left. 46 00:03:08.570 --> 00:03:11.380 You can do the same to the right side 47 00:03:11.410 --> 00:03:16.180 and say that you want this to be ten points away from the right side. 48 00:03:16.210 --> 00:03:20.180 Now you see that the width of our 49 00:03:20.210 --> 00:03:27.020 Hello World actually grew because we said that we want this to be ten points away 50 00:03:27.050 --> 00:03:30.220 from the furthest right side of the container. 51 00:03:30.250 --> 00:03:36.580 So if I change this to be zero, then it's actually going to go along until the end. 52 00:03:36.610 --> 00:03:40.900 So now let's discuss how to move it from the bottom. 53 00:03:40.930 --> 00:03:45.100 So if I say bottom here and I give it a value of ten, 54 00:03:45.130 --> 00:03:51.740 the height of this container will grow and you will see this in action right here. 55 00:03:51.770 --> 00:03:56.900 So this is how top, left, right and bottom work. 56 00:03:56.930 --> 00:03:59.860 They're making this view container 57 00:03:59.890 --> 00:04:06.180 have some spacing relative to its ancestor, which is this container here, 58 00:04:06.210 --> 00:04:12.500 because this view container again is a child of this view container. 59 00:04:12.530 --> 00:04:20.660 So we said that we wanted to be ten points away from the top of our ancestor. 60 00:04:20.690 --> 00:04:25.380 We said that we want to be five points away from the left side. 61 00:04:25.410 --> 00:04:27.540 From the right side we want it to be zero 62 00:04:27.570 --> 00:04:31.060 points away, and from the bottom we want it to be ten points away. 63 00:04:31.090 --> 00:04:34.060 So our view container had to change its 64 00:04:34.090 --> 00:04:37.300 dimensions to match up with our instructions. 65 00:04:37.330 --> 00:04:41.820 Now, Hello World Two is actually over our 66 00:04:41.840 --> 00:04:46.860 Hello World container, as you see, and that's not visible anymore. 67 00:04:46.890 --> 00:04:51.700 However, you can still make that visible and put it 68 00:04:51.720 --> 00:04:58.660 on top of Hello World Two if you wanted to, and those are achieved by z indexes. 69 00:04:58.690 --> 00:05:01.820 Z index property controls the stacking order 70 00:05:01.840 --> 00:05:06.500 of positioned elements, and elements with higher z index value are 71 00:05:06.530 --> 00:05:10.440 stacked on top of elements with lower z index values. 72 00:05:10.470 --> 00:05:14.180 So for example, let's give this z index of 73 00:05:14.210 --> 00:05:19.660 one and we're going to see that Hello, World is visible here. 74 00:05:19.680 --> 00:05:21.780 So I'm just going to change the background 75 00:05:21.800 --> 00:05:25.940 color of this and I'm going to make it yellow so that it's more visible. 76 00:05:25.970 --> 00:05:31.100 And now you see that since this z index has higher order value than 77 00:05:31.130 --> 00:05:35.100 Hello World Two, that has no z index defined at all, 78 00:05:35.130 --> 00:05:40.620 this is going to be on top of the Hello World Two container. 79 00:05:40.650 --> 00:05:43.220 However, if I give this z index value as 80 00:05:43.250 --> 00:05:48.340 well, and I give it a value of two, then you're going to see that this 81 00:05:48.360 --> 00:05:51.220 disappeared and is on the background again. 82 00:05:51.250 --> 00:05:53.140 I would like to summarize for you 83 00:05:53.170 --> 00:05:57.700 that positioning is an important concept in react native that controls the layout 84 00:05:57.730 --> 00:06:00.180 and placement of UI components on the screen. 85 00:06:00.210 --> 00:06:04.020 And by default, all components have position relative applied to it. 86 00:06:04.040 --> 00:06:07.620 And you can use top, right, bottom and left properties to move 87 00:06:07.650 --> 00:06:12.580 the element relative to its normal position. Setting position absolute 88 00:06:12.600 --> 00:06:17.340 positions, the element relative to its newest positioned ancestor, 89 00:06:17.360 --> 00:06:21.820 and z index controls the stacking order of positioned elements. 90 00:06:21.850 --> 00:06:23.100 That's all for today. 91 00:06:23.120 --> 00:06:25.720 Thanks so much for watching and I'll see you in the next video.