WEBVTT

1
00:00:00.240 --> 00:00:02.100
Hi and welcome to today's video.

2
00:00:02.130 --> 00:00:06.650
We're going to start off by creating
navigation system for our project because

3
00:00:06.680 --> 00:00:10.220
now we do know how to create
react native navigation.

4
00:00:10.250 --> 00:00:14.340
So let's start off by installing
navigation in our project.

5
00:00:14.360 --> 00:00:16.420
And for this we're just going to go to our

6
00:00:16.450 --> 00:00:21.260
browser, we're going to look for react
native navigation,

7
00:00:21.290 --> 00:00:26.740
go to their website and documentation,
and we're going to start off by following

8
00:00:26.760 --> 00:00:31.020
their documentation to install
everything that we need for navigation.

9
00:00:31.050 --> 00:00:35.820
So let's go to our terminal and inside
here, let's navigate to the root of our

10
00:00:35.850 --> 00:00:42.780
project Donation app and then let's
just copy this command and let it run.

11
00:00:42.800 --> 00:00:44.340
And after we're done with that,

12
00:00:44.370 --> 00:00:47.220
we're going to have to run
a couple more commands.

13
00:00:47.250 --> 00:00:50.060
We're just going to follow
with the regular installation.

14
00:00:50.090 --> 00:00:57.540
Please copy this for the bear react
native project and let it run as well.

15
00:00:57.570 --> 00:01:00.100
And since we're running a higher version

16
00:01:00.130 --> 00:01:04.770
than 60 of React native,
we are not going to need this command here

17
00:01:04.800 --> 00:01:11.680
and we can just run the pods
for completing our installation.

18
00:01:14.560 --> 00:01:17.130
And then we do need to do some more things

19
00:01:17.160 --> 00:01:20.340
to make sure that Android
setup is all good.

20
00:01:20.370 --> 00:01:25.280
So for that, let's just follow
the documentation as well.

21
00:01:25.640 --> 00:01:29.700
I'm going to make this window smaller.
And here we go.

22
00:01:29.730 --> 00:01:33.460
So they're telling us to go to Android app

23
00:01:33.490 --> 00:01:40.760
source main and then Java and then
we're going to the main activity file.

24
00:01:40.790 --> 00:01:42.340
So let's go here.

25
00:01:42.370 --> 00:01:49.290
Let's copy this command here and you can
just place it at the end of the file.

26
00:01:49.320 --> 00:01:52.460
So right here should be
good inside the class.

27
00:01:52.490 --> 00:01:58.060
Let's save this and make sure that we
have the import for the bundler as well.

28
00:01:58.090 --> 00:02:05.260
Great, this is saved for me and this
should install everything that we need.

29
00:02:05.290 --> 00:02:07.290
But we are going to be using

30
00:02:07.320 --> 00:02:14.240
the Stack Navigator for this project, so
let's just quickly install that as well.

31
00:02:14.520 --> 00:02:17.610
Great, let's just go to stack navigation

32
00:02:17.640 --> 00:02:20.730
and follow the installation
process here as well.

33
00:02:20.760 --> 00:02:24.420
I am going to open up the previous

34
00:02:24.450 --> 00:02:31.540
terminal and I'm going to copy
this comment here and let it run.

35
00:02:31.570 --> 00:02:35.890
And once that's done,
we need to run this as well for bear

36
00:02:35.920 --> 00:02:40.260
react native projects, we don't have expo
so please don't follow this one here.

37
00:02:40.290 --> 00:02:43.340
So let's just copy and paste this here

38
00:02:43.370 --> 00:02:48.140
and then they are telling us that we need
to import the react native gesture handler

39
00:02:48.170 --> 00:02:55.020
in the top of our entry file and our
entry file is going to be index JS.

40
00:02:55.050 --> 00:02:59.300
So let's just import it right here.

41
00:02:59.330 --> 00:03:01.700
Great, let's install the masked view as

42
00:03:01.730 --> 00:03:12.180
well in the root of our project
and then let's install the pods.

43
00:03:12.200 --> 00:03:14.260
Great.
And now once we're done with that,

44
00:03:14.290 --> 00:03:20.740
please just close your Metro bundler
and close your simulator as well.

45
00:03:20.770 --> 00:03:24.171
Great.
And now let's start with

46
00:03:24.371 --> 00:03:24.500
npm start -- --reset-cache

47
00:03:29.770 --> 00:03:32.100
this will just make sure that we have no

48
00:03:32.130 --> 00:03:37.500
issues and no cached files
interfering with one another.

49
00:03:37.530 --> 00:03:42.000
And I'm just going to press
I to run this on iOS.

50
00:03:42.120 --> 00:03:44.100
And this is going to be my Metro bundler.

51
00:03:44.130 --> 00:03:46.880
And I'm not going to close it because we

52
00:03:46.910 --> 00:03:50.900
want to see the changes
that we make in the simulator.

53
00:03:50.920 --> 00:03:53.980
Great.
So I think that's it for this video.

54
00:03:54.010 --> 00:03:55.860
I want to make it short and quick.

55
00:03:55.890 --> 00:04:02.300
And in the next video, let's do
the header component for our main file.

56
00:04:02.330 --> 00:04:06.740
Thanks so much for watching,
and I'll see you in the next video.