1
00:00:02,220 --> 00:00:08,040
It's important to understand how navigation works in native apps, and especially if you have a Web

2
00:00:08,040 --> 00:00:13,050
development background, it's important to understand how it differs from navigating between screens

3
00:00:13,050 --> 00:00:17,640
in the Web because in the Web, you actually enter a Yucel.

4
00:00:17,640 --> 00:00:23,790
And if you're building a react app, you use a tool like to react router to download the user's component.

5
00:00:24,150 --> 00:00:31,050
And if you click a link that goes to my site, dotcom products again, the React router, which is Akst

6
00:00:31,050 --> 00:00:37,530
Extra Library you installed, kicks in, sees that you change the path and your neutral and loads a

7
00:00:37,530 --> 00:00:38,820
different react component.

8
00:00:38,850 --> 00:00:40,810
That's how navigation works in the web.

9
00:00:40,830 --> 00:00:48,420
So you are l is your source of truth and changing that URL might be picked up by libraries like react

10
00:00:48,420 --> 00:00:51,030
router, which then render different components onto the screen.

11
00:00:51,210 --> 00:00:53,210
That's how I react for web works.

12
00:00:53,970 --> 00:00:56,190
Now, there's one important difference to that.

13
00:00:56,190 --> 00:01:03,540
When we think about native apps, we have no you RL users don't go around in your app by entering some,

14
00:01:03,540 --> 00:01:04,220
you are out.

15
00:01:04,440 --> 00:01:09,510
Instead, you're pressing buttons, you're pressing tabs and you're going forth and back.

16
00:01:09,510 --> 00:01:11,670
You have back buttons, you have sidetracks.

17
00:01:11,850 --> 00:01:15,980
That's how you navigate on mobile apps, to be precise.

18
00:01:15,990 --> 00:01:19,530
As I mentioned, having taps is one common pattern you see there.

19
00:01:19,740 --> 00:01:23,430
Direr common pattern is that you navigate in a stack of pages.

20
00:01:23,760 --> 00:01:29,940
And that simply means that you go to some page, you click on some item, you're taken to a new screen,

21
00:01:29,940 --> 00:01:35,460
and then automatically you get a back botnet top or on Android, you have one built into the device,

22
00:01:35,460 --> 00:01:36,090
of course.

23
00:01:36,090 --> 00:01:41,310
And when you press that, you're navigated back to the page you were on before and you get a smooth

24
00:01:41,310 --> 00:01:42,390
transition for that.

25
00:01:43,080 --> 00:01:48,690
So there you could navigate around, for example, the users component by pressing the tab or by pressing

26
00:01:48,810 --> 00:01:50,970
a special item and being navigated there.

27
00:01:51,660 --> 00:01:54,940
Navigation simply looks and feels a bit different to the users.

28
00:01:55,410 --> 00:02:00,120
Now, of course, we want to bring that look and feel to our react native app, too.

29
00:02:00,690 --> 00:02:02,580
And thankfully, that's very easy.

30
00:02:02,580 --> 00:02:05,310
With the help of a third party library will use.

31
00:02:06,410 --> 00:02:13,220
The third party library, which will use and for this, I stopped my expo server here is React Navigation.

32
00:02:13,610 --> 00:02:19,520
We can install it with NPM, install, dash, dash safe, react navigation like this.

33
00:02:19,970 --> 00:02:25,510
And whilst it's called react navigation, it's actually a navigation library that's built for React

34
00:02:25,550 --> 00:02:26,120
Native.

35
00:02:26,630 --> 00:02:33,160
Now, you can also kind of use it in Web apps, but its main focus is native apps built with react native.

36
00:02:33,350 --> 00:02:40,190
So even though it's called react navigation, it's for react native, not just for react for the web

37
00:02:40,850 --> 00:02:45,980
so we can simply install this package here into our application to get started using it.

38
00:02:46,250 --> 00:02:51,140
And of course, I'll teach you the ins and outs of this package and how to use it for a different navigation

39
00:02:51,140 --> 00:02:52,630
patterns in this module.

40
00:02:53,180 --> 00:02:57,800
But in case you want to dive deeper or you always want to have a written guide, definitely also check

41
00:02:57,800 --> 00:03:03,200
out React Navigation Agric, which is the official page of this package where you can dive into the

42
00:03:03,200 --> 00:03:05,720
docs to learn all about this package.

43
00:03:06,050 --> 00:03:09,170
There you can read all about it in great detail.

44
00:03:09,350 --> 00:03:13,280
You learn how to use it, how to configure it and so on.

45
00:03:13,340 --> 00:03:14,930
There's a lot can do with it.

46
00:03:15,260 --> 00:03:20,810
And whilst I will cover the majority of this here, this is a great resource for you to dive deeper.

47
00:03:21,680 --> 00:03:27,950
Now, one thing we see here, which we absolutely should do, is we should run this command here, which

48
00:03:27,950 --> 00:03:32,080
installs a bunch of extra dependencies, reac navigation needs.

49
00:03:32,510 --> 00:03:39,260
So simply copy this command from the getting started page here and execute it in your project, in the

50
00:03:39,260 --> 00:03:45,320
command line, in the integrated terminal you have there, not npm install but XPO install, though

51
00:03:45,320 --> 00:03:50,930
the only difference is that XPO installed behind the scenes will run npm install, but it will pick

52
00:03:50,930 --> 00:03:56,560
the specific versions of these packages that work with your specific exploration.

53
00:03:56,570 --> 00:04:01,760
So it's a safer version of NPM install you could say, and therefore it's recommended that you use that

54
00:04:01,760 --> 00:04:02,050
here.

55
00:04:02,330 --> 00:04:06,020
Now one additional note about this command and this page in general.

56
00:04:06,050 --> 00:04:10,790
At the top left of this page, you see the version of reac navigation these docs are relating to.

57
00:04:11,300 --> 00:04:16,460
Now, in this course we're using where, John, three or four, they're pretty much the same.

58
00:04:16,640 --> 00:04:22,280
We're not using version five right now because version five uses a slightly different syntax, which

59
00:04:22,390 --> 00:04:23,660
for the moment won't cover.

60
00:04:24,260 --> 00:04:30,770
So make sure that if you're falling back to the docs, you actually select version for free of the documentation

61
00:04:30,770 --> 00:04:32,330
here to follow along smoothly.

62
00:04:32,460 --> 00:04:37,100
Of course, you can always have a look at version five and manually try to adjust the code if you want

63
00:04:37,100 --> 00:04:42,350
to, but for a smooth experience where the focus of course, lies on react native and not react navigation,

64
00:04:42,770 --> 00:04:45,030
make sure you pick a version for free.

65
00:04:45,200 --> 00:04:50,570
That's just a little side note in case you're wondering about the difference between the docs here and

66
00:04:50,570 --> 00:04:51,740
what you see in this course.

67
00:04:52,820 --> 00:04:58,850
Now, one important note, though, whilst we stick to react navigation, we're in for here later and

68
00:04:58,850 --> 00:05:06,590
of course, I will have a whole module on React Navigation five and later, where I will show you how

69
00:05:06,590 --> 00:05:09,950
to convert your project to use that latest version.

70
00:05:10,070 --> 00:05:12,050
So did you have the best of both worlds?

71
00:05:12,140 --> 00:05:18,710
And you'll learn both kinds of setting up navigation and doing navigation and react native apps because

72
00:05:18,710 --> 00:05:24,580
both were for as well as the future versions five and later will be super important to know.

73
00:05:25,220 --> 00:05:30,890
So let's simply copy this command and also make sure that besides installing REACT navigation, which

74
00:05:30,890 --> 00:05:36,320
is the core package, of course, we also installed these packages into the project by running EXPL

75
00:05:36,320 --> 00:05:37,160
install here.

76
00:05:38,020 --> 00:05:43,930
Now, with installation finished here, I can restart my server with NPM start and we can now start

77
00:05:43,930 --> 00:05:45,780
using react navigation.

78
00:05:46,480 --> 00:05:51,200
Now for this all, create a new folder in my project and I'll name it navigation.

79
00:05:51,520 --> 00:05:57,250
This is not something you have to do, but it can help you keep your code clean because in there all

80
00:05:57,250 --> 00:05:58,390
create a new file.

81
00:05:58,660 --> 00:06:00,730
All create my meals.

82
00:06:00,880 --> 00:06:03,460
Navigator Dodgiest File.

83
00:06:03,580 --> 00:06:05,460
Now this file name is totally up to you.

84
00:06:05,530 --> 00:06:12,970
I just want to indicate that in there I will set up the configuration for my navigation for my meals

85
00:06:12,970 --> 00:06:14,530
app here, which which Embling.

86
00:06:14,680 --> 00:06:20,710
So that's why a name ID like this and it's the Meals Navigator Jaspal where I want to set up my well

87
00:06:20,710 --> 00:06:22,150
navigation configuration.

88
00:06:22,150 --> 00:06:28,570
I want to tell Riak Navigation that library we installed, which different screens we have, how they

89
00:06:28,570 --> 00:06:32,230
are connected and how we want to be able to move between them.

90
00:06:33,160 --> 00:06:36,690
Now it's easier to simply see that than to just talk about them.

91
00:06:36,700 --> 00:06:41,350
So therefore, in the Meals Navigator, let's get started setting up some navigation.