WEBVTT

1
00:00:00.960 --> 00:00:05.140
Hi and welcome to our tutorial
on font awesome in React native.

2
00:00:05.160 --> 00:00:07.100
In this video, we'll be discussing what

3
00:00:07.130 --> 00:00:11.700
Font awesome is, why it's useful, and how
to use it in your React Native app.

4
00:00:11.730 --> 00:00:14.010
Font awesome is a popular icon library

5
00:00:14.040 --> 00:00:18.260
that allows you to add scalable
vector icons to your website or app.

6
00:00:18.290 --> 00:00:20.860
It provides a wide range of icons that can

7
00:00:20.890 --> 00:00:24.340
be easily customized
to fit your design needs.

8
00:00:24.370 --> 00:00:27.060
With Font awesome,
you can easily add icons to your

9
00:00:27.080 --> 00:00:30.580
React Native app without the need
for additional image files.

10
00:00:30.600 --> 00:00:32.940
Adding icons to your React Native app can

11
00:00:32.960 --> 00:00:37.300
greatly enhance the user experience and
make your app more visually appealing.

12
00:00:37.320 --> 00:00:41.300
Font awesome also provides a consistent
look and feel across all platforms,

13
00:00:41.330 --> 00:00:44.940
making it a great choice
for cross platform applications.

14
00:00:44.970 --> 00:00:48.660
Additionally, since Fontawesome is a vector
based icon library,

15
00:00:48.680 --> 00:00:52.660
it can be easily scaled to any
size without losing quality.

16
00:00:52.680 --> 00:00:54.420
Now let's get to coding and

17
00:00:54.450 --> 00:00:58.220
let's install our Font awesome
icons and see how we can use them.

18
00:00:58.240 --> 00:00:59.740
You're now looking at my screen and

19
00:00:59.770 --> 00:01:02.860
what I want to show you
is what Font awesome is.

20
00:01:02.890 --> 00:01:07.260
So let's go to Google,
open a new window here and go to FontAwesome

21
00:01:07.290 --> 00:01:11.020
awesome website and check out
the icons that they have.

22
00:01:11.050 --> 00:01:15.770
They have all kinds of categories
here that you can explore from.

23
00:01:15.800 --> 00:01:17.900
For example, if you go to coding,

24
00:01:17.930 --> 00:01:22.700
you're going to see a bunch
of icons connected to coding.

25
00:01:22.730 --> 00:01:25.380
So you have icons about anything that you

26
00:01:25.410 --> 00:01:30.020
want here and you have all the
instructions on how to use them as well.

27
00:01:30.050 --> 00:01:34.820
So now we want to install the Font
awesome icon in our application.

28
00:01:34.840 --> 00:01:36.490
And for this, we're just going to go

29
00:01:36.520 --> 00:01:44.980
to Font Awesome React Native icons and
then let's click on their GitHub link.

30
00:01:45.010 --> 00:01:49.260
And here should be a link
to the official documentation

31
00:01:49.290 --> 00:01:50.420
let's go there.

32
00:01:50.450 --> 00:01:53.290
So let's copy this first of all and go

33
00:01:53.320 --> 00:01:59.960
to open a new terminal
and then let's go to our application.

34
00:02:00.720 --> 00:02:03.340
And then let's just paste this here.

35
00:02:03.360 --> 00:02:06.540
It's going to take some time,
so I'm going to just quicken up the video

36
00:02:06.570 --> 00:02:10.060
and you can come back once
your installation is complete.

37
00:02:10.090 --> 00:02:14.500
And then we need to
install the pods for iOS.

38
00:02:14.530 --> 00:02:19.720
So let's copy this and just paste it here.

39
00:02:20.720 --> 00:02:22.020
And then as suggested,

40
00:02:22.050 --> 00:02:29.500
let's use their command to install
different kinds of icons that they offer.

41
00:02:29.530 --> 00:02:33.080
So let's copy it one by one.

42
00:02:33.400 --> 00:02:34.890
We need this folder here.

43
00:02:34.920 --> 00:02:37.543
Let's get out of iOS folder

44
00:02:37.743 --> 00:02:40.360
and do the installation here.

45
00:02:42.040 --> 00:02:43.580
Great, that has been installed.

46
00:02:43.610 --> 00:02:54.680
Let's install the next one right now
and then let's install the third one.

47
00:02:58.000 --> 00:03:00.020
And now all the installation process has

48
00:03:00.050 --> 00:03:06.100
been completed and it's really recommended
that you close your Metro bundler

49
00:03:06.130 --> 00:03:12.340
and restart your app just in case
your SVG paths are not linked.

50
00:03:12.360 --> 00:03:14.200
So I'm going to do that and you can come

51
00:03:14.230 --> 00:03:18.820
back to the video once you
rerun your application as well.

52
00:03:18.840 --> 00:03:19.300
Great.

53
00:03:19.320 --> 00:03:22.120
Now that you're back,
you're now looking at my editor and I want

54
00:03:22.150 --> 00:03:25.220
to show you how to use Font
awesome in your application.

55
00:03:25.250 --> 00:03:30.640
First of all you're going to need
to import the Font awesome icon library

56
00:03:30.680 --> 00:03:35.420
and then let's say that we want
to show the user a checkbox here.

57
00:03:35.450 --> 00:03:37.880
Next to submit for this we're going

58
00:03:37.910 --> 00:03:45.200
to need FA check
and it's recommended by my imports that I

59
00:03:45.230 --> 00:03:50.580
use this so I'm just going to use it,
hopefully it will work and then I'm going

60
00:03:50.610 --> 00:03:55.180
to use FontAwesome Icon and I'm going to use
the FA check that I imported here.

61
00:03:55.210 --> 00:04:00.040
I'm going to close this and I'm going
to give it a style of a white color so

62
00:04:00.070 --> 00:04:04.840
that we're able to see it
and if I save this

63
00:04:06.040 --> 00:04:11.020
we're going to see an error, it might be
because of this so let's save this again.

64
00:04:11.040 --> 00:04:11.610
Okay, great.

65
00:04:11.640 --> 00:04:17.620
So you don't need the FA check here
and then we see that it takes the whole

66
00:04:17.650 --> 00:04:20.300
block here and we can
put them together again.

67
00:04:20.330 --> 00:04:23.540
So we will need a view for this to group

68
00:04:23.570 --> 00:04:27.860
them together and we're going to need
the Flex styling and we're going to get

69
00:04:27.890 --> 00:04:33.820
into Flex very soon guys, so don't worry
if you don't know what this is yet.

70
00:04:33.840 --> 00:04:38.140
And then we can use the Align Items Center

71
00:04:38.160 --> 00:04:44.580
so that they are vertically centered
and we can use the Justify Content Center

72
00:04:44.600 --> 00:04:47.620
so that it's horizontally
centered as well.

73
00:04:47.650 --> 00:04:52.020
By the end of this video you should have
a basic understanding of what FontAwesome is,

74
00:04:52.040 --> 00:04:55.420
why it's useful and how to use
it in your react native app.

75
00:04:55.450 --> 00:05:00.140
You should now be able to install FontAwesome
in your own react native app and use

76
00:05:00.160 --> 00:05:03.780
to add scalable vector
icons to your application.

77
00:05:03.800 --> 00:05:06.120
Thanks for watching and see
you in the next video.