Hello, and welcome to this react native tutorial for beginners.
This is our last video about styling
that is just going to cover the basics of styling in React Native.
And we're going to be talking about text styling that is an important aspect
of creating dynamic and interactive interfaces.
Text styling is what allows you to control the look and feel of the text in your app
and it's a key part of creating an attractive user friendly applications.
So let's delete our stylings here to make our code look cleaner.
We don't need these containers here,
we don't need the view container either and let's delete this as well.
And now we just see our hello world.
So the first and most important one
that we need for text styles is going to be color and you can just say red or
give it a hexadecimal value of red and it's just going to work this way.
And then the second one that I want to talk about is font family.
And this is property that allows you
to specify the font that your text should be displayed in.
And React Native supports a wide range
of fonts including system fonts and custom fonts.
And for example,
you might have heard of font Arial and if I use this you saw that my font changed.
So let's do this again. Here we go.
And then what you could also use is font size which is going to take in some point
number and either make your text bigger or smaller.
For example, font size ten I'm sure would make this smaller.
Yep.
But font size like 70 would make this much bigger.
And then you could also use font style and the values for this either can be
normal, which is the normal value, or italic here's how the italic would look.
Now let's talk about font weight.
This property allows you to specify
the weight of your text and it can be expressed as a number or a string.
So you can say font weight bold, this will make your text look bolder.
Or you can just say instead of bold like 700, this is a bold value as well.
Or you can say 900 or you can say 100.
This will make it thinner and basically it ranges from 100 to 900.
You can't do something like 102.
It should be either 100, 200, 300, 400, 500, 600, 700, 800 or 900.
And then we can also talk about letter spacing.
This also takes in a number and controls
what's going to be spacing between your letters.
Like this for example, or like this.
And we can also talk about line height.
This is a property that allows you
to specify the height of each line of text and it is expressed in points.
So let's say line height of 70.
This will make our line height smaller if we set it to 100.
This will increase the height.
If we set it to 150, it will become even more bigger.
And if we give it a value of less than font size, then it will shrink.
So let's say we give it a value of 50
and we're seeing that our text actually shrinked.
And finally one of the most important parts is the text align.
So let's just decrease the font size to see this better to 20 maybe.
And we don't need the letter spacing.
And let's say that text align is auto.
Then it's just going to be placed wherever it was placed.
But it has different values.
So let's say it should be centered.
Then it will be centered.
You can set it to be right and it will be aligned.
Right.
So this is what the text align property does.
I think that's it.
With this knowledge you've gained today,
you're ready to start styling text in your react native apps.
So get creative and have fun.
See you in the next videos.