WEBVTT

1
00:00:00.320 --> 00:00:02.420
Hi, and welcome back to our tutorials.

2
00:00:02.440 --> 00:00:04.060
We're going to be building our search

3
00:00:04.090 --> 00:00:07.380
component, and for that,
we're going to be needing fontawesome

4
00:00:07.410 --> 00:00:10.580
icons, which we haven't
installed for our application.

5
00:00:10.610 --> 00:00:13.260
So all we're going to do today is just

6
00:00:13.290 --> 00:00:16.740
install the fontawesome icons,
and in the next video,

7
00:00:16.760 --> 00:00:20.380
we're going to be taking care
of the search input component.

8
00:00:20.400 --> 00:00:24.860
So for that, we're going to need to go
to the font awesome

9
00:00:24.890 --> 00:00:31.180
on React Native documentation,
let's click on the GitHub link and then go

10
00:00:31.210 --> 00:00:36.880
to the official documentation
and follow their suggestions.

11
00:00:37.840 --> 00:00:41.460
So I'm going to open my terminal

12
00:00:41.490 --> 00:00:46.980
and I'm going to navigate to the root
of our project called Donation App.

13
00:00:47.010 --> 00:00:50.180
And then all I'm going to do is copy this

14
00:00:50.210 --> 00:00:53.940
command and paste it here
and wait for it to install.

15
00:00:53.970 --> 00:00:57.620
And once it's done,
I'm going to go to the iOS folder,

16
00:00:57.650 --> 00:01:03.100
install the pods, and once that's done,
I'm going to run these three commands.

17
00:01:03.130 --> 00:01:05.490
So just copy these three commands,

18
00:01:05.520 --> 00:01:12.840
and once this is done, get out of the iOS
folder and copy it in your terminal.

19
00:01:13.840 --> 00:01:16.050
And when these three command are going

20
00:01:16.080 --> 00:01:20.130
to be done,
just in case your caches are going

21
00:01:20.160 --> 00:01:24.290
to interfere with your application
and maybe you're going to get some errors

22
00:01:24.320 --> 00:01:28.020
using the font of some icons,
I suggest that you close your Metro

23
00:01:28.050 --> 00:01:34.820
bundler if you have it running
and just close your simulator as well.

24
00:01:34.850 --> 00:01:42.640
And then run
npm start -- --reset-cache

25
00:01:42.840 --> 00:01:47.780
i'm going to click on i so
that my iOS simulator runs.

26
00:01:47.810 --> 00:01:50.060
And to make sure that my font awesome

27
00:01:50.090 --> 00:01:54.850
icons are working,
I'm going to use one here.

28
00:01:54.880 --> 00:01:56.740
And let's use faSearch,

29
00:01:56.770 --> 00:01:59.980
because that's what we're going
to be using for our component.

30
00:02:00.010 --> 00:02:03.060
And let's import it from the solid icons.

31
00:02:03.090 --> 00:02:05.380
So I got two imports here.

32
00:02:05.410 --> 00:02:09.700
I'm going to save this,
and once our application launches,

33
00:02:09.730 --> 00:02:16.220
we should be able to see that search
component appear on our home screen.

34
00:02:16.240 --> 00:02:17.380
Great.
It's here.

35
00:02:17.410 --> 00:02:19.580
So that's it for this video.

36
00:02:19.610 --> 00:02:23.100
Today we installed fontawesome icons,
and in the next video,

37
00:02:23.130 --> 00:02:29.060
we're going to be going over how
to create our search input component.

38
00:02:29.090 --> 00:02:30.730
Thanks so much for watching.

39
00:02:30.760 --> 00:02:31.760
See you in the next video.