1
00:00:02,460 --> 00:00:07,650
So now we worked with navigation quite a bit, we're able to move forward and backward, you learn how

2
00:00:07,650 --> 00:00:14,070
to add icons and action buttons here to this header, how to style and control the header in general,

3
00:00:14,070 --> 00:00:15,260
how to pass data around.

4
00:00:15,270 --> 00:00:19,400
And these are all crucial things for mobile apps you're building with react native.

5
00:00:19,410 --> 00:00:24,530
Of course, these are things you'll do over and over again when working with REAC Native to build apps.

6
00:00:24,990 --> 00:00:30,600
Now, this is not the only form of navigation we could implement, though we can also add tabs at the

7
00:00:30,600 --> 00:00:35,700
bottom so that we can switch between different sections in his app, which of course also is a typical

8
00:00:35,700 --> 00:00:40,890
pattern, you know, from mobile apps and which is also the pattern I sketched out at the beginning

9
00:00:40,890 --> 00:00:41,670
of this module.

10
00:00:42,010 --> 00:00:49,350
I want to have two tabs in his app, one for all our meals, or in this case all our categories, and

11
00:00:49,350 --> 00:00:54,210
one for just our favorite meals, the meals we marked as a favorite.

12
00:00:55,460 --> 00:01:01,400
That, of course, brings us to one important question how can we add taps when working with react navigation?

13
00:01:01,730 --> 00:01:04,250
And that's thankfully not too difficult.

14
00:01:04,970 --> 00:01:10,460
Let's go to our meals navigator Jaspal, which is where we set up navigation and dare we created a Stack

15
00:01:10,460 --> 00:01:10,990
Navigator.

16
00:01:11,120 --> 00:01:17,480
You need a Stack Navigator whenever you have screens, pages in your app that are connected with such

17
00:01:17,480 --> 00:01:19,010
a forward, backward flow.

18
00:01:19,020 --> 00:01:22,150
That's the typical stack navigation what we're using here.

19
00:01:22,460 --> 00:01:26,590
And of course, we'll still need that even if we now also add taps.

20
00:01:26,930 --> 00:01:32,810
The good thing is you can simply have multiple navigators in your application and that's exactly what

21
00:01:32,810 --> 00:01:33,470
I'll do now.

22
00:01:34,500 --> 00:01:39,810
From React navigation, besides to Stack Navigator, the Create Stack Navigator function, we can also

23
00:01:39,810 --> 00:01:44,570
import T8 Bottom Tab Navigator and that does just what it sounds like.

24
00:01:44,580 --> 00:01:48,090
It allows us to create a navigator that works with tabs at the bottom.

25
00:01:49,020 --> 00:01:50,850
So create bottom tab navigator.

26
00:01:50,850 --> 00:01:51,300
It is.

27
00:01:51,690 --> 00:01:56,580
And we can simply create an additional navigator next to our meals.

28
00:01:56,580 --> 00:01:58,410
Navigator, let's say so.

29
00:01:58,410 --> 00:02:00,480
Here I will damed is.

30
00:02:01,410 --> 00:02:05,970
Meals Faf, tab, navigator, you can name it whatever you want, that just want to be really clear

31
00:02:06,450 --> 00:02:14,970
about what his navigator controls and will controls are meals and favorites with Taps and I call Create

32
00:02:14,970 --> 00:02:16,530
Bottom Tabs, Navigator and storage.

33
00:02:16,530 --> 00:02:22,170
A result of that in this constant the result of this justice before for to Stack Navigator, isn't the

34
00:02:22,170 --> 00:02:23,700
end a react component.

35
00:02:24,150 --> 00:02:27,650
So we can store that here and we'll soon be able to use distant.

36
00:02:28,350 --> 00:02:34,740
Now how do we configure that tab navigator then just like the Stack Navigator, the TAB Navigator also

37
00:02:34,740 --> 00:02:40,590
takes the object where we have to inform it about the different taps, so to say the different sections

38
00:02:40,590 --> 00:02:43,830
to different screens we want to load when we click to different tabs.

39
00:02:44,730 --> 00:02:47,280
And there I have two tabs which I want.

40
00:02:47,490 --> 00:02:49,550
One tab should be what we see here.

41
00:02:49,770 --> 00:02:55,800
So our stack in the end, not just this screen, but also the functionality to go to another screen.

42
00:02:55,950 --> 00:03:02,310
So I want to have the entire stack here in one tab and a different screen or a different stack in the

43
00:03:02,310 --> 00:03:02,930
average tab.

44
00:03:03,760 --> 00:03:12,190
And the good thing is you can use a stack or any other navigator as a screen in this navigator, so

45
00:03:12,190 --> 00:03:16,540
what you can do here is you can set up an identifier that's maybe named meals.

46
00:03:16,540 --> 00:03:17,890
That is totally up to you, that name.

47
00:03:18,130 --> 00:03:20,730
And now you could point at a screen here.

48
00:03:21,040 --> 00:03:23,830
You can also use that long form with screen.

49
00:03:24,130 --> 00:03:27,370
But I'll use the shortcut and just directly point at a screen here.

50
00:03:28,840 --> 00:03:35,140
At the screen at which you point here can even be just a react component, as we created here in the

51
00:03:35,140 --> 00:03:40,050
screens folder or well, since this year, as I mentioned, all the returns are reac component.

52
00:03:40,210 --> 00:03:42,560
It can also be the result of create Stack Navigator.

53
00:03:42,790 --> 00:03:50,200
So indeed, I'll use the Meals Navigator here as my screen to be loaded for the meals tab.

54
00:03:50,200 --> 00:03:53,350
In the end, this is how this works is how we can set this up.

55
00:03:54,460 --> 00:03:56,440
So that's our first tap.

56
00:03:56,440 --> 00:04:01,300
The second tab will be our favorites and there I have no stack yet.

57
00:04:01,300 --> 00:04:05,590
We might later add one, but for now I'll just point at the favorites screen.

58
00:04:06,010 --> 00:04:14,050
Let's import that favorites screen here in the middle navigator file import favourite's screen from

59
00:04:14,590 --> 00:04:16,900
the screens folder and their favorites.

60
00:04:16,900 --> 00:04:23,500
Screen like this and now simply point at the favorite screen here for our favorites identifier in the

61
00:04:23,500 --> 00:04:25,090
Bottom Tab Navigator.

62
00:04:28,050 --> 00:04:32,720
This is how easy we can set up a tab navigator, the question now is how do we use it?

63
00:04:33,360 --> 00:04:38,520
Well, in the end, it's now this navigator, which we want to use as our route navigator in the app

64
00:04:38,520 --> 00:04:44,000
because it includes our existing Miles Navigator and it also allows us to go to the favorite screen.

65
00:04:44,490 --> 00:04:49,710
So in the end, I just use this year in my app container instead of the Moelis Navigator, because the

66
00:04:49,710 --> 00:04:53,280
Meals Navigator now is nested in this tab navigator.

67
00:04:53,490 --> 00:05:00,090
And that is how you can combine multiple navigators in the native app driven by navigation because you

68
00:05:00,090 --> 00:05:02,320
can simply mix and match them together.

69
00:05:02,340 --> 00:05:07,170
You always have one route navigator, which is in your app container and that makes sense.

70
00:05:07,170 --> 00:05:09,000
You have one entry point to your app.

71
00:05:09,420 --> 00:05:15,840
But does Route Navigator kind of course, have over nested navigators as we have it here for this tap

72
00:05:15,840 --> 00:05:21,840
where we point at the Meals Navigator and if now is safeness and our app that for restarts, you see

73
00:05:21,840 --> 00:05:27,870
now we have tabs at the bottom here and we can click them to go to our meals stack here and we can use

74
00:05:27,870 --> 00:05:29,700
this stack just as before.

75
00:05:30,000 --> 00:05:34,770
But I can also switch to favorites, go back to my stack, which even keeps its stated Wazzan.

76
00:05:34,980 --> 00:05:38,630
And that is how easy we can add Tab's same on Android, of course.

77
00:05:39,450 --> 00:05:43,350
Now, of course, it's also noteworthy that these tabs don't look that great yet.

78
00:05:43,560 --> 00:05:46,470
It would be nice to have an icon here and not just some text.

79
00:05:46,650 --> 00:05:50,160
And we'll take care about configuring these tabs just a second.

80
00:05:50,580 --> 00:05:53,040
But this is how easily we can get started with tabs.

81
00:05:53,040 --> 00:05:58,620
And this is how you can think about using multiple Navigator's in Ariake navigation app or in the app

82
00:05:58,620 --> 00:05:59,830
using react navigation.

83
00:06:00,570 --> 00:06:04,890
Now with that, let's see how we can actually add icons and how we can configure our taps a bit more

84
00:06:05,010 --> 00:06:08,190
also to use a different color than the default blue here.