WEBVTT

1
00:00:00.240 --> 00:00:03.580
Hello and welcome back to this React
native tutorial for Beginners.

2
00:00:03.600 --> 00:00:05.220
Today we're going to be talking about

3
00:00:05.250 --> 00:00:08.820
paddings, another important aspect
of styling in React native.

4
00:00:08.850 --> 00:00:12.780
Paddings are used to create space
within elements in your app design.

5
00:00:12.800 --> 00:00:14.240
And they are different from Martin's

6
00:00:14.270 --> 00:00:18.340
in that they create space inside
an element rather than around it.

7
00:00:18.370 --> 00:00:23.140
Paddings are an essential part of creating
clean and organized layouts and can also

8
00:00:23.170 --> 00:00:26.620
be used to create visual
rest in your designs.

9
00:00:26.650 --> 00:00:28.860
So let's dive in and take a look at all

10
00:00:28.890 --> 00:00:32.380
different aspects
of paddings in React native.

11
00:00:32.410 --> 00:00:35.460
So first let's talk
about padding property.

12
00:00:35.490 --> 00:00:40.180
This allows you to specify the amount
of space that should be created inside

13
00:00:40.210 --> 00:00:43.420
an element and it can
be specified in points.

14
00:00:43.450 --> 00:00:47.780
For example, here we could
add a padding of ten.

15
00:00:47.810 --> 00:00:51.190
And you're going to see that inside this

16
00:00:51.390 --> 00:00:54.740
we're going to get a bigger red container.

17
00:00:54.770 --> 00:00:55.620
So here we go.

18
00:00:55.650 --> 00:00:59.380
It applies the padding style
to all of the sides here.

19
00:00:59.410 --> 00:01:03.380
So here you can also get
more specific like margins.

20
00:01:03.410 --> 00:01:08.050
And you could do padding top of 100.

21
00:01:08.080 --> 00:01:09.340
Here we go.

22
00:01:09.370 --> 00:01:12.521
And you could do a padding

23
00:01:12.721 --> 00:01:14.460
left of hundred.

24
00:01:14.490 --> 00:01:15.850
Here we go.

25
00:01:15.880 --> 00:01:17.843
You can also do

26
00:01:18.043 --> 00:01:20.460
padding right of 20.

27
00:01:20.490 --> 00:01:22.660
Actually, that's not really visible.

28
00:01:22.690 --> 00:01:25.100
What about 200?

29
00:01:25.130 --> 00:01:27.490
Okay, here we go.

30
00:01:27.520 --> 00:01:31.490
And then you can do padding bottom of 100.

31
00:01:31.520 --> 00:01:34.820
And I'm just going to reduce
this because this was too much.

32
00:01:34.850 --> 00:01:36.200
And here you go.

33
00:01:36.230 --> 00:01:39.340
You have padding bottom
of hundred as well.

34
00:01:39.370 --> 00:01:41.460
So this is how it works.

35
00:01:41.480 --> 00:01:43.195
And in addition to these properties,

36
00:01:43.395 --> 00:01:45.100
there are also properties for specifying

37
00:01:45.130 --> 00:01:47.717
paddings in a more simplified way, such as

38
00:01:47.917 --> 00:01:50.180
padding vertical and padding horizontal.

39
00:01:50.210 --> 00:01:53.728
So let's comment these out

40
00:01:53.928 --> 00:01:59.140
and let's say padding horizontal is 100.

41
00:01:59.170 --> 00:02:00.290
That was too much.

42
00:02:00.320 --> 00:02:03.290
Okay, what about 50?
Here we go.

43
00:02:03.320 --> 00:02:06.426
We have value of 50 padding horizontal

44
00:02:06.626 --> 00:02:08.860
and can do same for vertical.

45
00:02:08.890 --> 00:02:11.890
Let's say that's 50 as well.

46
00:02:11.920 --> 00:02:13.380
And here we go.

47
00:02:13.410 --> 00:02:14.860
And there you have it.

48
00:02:14.890 --> 00:02:18.140
Those are all the different aspects
of paddings in React native.

49
00:02:18.160 --> 00:02:21.400
By using these properties,
you can create clean and organized layouts

50
00:02:21.430 --> 00:02:25.940
for your apps and control the space within
elements exactly the way you want it.

51
00:02:25.970 --> 00:02:28.920
So get creative and have fun.
See you in the next video.