WEBVTT

1
00:00:00.480 --> 00:00:03.500
Hello and welcome to this React
native tutorial for beginners.

2
00:00:03.520 --> 00:00:05.610
Now we're going to be
talking about margins -

3
00:00:05.640 --> 00:00:08.580
that's another important aspect
of styling in React native.

4
00:00:08.610 --> 00:00:12.700
Margins are used to create space around
elements in your app design and they're

5
00:00:12.730 --> 00:00:16.140
an essential part of creating
clean and organized layouts.

6
00:00:16.160 --> 00:00:19.580
They're also a great way to control
the spacing between elements and make sure

7
00:00:19.600 --> 00:00:23.100
that your designs look and feel
just the way you want them to.

8
00:00:23.130 --> 00:00:24.780
So let's dive in and take a look

9
00:00:24.810 --> 00:00:27.780
at the different aspects
of margins in React native.

10
00:00:27.810 --> 00:00:31.300
Now you're looking at my editor
with my simulator open and my metro

11
00:00:31.320 --> 00:00:34.300
bundler running to see all
the changes that we're going to make.

12
00:00:34.320 --> 00:00:36.380
We have the code from the previous video

13
00:00:36.410 --> 00:00:41.580
and we're going to clean this up
and start working with the margins.

14
00:00:41.610 --> 00:00:44.660
So in order to display exactly how margins

15
00:00:44.680 --> 00:00:50.740
work, let's give this a background color
of red for example.

16
00:00:50.770 --> 00:00:53.540
And now our background color becomes red.

17
00:00:53.570 --> 00:00:55.580
You could do the same with hexadecimal

18
00:00:55.610 --> 00:01:01.780
values that we talked about in the video
before and anytime actually you have any

19
00:01:01.810 --> 00:01:05.360
interaction with the colors,
you can use hexadecimal values or you can

20
00:01:05.390 --> 00:01:08.570
just directly say what
color you want here.

21
00:01:08.600 --> 00:01:08.930
Great.

22
00:01:08.960 --> 00:01:12.210
So now let's talk about the margins
and let's create another view container

23
00:01:12.240 --> 00:01:17.900
here and let's say hello world two here in
order to be able to differentiate them.

24
00:01:17.930 --> 00:01:21.260
And let's talk about how to use margins.

25
00:01:21.290 --> 00:01:24.420
So first of all, you could apply a margin

26
00:01:24.450 --> 00:01:28.780
of ten here, for example,
and it's going to give you a space around

27
00:01:28.810 --> 00:01:34.780
all of the sides and it is going
to give you a size of ten space.

28
00:01:34.810 --> 00:01:36.820
You can also specify different margins

29
00:01:36.850 --> 00:01:40.570
for each size of an element
using the following properties.

30
00:01:40.600 --> 00:01:43.780
For example, you could say margin top

31
00:01:43.810 --> 00:01:47.780
five and this is going
to reduce the size here.

32
00:01:47.810 --> 00:01:50.920
You can say margin left

33
00:01:51.080 --> 00:01:57.700
100 for example, and you see the margin
left here for 100 and you can do margin right.

34
00:01:57.730 --> 00:01:59.700
And you can also give this 100.

35
00:01:59.730 --> 00:02:02.210
And here we go, the spacing of 100.

36
00:02:02.240 --> 00:02:05.380
And you can do the same to margin bottom

37
00:02:05.410 --> 00:02:10.860
and give it 100 and you will see
that you have a space of 100 here.

38
00:02:10.890 --> 00:02:16.340
What you could also do is use margin
horizontal and margin vertical.

39
00:02:16.370 --> 00:02:19.380
And what this will do is vertically

40
00:02:19.410 --> 00:02:27.610
apply the spacing for example,
and let's say margin vertical is 50.

41
00:02:27.640 --> 00:02:32.170
We just need top and bottom
margins here to be deleted.

42
00:02:32.200 --> 00:02:34.660
And now you see you have 50 space here

43
00:02:34.690 --> 00:02:38.730
and 50 space here and you can do
the same for horizontal ones.

44
00:02:38.760 --> 00:02:46.140
So let's comment this out as well
and let's use margin horizontal

45
00:02:46.170 --> 00:02:50.540
50 and here we go,
50 space here and 50 space here.

46
00:02:50.570 --> 00:02:54.940
So why did we have to comment these out?

47
00:02:54.970 --> 00:03:00.500
Because they are more specific
than vertical and horizontal values.

48
00:03:00.530 --> 00:03:04.820
They are actually overwriting our
vertical and horizontal values.

49
00:03:04.850 --> 00:03:07.860
So every time you use very specific ones,

50
00:03:07.890 --> 00:03:13.500
you will be overwriting margin vertical
and margin horizontal even though they are

51
00:03:13.530 --> 00:03:18.540
placed much core above than these
styles here and there you have it.

52
00:03:18.570 --> 00:03:21.500
Those are all different aspects
margins in react native.

53
00:03:21.530 --> 00:03:25.610
By using these properties you can create
clean and organized layouts for your apps

54
00:03:25.640 --> 00:03:29.180
and control the spacing between
elements exactly the way you want it.

55
00:03:29.210 --> 00:03:31.180
So get creative and have fun.

56
00:03:31.210 --> 00:03:32.680
See you in the next video.