Hello and welcome to this React Native tutorial for beginners.
Today we're going to be talking about one
of the most important aspects of styling in React Native - borders.
Borders are a great way to add some extra visual interest to your app designs
and help you separate different sections or elements from one another.
They're also incredibly useful
for creating drop shadows, rounded corners and much more.
So let's dive in and take a look at how to use borders.
So currently you're looking at my screen with my Hello World application
opened to a point where we had it
in the first module and it just displays Hello World.
I have the Metro Bundler running to see
all of the updates that we're going to be making in the code editor.
So just follow along.
By this time you already know what view components are.
You have created style sheets and you
might have seen some basic styling applied to our application.
But we're going to dive into this more and we're going to explore all
of the different options for styling for beginners.
So in this video and in the upcoming
videos, we're only going to be using inline styles and you can make it more
advanced and take it to a different file as you have learned before.
Now let's get started on creating our border styles.
For this we're going to need a view
container to make sure that all of the styles are accessible.
And then we're going to create this view
container here and just put our text inside of it.
And then we're going to create an inline
style and we're going to get into the basics of borders.
So in order to be able to see a border, you got to give it some width.
And to do that you will need border width one.
So it's important to mention that all
of the styling in React Native is going to be camel case and you will never have
an opportunity to do something like this that you do in CSS.
This would be wrong.
You can't really do that here.
You got to use Camel case.
Okay, so border width one, this is pretty intuitive.
It just gives us a border of width one around our text
and this shows you pretty much what's the space that text component is taking up.
And then you could do a bunch of things with this.
For example, you could actually have different sizes of borders on each side.
So you could do something like border top width and let's give it five.
If you do that, actually the only border that's going to change is the top border
and it's going to have much thicker visual than the other borders given here.
You can also overwrite the other borders
and give it for example, border bottom width and you can give it ten.
And now your border bottom is going to be much thicker than your top.
You can also give border left width and let's say we give it a value of three.
Here we go. It's visible here and then you can do
border right width and you could give it value of 20 let's say.
And here is how it's going to l ook.
You can also give it a color border color
red for example, and it's going to become red.
Or the colors also can be hexadecimal
value for example like this FF0000 is also going to give us red color.
My editor is also giving me a choice for example to select my color here.
But I don't know what editor you're
working with so your editor might be different.
Okay, so we discussed the border width and border color.
Let's discuss something called border radius.
This allows you to create rounded corners on your elements.
You can specify a single value for all
corners or separate values for each corner using different properties.
So if you do border radius ten it's going to be applied.
It's going to be applied for all
the corners and they are all going to become rounded with a value of ten.
But you could also do something like
border top left radius let's say, and give it a value of 100.
Okay, so top left radius became very circular here.
You could do something like for their
bottom left radius and give it the same value.
And now you're going to see this and they're kind of overwriting each other.
So if we just gave this 20 and we just
gave this 20 as well, it's going to be more visible here.
You could do the same for border top right
radius and you could give it a value of like 30.
Here we go.
And then same for border bottom right
radius and give it value of 30 as well.
And this is how it looks here.
So in addition to these properties,
there are much more properties but I don't
think they are required for you to know
unless there's a specific use case.
And to look those up you can just go
to React native developer website and I'm
going to link that website right below this video.
But for now you already know all the basics
that's more than enough to know about borders.
So get creative and have fun.
And if you have any questions or comments
feel free to leave them in the comment section below.
Thanks for watching. Watching and see you in the next video.