1
00:00:02,430 --> 00:00:05,640
So let's start working on this app then

2
00:00:05,760 --> 00:00:08,270
and for this, I have a brand new app here,

3
00:00:08,280 --> 00:00:12,390
you'll find it attached in case you want to build up on this same starting app.

4
00:00:12,420 --> 00:00:19,020
This simple app gives us this here, a very ugly app where we have some text which is overlapped by the

5
00:00:19,020 --> 00:00:21,440
status bar, by the notch.

6
00:00:21,450 --> 00:00:26,800
Now we could fix this with save area view as you learned earlier but we'll not need to because we'll

7
00:00:26,820 --> 00:00:33,210
not keep this content anyways and we'll use a third-party library that allows us to easily navigate

8
00:00:33,210 --> 00:00:36,530
between different screens and get nice animations along the way,

9
00:00:36,690 --> 00:00:38,310
so that we don't have to take care about that

10
00:00:38,310 --> 00:00:44,610
and this third-party library will also manage the notch on the device and give us this save area out

11
00:00:44,610 --> 00:00:45,880
of the box.

12
00:00:45,900 --> 00:00:52,230
Now before we add that third-party library, let's start writing some code though because we can only

13
00:00:52,230 --> 00:00:56,020
navigate between screens if we have multiple screens.

14
00:00:56,040 --> 00:01:01,950
So for that, I'll create a new screens folder here and I'll also already create a components folder,

15
00:01:01,950 --> 00:01:07,410
the difference will be that in the screens folder, we have these React components which we then use as

16
00:01:07,470 --> 00:01:07,830
full

17
00:01:07,860 --> 00:01:15,420
screens I guess and in the components folder instead, we'll have the components we use on

18
00:01:15,420 --> 00:01:16,430
our screens,

19
00:01:16,440 --> 00:01:23,280
so for example when we have that grid of meal categories, of food categories, then our grid item would

20
00:01:23,280 --> 00:01:30,200
be a component, the entire grid, the entire food categories screen however would be a screen

21
00:01:30,450 --> 00:01:37,530
and I guess this makes sense. Now as sketched, as laid out, in this app we'll need a couple of screens and

22
00:01:37,530 --> 00:01:43,860
I'll create all the files already and we'll fill them with life throughout this module of course. We'll need

23
00:01:43,890 --> 00:01:49,440
the categories screen and I'll name the file categories screen to make it really clear what's inside

24
00:01:49,440 --> 00:01:50,200
there.

25
00:01:50,250 --> 00:01:57,270
This is the screen where we can select a category like Italian, German, American, so where we can select

26
00:01:57,270 --> 00:02:04,170
a food category, so we'll add content that reflects this, we'll add such a grid on this screen, in this

27
00:02:04,230 --> 00:02:06,420
screen component later.

28
00:02:06,420 --> 00:02:14,100
Now once we selected a category, we will see a list of meals that fits into this category and I'll name

29
00:02:14,100 --> 00:02:20,190
this screen which we'll then see, which we'll navigate to, category meals screen because this is the screen

30
00:02:20,190 --> 00:02:23,390
that loads the meals for a chosen category.

31
00:02:23,460 --> 00:02:28,240
So that's another screen we need and another screen we'll be able to navigate to.

32
00:02:28,320 --> 00:02:35,100
Now we also will need a favorites screen which is the screen that holds all our favorite recipes, our

33
00:02:35,100 --> 00:02:42,300
favorite meals and we'll also need a MealDetailScreen, that's the screen we see if we tap on a single

34
00:02:42,300 --> 00:02:48,390
meal inside of a chosen category or on the favorite screen. This then shows us the ingredients and the

35
00:02:48,390 --> 00:02:51,120
detailed steps for this meal.

36
00:02:51,120 --> 00:02:58,020
Now and last but not least as laid out, we'll need a filters screen and this filters screen is the screen

37
00:02:58,020 --> 00:03:05,700
that allows us to set filters, like vegan food so that we only see recipes which are vegan or vegetarian

38
00:03:05,790 --> 00:03:08,110
or glutenFree or lactoseFree,

39
00:03:08,130 --> 00:03:14,950
these will be the four categories I'll have in this app, so these are the screens. Now we'll add components

40
00:03:15,040 --> 00:03:18,410
as we need them and not add all the files in advance

41
00:03:18,430 --> 00:03:25,390
and with that, we have the very basic setup we need here, though of course all our screens

42
00:03:25,720 --> 00:03:31,330
are totally empty. Now we'll populate them with more life step-by-step but I at least want to set up

43
00:03:31,330 --> 00:03:34,160
a basic component in each of these screens.

44
00:03:34,390 --> 00:03:40,000
So I'll start in the categories screen and of course, we need to import React from React there because

45
00:03:40,000 --> 00:03:46,750
we'll build a React component and we'll also import something from React Native because obviously, we'll

46
00:03:47,050 --> 00:03:52,600
build a React component here that uses some React Native components. To be precise,

47
00:03:52,630 --> 00:03:58,110
I will start simple here and import a view and a text from React Native and then create my component, the

48
00:03:58,120 --> 00:04:04,630
categories screen in this case which takes props or which might receive props at least because it's

49
00:04:04,630 --> 00:04:11,530
a normal React component after all and where I will export this as my default component. I'll also add

50
00:04:11,530 --> 00:04:16,870
a stylesheet because chances are we'll need this and if we don't, we can still delete it later.

51
00:04:16,870 --> 00:04:19,150
So I'll set up my styles here with stylesheet

52
00:04:19,150 --> 00:04:22,060
create, like this.

53
00:04:22,330 --> 00:04:26,440
So that's a very basic React component, doesn't render anything though,

54
00:04:26,440 --> 00:04:32,730
so inside of the component function here, we'll have to return something and that something is some jsx

55
00:04:32,770 --> 00:04:39,920
code where I want to render a view and in there, a text and here I say the categories screen.

56
00:04:40,240 --> 00:04:49,270
Now I'll also give that view some style where I say styles.screen, with a very basic screen layout

57
00:04:49,270 --> 00:04:56,260
or a screen styling here where I set flex to one and then justify content to center and align items to

58
00:04:56,260 --> 00:04:58,980
center and as you learned, this will do one thing,

59
00:04:59,080 --> 00:05:04,850
it will center the content on the screen, so it will center this text on the screen in the end.

60
00:05:04,960 --> 00:05:09,880
This is the base component and I'll copy that content into all other screens

61
00:05:09,910 --> 00:05:14,920
and of course, this is not the final content we'll have there, just some dummy content so that we can

62
00:05:14,920 --> 00:05:19,210
start navigating between some of these screens and see something.

63
00:05:19,210 --> 00:05:25,900
So here, we have the category meal screen, that's this component here and that's therefore what we need to

64
00:05:25,900 --> 00:05:37,880
export here and here, I will therefore say the category meal screen like this. Now I'll also add this

65
00:05:37,880 --> 00:05:41,650
to the favorites screen and rename this to favorite screen

66
00:05:41,690 --> 00:05:43,700
and of course therefore export

67
00:05:43,700 --> 00:05:45,000
favorite screen here

68
00:05:45,110 --> 00:05:48,720
and then here, I can say the favorites screen,

69
00:05:48,740 --> 00:05:53,060
copy that into the filters screen and do the same thing there,

70
00:05:53,080 --> 00:05:55,920
it's the filters screen,

71
00:05:55,940 --> 00:06:02,240
I renamed it and I exported this and also say the filters screen here in our text

72
00:06:02,390 --> 00:06:06,110
and last but not least, this is the MealDetailScreen.

73
00:06:06,110 --> 00:06:09,000
So here we have the MealDetailScreen, I'll

74
00:06:09,740 --> 00:06:15,140
also name it MealDetailScreen here and export the MealDetailScreen.

75
00:06:15,140 --> 00:06:19,930
So with that, we got that all set up in these screens,

76
00:06:20,060 --> 00:06:23,390
now we're almost done with all the preparation,

77
00:06:23,450 --> 00:06:29,240
I just want to add some special fonts to this app and thereafter, we'll dive right into adding some navigation.