WEBVTT

1
00:00:00.240 --> 00:00:03.500
Hello, and welcome to this react
native tutorial for beginners.

2
00:00:03.530 --> 00:00:05.980
This is our last video about styling

3
00:00:06.010 --> 00:00:09.660
that is just going to cover the basics
of styling in React Native.

4
00:00:09.680 --> 00:00:13.380
And we're going to be talking about text
styling that is an important aspect

5
00:00:13.410 --> 00:00:17.060
of creating dynamic
and interactive interfaces.

6
00:00:17.080 --> 00:00:21.340
Text styling is what allows you to control
the look and feel of the text in your app

7
00:00:21.370 --> 00:00:25.820
and it's a key part of creating an
attractive user friendly applications.

8
00:00:25.850 --> 00:00:33.420
So let's delete our stylings here
to make our code look cleaner.

9
00:00:33.450 --> 00:00:36.060
We don't need these containers here,

10
00:00:36.090 --> 00:00:40.900
we don't need the view container
either and let's delete this as well.

11
00:00:40.930 --> 00:00:43.620
And now we just see our hello world.

12
00:00:43.650 --> 00:00:46.100
So the first and most important one

13
00:00:46.130 --> 00:00:51.940
that we need for text styles is going
to be color and you can just say red or

14
00:00:51.970 --> 00:01:00.420
give it a hexadecimal value of
red and it's just going to work this way.

15
00:01:00.450 --> 00:01:05.770
And then the second one that I
want to talk about is font family.

16
00:01:05.800 --> 00:01:08.000
And this is property that allows you

17
00:01:08.030 --> 00:01:10.980
to specify the font that your
text should be displayed in.

18
00:01:11.010 --> 00:01:12.930
And React Native supports a wide range

19
00:01:12.960 --> 00:01:15.770
of fonts including system
fonts and custom fonts.

20
00:01:15.800 --> 00:01:16.540
And for example,

21
00:01:16.570 --> 00:01:25.930
you might have heard of font Arial and if
I use this you saw that my font changed.

22
00:01:25.960 --> 00:01:29.380
So let's do this again.
Here we go.

23
00:01:29.410 --> 00:01:34.540
And then what you could also use is font
size which is going to take in some point

24
00:01:34.570 --> 00:01:37.140
number and either make your
text bigger or smaller.

25
00:01:37.170 --> 00:01:40.260
For example, font size ten I'm
sure would make this smaller.

26
00:01:40.290 --> 00:01:40.900
Yep.

27
00:01:40.930 --> 00:01:43.980
But font size like 70 would
make this much bigger.

28
00:01:44.010 --> 00:01:50.570
And then you could also use font style
and the values for this either can be

29
00:01:50.600 --> 00:01:57.800
normal, which is the normal value, or
italic here's how the italic would look.

30
00:01:57.920 --> 00:02:00.540
Now let's talk about font weight.

31
00:02:00.570 --> 00:02:02.340
This property allows you to specify

32
00:02:02.370 --> 00:02:06.620
the weight of your text and it can be
expressed as a number or a string.

33
00:02:06.650 --> 00:02:12.890
So you can say font weight bold,
this will make your text look bolder.

34
00:02:12.920 --> 00:02:18.170
Or you can just say instead of bold
like 700, this is a bold value as well.

35
00:02:18.200 --> 00:02:22.500
Or you can say 900 or you can say 100.

36
00:02:22.530 --> 00:02:29.100
This will make it thinner and basically
it ranges from 100 to 900.

37
00:02:29.130 --> 00:02:33.380
You can't do something like 102.

38
00:02:33.410 --> 00:02:41.060
It should be either 100, 200,
300, 400, 500, 600, 700, 800 or 900.

39
00:02:41.090 --> 00:02:44.380
And then we can also talk
about letter spacing.

40
00:02:44.410 --> 00:02:47.340
This also takes in a number and controls

41
00:02:47.370 --> 00:02:51.180
what's going to be spacing
between your letters.

42
00:02:51.210 --> 00:02:55.420
Like this for example, or like this.

43
00:02:55.450 --> 00:02:57.500
And we can also talk about line height.

44
00:02:57.520 --> 00:02:59.140
This is a property that allows you

45
00:02:59.170 --> 00:03:04.540
to specify the height of each line
of text and it is expressed in points.

46
00:03:04.570 --> 00:03:08.700
So let's say line height of 70.

47
00:03:08.730 --> 00:03:12.660
This will make our line height
smaller if we set it to 100.

48
00:03:12.690 --> 00:03:14.340
This will increase the height.

49
00:03:14.370 --> 00:03:19.660
If we set it to 150,
it will become even more bigger.

50
00:03:19.690 --> 00:03:24.060
And if we give it a value of less
than font size, then it will shrink.

51
00:03:24.090 --> 00:03:26.580
So let's say we give it a value of 50

52
00:03:26.610 --> 00:03:31.060
and we're seeing that our
text actually shrinked.

53
00:03:31.090 --> 00:03:35.900
And finally one of the most
important parts is the text align.

54
00:03:35.930 --> 00:03:40.500
So let's just decrease the font size
to see this better to 20 maybe.

55
00:03:40.530 --> 00:03:42.860
And we don't need the letter spacing.

56
00:03:42.890 --> 00:03:47.140
And let's say that text align is auto.

57
00:03:47.160 --> 00:03:49.940
Then it's just going to be
placed wherever it was placed.

58
00:03:49.970 --> 00:03:52.060
But it has different values.

59
00:03:52.090 --> 00:03:55.180
So let's say it should be centered.

60
00:03:55.210 --> 00:03:56.900
Then it will be centered.

61
00:03:56.930 --> 00:04:00.540
You can set it to be right
and it will be aligned.

62
00:04:00.570 --> 00:04:01.660
Right.

63
00:04:01.690 --> 00:04:05.020
So this is what the text
align property does.

64
00:04:05.050 --> 00:04:06.940
I think that's it.

65
00:04:06.960 --> 00:04:08.700
With this knowledge you've gained today,

66
00:04:08.730 --> 00:04:12.700
you're ready to start styling
text in your react native apps.

67
00:04:12.730 --> 00:04:14.780
So get creative and have fun.

68
00:04:14.800 --> 00:04:16.000
See you in the next videos.