1
00:00:02,350 --> 00:00:07,000
On the categories screen, we want to make sure that our item can be touched there,

2
00:00:07,020 --> 00:00:13,590
so I will import touchable and I will import touchable opacity here to have a slight opacity effect

3
00:00:13,740 --> 00:00:15,000
but of course it's up to you

4
00:00:15,090 --> 00:00:17,100
which pattern or which component you use

5
00:00:17,100 --> 00:00:23,730
there, should be a touchable component though which you wrap around your item here and now on touchable

6
00:00:23,730 --> 00:00:24,750
opacity,

7
00:00:24,750 --> 00:00:30,060
I'll add onPress so that we can do something when this is pressed.

8
00:00:30,060 --> 00:00:31,400
What do we want to do?

9
00:00:31,440 --> 00:00:38,760
We want to go to the category meals screen which is kind of the detail page for a chosen category to

10
00:00:38,760 --> 00:00:40,830
show all recipes for that category,

11
00:00:40,830 --> 00:00:43,910
we have no recipes yet but I still want to go to the page already.

12
00:00:44,610 --> 00:00:50,100
So therefore here, we need to trigger a navigation action and previously we did this with props navigation

13
00:00:50,280 --> 00:00:51,470
navigate, right?

14
00:00:51,480 --> 00:00:56,550
The problem is, we don't have props available here because we're inside of the render grid item function

15
00:00:56,670 --> 00:00:59,090
which is outside of our component.

16
00:00:59,130 --> 00:01:04,610
Now we can simply move this inside of our component to fix this problem.

17
00:01:04,770 --> 00:01:10,470
If we create that function in there, then we do have access to props because we're now inside of our

18
00:01:10,470 --> 00:01:17,070
component function and now we'll be able to call navigate here. We can call navigate and I want to go

19
00:01:17,070 --> 00:01:23,310
to a route name and of course the route name I want to go to can be found in our navigator is category

20
00:01:23,310 --> 00:01:27,510
meals right, because we want to load all meals for the chosen category.

21
00:01:27,510 --> 00:01:33,660
So we go to category meals here and if we add this and we save this, we see now our styling is a bit

22
00:01:33,660 --> 00:01:37,560
broken, I'll fix this in a second but the navigation works,

23
00:01:37,560 --> 00:01:44,520
we also have this opacity effect, so that's working. Now fixing the styling is easy, we just lost it because

24
00:01:44,520 --> 00:01:47,080
I wrapped touchable opacity around my view,

25
00:01:47,220 --> 00:01:53,760
we just need to add this style here which adds the margin around our item and so on to touchable opacity

26
00:01:53,760 --> 00:02:00,230
instead of that view here and with that, we got that style back and this is now working as it should.

27
00:02:00,270 --> 00:02:06,630
The more interesting question is, how we can actually set our header title? Now for that, we get a couple

28
00:02:06,630 --> 00:02:07,720
of options,

29
00:02:07,800 --> 00:02:13,740
let's have a look at option number one. On every React component which you'll load as a screen,

30
00:02:13,740 --> 00:02:22,420
Which means what you map to such a screen name in for example the stack navigator, you can add a property.

31
00:02:22,410 --> 00:02:28,590
Now keep in mind that categories screen is of course a React component but technically, it's a Javascript

32
00:02:28,590 --> 00:02:29,370
function, right?

33
00:02:29,370 --> 00:02:34,290
It's a function that receives the props argument and then runs this body which returns some jsx

34
00:02:34,290 --> 00:02:37,390
and therefore React is able to use this as a component

35
00:02:37,530 --> 00:02:39,840
but technically, it's a Javascript function.

36
00:02:39,840 --> 00:02:43,490
Now Javascript functions are just objects,

37
00:02:43,500 --> 00:02:44,720
that's Javascript,

38
00:02:44,790 --> 00:02:52,800
functions are objects and on objects, we can add properties. So categories screen is just a Javascript

39
00:02:52,890 --> 00:02:53,630
object,

40
00:02:53,730 --> 00:02:57,150
hence we can add a property after creating it.

41
00:02:57,150 --> 00:03:07,040
So here, after defining our categories screen function and therefore this object, we can access it and

42
00:03:07,040 --> 00:03:13,250
we can add a property with the dot notation, that's how Javascript works, you can simply add such a

43
00:03:13,250 --> 00:03:14,250
property.

44
00:03:14,260 --> 00:03:20,870
Now you can add a special property here for which React navigation will look and that's the navigation

45
00:03:21,350 --> 00:03:22,970
options property.

46
00:03:22,970 --> 00:03:26,270
You don't have to add it and that won't be a problem if you don't do it,

47
00:03:26,270 --> 00:03:32,000
we haven't done it thus far but you can add it, if you do add it, it will be respected by React navigation.

48
00:03:33,210 --> 00:03:38,480
Now there are a bunch of options you can set up there and a full list can of course be found in the

49
00:03:38,480 --> 00:03:40,120
official docs.

50
00:03:40,270 --> 00:03:45,100
In the simplest form, you simply assign a Javascript object here with that bunch of options you

51
00:03:45,100 --> 00:03:51,880
can now set up in this object and the option I'm interested in here is the header title,

52
00:03:52,030 --> 00:04:00,440
that can simply be set to a text, for example meal categories because we're on the categories screen so

53
00:04:00,430 --> 00:04:03,970
that would be a fitting title. If we save this,

54
00:04:03,970 --> 00:04:09,090
you now see meal categories as a title here in the header.

55
00:04:09,120 --> 00:04:14,970
Now you also can style the header here with the help of the header style property,

56
00:04:14,970 --> 00:04:21,200
this takes a style object where you can generally set up what you can set up as styles on views as well

57
00:04:21,310 --> 00:04:27,090
and there, you could add a background color which is the most common style you typically apply.

58
00:04:27,210 --> 00:04:32,610
Now I want to set up a color here and I'll use an approach I used earlier in the course already,

59
00:04:32,670 --> 00:04:43,350
I'll add a constants folder and in there, I'll add colors.js file in which I'll then export a Javascript

60
00:04:43,440 --> 00:04:48,470
object where all the colors I want to use over and over again in the app are set up.

61
00:04:48,600 --> 00:04:56,790
There, I'll set up a primary color for which I preselected a hex code of #4a148C but of course you

62
00:04:56,790 --> 00:05:03,060
can experiment with different colors if you want to and I'll set up an accent color or a secondary color

63
00:05:03,270 --> 00:05:07,920
which hex code is #ff6f00 and

64
00:05:07,920 --> 00:05:13,470
these are just the colors I picked, as I mentioned, you can use different ones of course. Back in the categories

65
00:05:13,470 --> 00:05:13,850
screen,

66
00:05:13,860 --> 00:05:21,030
I now want to use colors and for this, you need to import it, import colors with a capital C, which is

67
00:05:21,030 --> 00:05:29,730
just a convention I'm using to indicate that this is a constant, from constants/Colors, also named with

68
00:05:29,730 --> 00:05:38,420
a capital C and then here we use Colors.primaryColor for example. If you do this, you will see

69
00:05:38,420 --> 00:05:43,730
that your header now has this dark purple color which I picked. That makes the title a bit hard to read

70
00:05:44,030 --> 00:05:48,670
but thankfully, you can style this as well, not with the header style because that's just the

71
00:05:48,720 --> 00:05:56,300
box for the header so to say, not its content but the title can be styled with the header tint color

72
00:05:56,450 --> 00:06:01,090
and again, the official docs is the place where you can learn all about these available options,

73
00:06:01,100 --> 00:06:02,380
that's how I know about them,

74
00:06:02,390 --> 00:06:04,470
that's where you would read about them.

75
00:06:04,550 --> 00:06:10,820
Now header tint color can always be a color, for example white here simply which fits my default color

76
00:06:10,820 --> 00:06:19,120
and now you see this is white. You of course might also want a different look for Android and iOS,

77
00:06:19,120 --> 00:06:23,690
you might want to look where this looks more iOS-ish

78
00:06:23,740 --> 00:06:29,560
which means you don't have a colored background but just a text is colored and you can achieve

79
00:06:29,560 --> 00:06:35,980
this with the good old platform API which you learned about earlier in the course. We can use the platform

80
00:06:35,980 --> 00:06:42,490
API to dynamically switch which colors we use here based on the platform our app is running on.

81
00:06:42,490 --> 00:06:47,630
So here for the background color, we can use platform.os and see whether that's Android,

82
00:06:47,640 --> 00:06:53,850
in which case I want to use the primary color, else in this ternary expression, I'll use no color,

83
00:06:53,920 --> 00:07:00,940
so we can use white here for example, a normal white background or simply set up no color at all like this and

84
00:07:00,940 --> 00:07:07,150
you will then get the default background color. And for the tint color, it's the same, I check if the operating

85
00:07:07,150 --> 00:07:10,810
system is Android in which the text color should be white,

86
00:07:10,810 --> 00:07:20,360
otherwise I will set this to Colors.primaryColour and with that, you now have this more iOS, that more

87
00:07:20,360 --> 00:07:27,530
iOS typical look here on iOS and you have the default Android look which is more colorful on Android.

88
00:07:27,530 --> 00:07:31,100
So that's how you can set up navigation options here,

89
00:07:31,130 --> 00:07:39,170
now what about this screen however, where we go to our details here, to the Italian meals or to the quick

90
00:07:39,170 --> 00:07:45,500
and easy meals? It would be nice if we could see quick and easy here or Italian here in the header in that

91
00:07:45,500 --> 00:07:46,400
case.

92
00:07:46,400 --> 00:07:51,230
So that's the next thing we should take care of and for this, we need to pass some information from this

93
00:07:51,230 --> 00:07:55,940
screen to this screen. So we'll have a look at how that works in the next video.