1 00:00:02,250 --> 00:00:07,650 We're extracting our category here in our component because we're getting our parameter there with the 2 00:00:07,650 --> 00:00:09,130 help of navigation props. 3 00:00:09,150 --> 00:00:12,980 Now actually, I want to output the title in my header though. 4 00:00:13,050 --> 00:00:18,520 Now you learned how you can configure that header with the help of the navigation options, 5 00:00:18,630 --> 00:00:25,170 so on the category meal screen component and therefore, this is a function therefore, this is an object, 6 00:00:25,530 --> 00:00:30,300 we can add navigation options and you learned that this is a Javascript object where you can set 7 00:00:30,300 --> 00:00:35,670 up a header title and header title now should be my category name. 8 00:00:35,700 --> 00:00:43,910 The problem here is that here, selected category is available but that's inside of the component function. 9 00:00:43,910 --> 00:00:49,670 That of course on the other hand is not something we can access here because this happens after the 10 00:00:49,670 --> 00:00:50,990 function definition. 11 00:00:51,350 --> 00:00:55,150 So we don't have access to the category we identified there, 12 00:00:55,220 --> 00:00:56,920 that's a problem. 13 00:00:56,930 --> 00:01:04,390 The good thing is, navigation options can be an object if you have static hardcoded configuration values 14 00:01:05,000 --> 00:01:11,990 but it also can be a function if you need a dynamic configuration that depends on changing data 15 00:01:12,020 --> 00:01:17,300 and of course the data we depend on here is changing because we're using one and the same screen for 16 00:01:17,300 --> 00:01:22,820 different categories and therefore, the ID and the title of the category changes every time we use 17 00:01:22,820 --> 00:01:26,140 that screen. One time we're using it for the Italian category, 18 00:01:26,140 --> 00:01:32,360 the next time we're using it for the exotic category. This function which you can also use, this is of 19 00:01:32,360 --> 00:01:34,700 course supported by React navigation 20 00:01:34,700 --> 00:01:40,220 and if this is a function, what you're passing to navigation options, React navigation will call 21 00:01:40,220 --> 00:01:48,740 it for you and will pass in some navigation data, so it will pass an object with some data that should 22 00:01:48,740 --> 00:01:54,800 help you, we'll have a look at what's in there in a second because we can simply log this navigation 23 00:01:54,800 --> 00:01:55,850 data here. 24 00:01:55,970 --> 00:01:57,610 Let's start with that, 25 00:01:57,710 --> 00:02:01,210 let's now go to this page and let's see what's in there. 26 00:02:01,310 --> 00:02:05,850 If I expand this here, this is the log I got 27 00:02:05,850 --> 00:02:14,570 and you see we got another navigation prop in the navigation data. There we have actions, we have navigate 28 00:02:14,580 --> 00:02:15,390 pop, push, 29 00:02:15,390 --> 00:02:20,010 so basically what we knew. We also have getParam there and that should be useful 30 00:02:20,010 --> 00:02:28,050 because this will allow us to extract data here inside of our navigation options in the end which 31 00:02:28,110 --> 00:02:36,880 should be super helpful. So in the end, we get the same navigation prop we also get on our component props. 32 00:02:37,040 --> 00:02:48,110 So here, we can now use navigationData.navigation.getParam to get my category ID, exactly 33 00:02:48,110 --> 00:02:54,660 what we did in the component. So we can repeat the code we had in a component and get the selected category, 34 00:02:54,660 --> 00:03:02,020 not just in the component but now also in this function which we use to setup our navigation options. 35 00:03:02,040 --> 00:03:08,130 So now here, we also get access to the selected category and now, navigation options, this function, 36 00:03:08,220 --> 00:03:13,460 if it is a function, should of course return an object with your navigation options. 37 00:03:13,470 --> 00:03:19,860 So what we previously directly set as navigation options when we only had hardcoded values now has to 38 00:03:19,860 --> 00:03:20,550 be returned 39 00:03:20,610 --> 00:03:26,950 but now can use these dynamically derived data or the dynamically derived information here. 40 00:03:26,970 --> 00:03:33,600 So now we can still set up a header title here and the header title now can be 41 00:03:33,720 --> 00:03:35,450 selectedCategory.title. 42 00:03:35,510 --> 00:03:41,300 This is how we can dynamically derive this and therefore now if you go back, you see Italian here, you 43 00:03:41,300 --> 00:03:47,420 see quick and easy here, you see German here and that just works. 44 00:03:47,420 --> 00:03:55,280 Please note that you also by default get a back button text which is the previous screens title, that's 45 00:03:55,280 --> 00:04:01,130 another default feature React navigation gives you. We see back to meal categories here because we're coming 46 00:04:01,130 --> 00:04:05,720 from meal categories. Only on quick and easy where this would be too long 47 00:04:05,720 --> 00:04:13,010 next to this a bit longer title, it reverts and defaults to back, which is a good default behavior which 48 00:04:13,010 --> 00:04:19,400 you could override but which I'm happy with here. On Android, we don't have a back text but of course 49 00:04:19,400 --> 00:04:25,340 we have a back button and there, the header also is populated correctly for the screens which is loaded. 50 00:04:26,240 --> 00:04:32,030 So that is how we can also get our data dynamically here in the navigation options. One issue you might 51 00:04:32,030 --> 00:04:37,430 notice though which is most visible here on Android is that the header on the new screen we're loading 52 00:04:37,700 --> 00:04:44,450 doesn't have the same styling as our header here, it doesn't have the background color namely. Now of course, 53 00:04:44,480 --> 00:04:51,620 that's easily fixed because on navigation options of the category meals, we can simply bring in the 54 00:04:51,620 --> 00:04:58,250 header style and header tint color we set up here on the other screen as well. So we can copy that 55 00:04:58,250 --> 00:05:06,200 over here and that just means we have to import the platform API and of course, our constant color, 56 00:05:06,550 --> 00:05:18,730 so import colors from constants/Colors like this and when we do that, we'll see that if we go there, we 57 00:05:18,730 --> 00:05:25,570 now have the same header style for this new page which is of course what you typically want. What you don't 58 00:05:25,600 --> 00:05:31,300 typically want however is that you have to copy the same configuration to every screen because in this 59 00:05:31,300 --> 00:05:36,070 app, we don't have that many screens, we can certainly do that but in bigger apps where you have more 60 00:05:36,070 --> 00:05:42,520 screens, that would be super annoying and super cumbersome, so it's definitely not the way to go there. 61 00:05:42,520 --> 00:05:44,740 So let's have a look at an alternative in the next lecture.