We're extracting our category here in our component because we're getting our parameter there with the
help of navigation props.
Now actually, I want to output the title in my header though.
Now you learned how you can configure that header with the help of the navigation options,
so on the category meal screen component and therefore, this is a function therefore, this is an object,
we can add navigation options and you learned that this is a Javascript object where you can set
up a header title and header title now should be my category name.
The problem here is that here, selected category is available but that's inside of the component function.
That of course on the other hand is not something we can access here because this happens after the
function definition.
So we don't have access to the category we identified there,
that's a problem.
The good thing is, navigation options can be an object if you have static hardcoded configuration values
but it also can be a function if you need a dynamic configuration that depends on changing data
and of course the data we depend on here is changing because we're using one and the same screen for
different categories and therefore, the ID and the title of the category changes every time we use
that screen. One time we're using it for the Italian category,
the next time we're using it for the exotic category. This function which you can also use, this is of
course supported by React navigation
and if this is a function, what you're passing to navigation options, React navigation will call
it for you and will pass in some navigation data, so it will pass an object with some data that should
help you, we'll have a look at what's in there in a second because we can simply log this navigation
data here.
Let's start with that,
let's now go to this page and let's see what's in there.
If I expand this here, this is the log I got
and you see we got another navigation prop in the navigation data. There we have actions, we have navigate
pop, push,
so basically what we knew. We also have getParam there and that should be useful
because this will allow us to extract data here inside of our navigation options in the end which
should be super helpful. So in the end, we get the same navigation prop we also get on our component props.
So here, we can now use navigationData.navigation.getParam to get my category ID, exactly
what we did in the component. So we can repeat the code we had in a component and get the selected category,
not just in the component but now also in this function which we use to setup our navigation options.
So now here, we also get access to the selected category and now, navigation options, this function,
if it is a function, should of course return an object with your navigation options.
So what we previously directly set as navigation options when we only had hardcoded values now has to
be returned
but now can use these dynamically derived data or the dynamically derived information here.
So now we can still set up a header title here and the header title now can be
selectedCategory.title.
This is how we can dynamically derive this and therefore now if you go back, you see Italian here, you
see quick and easy here, you see German here and that just works.
Please note that you also by default get a back button text which is the previous screens title, that's
another default feature React navigation gives you. We see back to meal categories here because we're coming
from meal categories. Only on quick and easy where this would be too long
next to this a bit longer title, it reverts and defaults to back, which is a good default behavior which
you could override but which I'm happy with here. On Android, we don't have a back text but of course
we have a back button and there, the header also is populated correctly for the screens which is loaded.
So that is how we can also get our data dynamically here in the navigation options. One issue you might
notice though which is most visible here on Android is that the header on the new screen we're loading
doesn't have the same styling as our header here, it doesn't have the background color namely. Now of course,
that's easily fixed because on navigation options of the category meals, we can simply bring in the
header style and header tint color we set up here on the other screen as well. So we can copy that
over here and that just means we have to import the platform API and of course, our constant color,
so import colors from constants/Colors like this and when we do that, we'll see that if we go there, we
now have the same header style for this new page which is of course what you typically want. What you don't
typically want however is that you have to copy the same configuration to every screen because in this
app, we don't have that many screens, we can certainly do that but in bigger apps where you have more
screens, that would be super annoying and super cumbersome, so it's definitely not the way to go there.
So let's have a look at an alternative in the next lecture.