On the categories screen, we want to make sure that our item can be touched there,
so I will import touchable and I will import touchable opacity here to have a slight opacity effect
but of course it's up to you
which pattern or which component you use
there, should be a touchable component though which you wrap around your item here and now on touchable
opacity,
I'll add onPress so that we can do something when this is pressed.
What do we want to do?
We want to go to the category meals screen which is kind of the detail page for a chosen category to
show all recipes for that category,
we have no recipes yet but I still want to go to the page already.
So therefore here, we need to trigger a navigation action and previously we did this with props navigation
navigate, right?
The problem is, we don't have props available here because we're inside of the render grid item function
which is outside of our component.
Now we can simply move this inside of our component to fix this problem.
If we create that function in there, then we do have access to props because we're now inside of our
component function and now we'll be able to call navigate here. We can call navigate and I want to go
to a route name and of course the route name I want to go to can be found in our navigator is category
meals right, because we want to load all meals for the chosen category.
So we go to category meals here and if we add this and we save this, we see now our styling is a bit
broken, I'll fix this in a second but the navigation works,
we also have this opacity effect, so that's working. Now fixing the styling is easy, we just lost it because
I wrapped touchable opacity around my view,
we just need to add this style here which adds the margin around our item and so on to touchable opacity
instead of that view here and with that, we got that style back and this is now working as it should.
The more interesting question is, how we can actually set our header title? Now for that, we get a couple
of options,
let's have a look at option number one. On every React component which you'll load as a screen,
Which means what you map to such a screen name in for example the stack navigator, you can add a property.
Now keep in mind that categories screen is of course a React component but technically, it's a Javascript
function, right?
It's a function that receives the props argument and then runs this body which returns some jsx
and therefore React is able to use this as a component
but technically, it's a Javascript function.
Now Javascript functions are just objects,
that's Javascript,
functions are objects and on objects, we can add properties. So categories screen is just a Javascript
object,
hence we can add a property after creating it.
So here, after defining our categories screen function and therefore this object, we can access it and
we can add a property with the dot notation, that's how Javascript works, you can simply add such a
property.
Now you can add a special property here for which React navigation will look and that's the navigation
options property.
You don't have to add it and that won't be a problem if you don't do it,
we haven't done it thus far but you can add it, if you do add it, it will be respected by React navigation.
Now there are a bunch of options you can set up there and a full list can of course be found in the
official docs.
In the simplest form, you simply assign a Javascript object here with that bunch of options you
can now set up in this object and the option I'm interested in here is the header title,
that can simply be set to a text, for example meal categories because we're on the categories screen so
that would be a fitting title. If we save this,
you now see meal categories as a title here in the header.
Now you also can style the header here with the help of the header style property,
this takes a style object where you can generally set up what you can set up as styles on views as well
and there, you could add a background color which is the most common style you typically apply.
Now I want to set up a color here and I'll use an approach I used earlier in the course already,
I'll add a constants folder and in there, I'll add colors.js file in which I'll then export a Javascript
object where all the colors I want to use over and over again in the app are set up.
There, I'll set up a primary color for which I preselected a hex code of #4a148C but of course you
can experiment with different colors if you want to and I'll set up an accent color or a secondary color
which hex code is #ff6f00 and
these are just the colors I picked, as I mentioned, you can use different ones of course. Back in the categories
screen,
I now want to use colors and for this, you need to import it, import colors with a capital C, which is
just a convention I'm using to indicate that this is a constant, from constants/Colors, also named with
a capital C and then here we use Colors.primaryColor for example. If you do this, you will see
that your header now has this dark purple color which I picked. That makes the title a bit hard to read
but thankfully, you can style this as well, not with the header style because that's just the
box for the header so to say, not its content but the title can be styled with the header tint color
and again, the official docs is the place where you can learn all about these available options,
that's how I know about them,
that's where you would read about them.
Now header tint color can always be a color, for example white here simply which fits my default color
and now you see this is white. You of course might also want a different look for Android and iOS,
you might want to look where this looks more iOS-ish
which means you don't have a colored background but just a text is colored and you can achieve
this with the good old platform API which you learned about earlier in the course. We can use the platform
API to dynamically switch which colors we use here based on the platform our app is running on.
So here for the background color, we can use platform.os and see whether that's Android,
in which case I want to use the primary color, else in this ternary expression, I'll use no color,
so we can use white here for example, a normal white background or simply set up no color at all like this and
you will then get the default background color. And for the tint color, it's the same, I check if the operating
system is Android in which the text color should be white,
otherwise I will set this to Colors.primaryColour and with that, you now have this more iOS, that more
iOS typical look here on iOS and you have the default Android look which is more colorful on Android.
So that's how you can set up navigation options here,
now what about this screen however, where we go to our details here, to the Italian meals or to the quick
and easy meals? It would be nice if we could see quick and easy here or Italian here in the header in that
case.
So that's the next thing we should take care of and for this, we need to pass some information from this
screen to this screen. So we'll have a look at how that works in the next video.