Hello and welcome to this React native tutorial for beginners.
Now we're going to be talking about margins -
that's another important aspect of styling in React native.
Margins are used to create space around elements in your app design and they're
an essential part of creating clean and organized layouts.
They're also a great way to control the spacing between elements and make sure
that your designs look and feel just the way you want them to.
So let's dive in and take a look
at the different aspects of margins in React native.
Now you're looking at my editor with my simulator open and my metro
bundler running to see all the changes that we're going to make.
We have the code from the previous video
and we're going to clean this up and start working with the margins.
So in order to display exactly how margins
work, let's give this a background color of red for example.
And now our background color becomes red.
You could do the same with hexadecimal
values that we talked about in the video before and anytime actually you have any
interaction with the colors, you can use hexadecimal values or you can
just directly say what color you want here.
Great.
So now let's talk about the margins and let's create another view container
here and let's say hello world two here in order to be able to differentiate them.
And let's talk about how to use margins.
So first of all, you could apply a margin
of ten here, for example, and it's going to give you a space around
all of the sides and it is going to give you a size of ten space.
You can also specify different margins
for each size of an element using the following properties.
For example, you could say margin top
five and this is going to reduce the size here.
You can say margin left
100 for example, and you see the margin left here for 100 and you can do margin right.
And you can also give this 100.
And here we go, the spacing of 100.
And you can do the same to margin bottom
and give it 100 and you will see that you have a space of 100 here.
What you could also do is use margin horizontal and margin vertical.
And what this will do is vertically
apply the spacing for example, and let's say margin vertical is 50.
We just need top and bottom margins here to be deleted.
And now you see you have 50 space here
and 50 space here and you can do the same for horizontal ones.
So let's comment this out as well and let's use margin horizontal
50 and here we go, 50 space here and 50 space here.
So why did we have to comment these out?
Because they are more specific than vertical and horizontal values.
They are actually overwriting our vertical and horizontal values.
So every time you use very specific ones,
you will be overwriting margin vertical and margin horizontal even though they are
placed much core above than these styles here and there you have it.
Those are all different aspects margins in react native.
By using these properties you can create clean and organized layouts for your apps
and control the spacing between elements exactly the way you want it.
So get creative and have fun.
See you in the next video.