1
00:00:02,230 --> 00:00:12,550
So I want to have a save button in my header and for that of course, we need to add map screen navigation

2
00:00:12,550 --> 00:00:19,620
options and use the function form there, so that we have access to this nav, that object with the navigation

3
00:00:20,070 --> 00:00:25,500
object and in there, I want to return my configuration object.

4
00:00:25,500 --> 00:00:28,070
You could add a header title but I'm actually happy without one

5
00:00:28,200 --> 00:00:32,040
but I want to set header right here and now important, here

6
00:00:32,190 --> 00:00:39,960
you can use header buttons of course and render a nice icon but actually, I'll render some text here. So

7
00:00:40,350 --> 00:00:46,080
I'll import the text component or make sure that you do have it imported. I'll render some text here

8
00:00:46,330 --> 00:00:51,720
where I'll just say save and you could of course also add a platform check to make this uppercase

9
00:00:51,720 --> 00:00:53,050
on Android if you wanted to,

10
00:00:53,130 --> 00:01:02,510
I'll just say save like this and then add a style here where I add my header button text style and around

11
00:01:02,510 --> 00:01:09,050
that, I want to have a touchable view, so I'll use touchable opacity here which you therefore also need

12
00:01:09,050 --> 00:01:15,770
to import, not from there but actually from React Native, so touchable opacity should be imported from

13
00:01:15,770 --> 00:01:24,050
React Native and with that imported, we can wrap this around this text to make our own buttons so to

14
00:01:24,050 --> 00:01:31,770
say and there, I also want to add a style and that style will be having an identifier of header button

15
00:01:31,770 --> 00:01:40,270
let's say. Now up on pressing this, I want to save what we added or save our location we chose but that's

16
00:01:40,270 --> 00:01:46,780
something I'll do in a second, for now let's style this. So down there in the stylesheet, for the header button

17
00:01:46,780 --> 00:01:53,440
which is that touchable opacity, I'll add a margin horizontal of 20 to have some spacing around the button

18
00:01:53,440 --> 00:01:58,060
to the left and right and on the header button text here, it's of course up to you what you want to add

19
00:01:58,060 --> 00:02:05,920
there but I'll add a font size of 16 let's say and important, the color. For that, I need the platform

20
00:02:05,920 --> 00:02:11,440
API because the color needs to differ, since this is on the header which is having a solid background

21
00:02:11,500 --> 00:02:19,960
on Android but not on iOS, I can set my color here, my text color to Platform.OS equals Android, so

22
00:02:19,960 --> 00:02:26,550
to check this and on Android I'll set it to white and otherwise, I'll set it to Colors.primary and

23
00:02:26,620 --> 00:02:32,610
for that as always, make sure you're importing your colors constant from up there.

24
00:02:32,690 --> 00:02:38,180
So now we have the save button, when we press the save button, I want to trigger a function that should

25
00:02:38,180 --> 00:02:43,370
be defined in the component and that's also something we did multiple times in the course, I showed

26
00:02:43,370 --> 00:02:50,360
you how you can communicate between your component and also your navigation options here. So we can essentially

27
00:02:50,390 --> 00:03:00,090
add a new function here, save picked location handler, whatever you want to name it and this function or

28
00:03:00,110 --> 00:03:05,100
a reference to this function should be passed to the navigation options and for that, we can use the good

29
00:03:05,100 --> 00:03:12,150
old use effect hook and use callback to avoid this infinite loop if you remember and we can therefore

30
00:03:12,150 --> 00:03:21,520
then wrap this with use callback and then use effect here to tell our navigation options about

31
00:03:21,520 --> 00:03:32,600
this by using props navigation set params and then I want to set my save location param here to the

32
00:03:32,610 --> 00:03:39,390
save picked location handler, so pass a reference to this function, to this param or with this param to

33
00:03:39,390 --> 00:03:46,590
my headers and use effect of course depends on the save pick location handler function, so I'll add it as

34
00:03:46,590 --> 00:03:55,040
a dependency here and important now, use callback here also has an array of dependencies because in here,

35
00:03:55,160 --> 00:04:00,130
I want to basically leave this page and go back,

36
00:04:00,230 --> 00:04:05,630
so here I can use props navigation go back and we'll tweak this in a second but for now, we can do this.

37
00:04:06,940 --> 00:04:13,420
And therefore, normally of course, this go back function would be my dependency but to avoid an infinite loop,

38
00:04:13,450 --> 00:04:18,180
with this approach we have to use by using params to update the component we already are on,

39
00:04:18,370 --> 00:04:24,280
I'll actually add an empty array here as a dependency, so that this function effectively isn't rebuilt

40
00:04:24,310 --> 00:04:25,420
right now.

41
00:04:25,480 --> 00:04:30,790
So with that, we can extract this save location param in our header.

42
00:04:30,790 --> 00:04:41,190
So here, I want to point at my save function which I get with navData. navigation.getParam pointing

43
00:04:41,190 --> 00:04:48,480
at the save location identifier and then save function is the function I hook up to the onPress handler

44
00:04:48,480 --> 00:04:50,050
on the touchable opacity.

45
00:04:50,070 --> 00:04:59,030
So this should trigger this save function, this save picked location handler function here. With that saved

46
00:04:59,060 --> 00:05:00,710
if we go back, let's give it a try,

47
00:05:00,740 --> 00:05:08,210
let's go to pick on map and if I now click save, it should simply go back and it does.

48
00:05:08,240 --> 00:05:13,280
So that works but of course right now, I'm not saving any location, I'm not using any location, that's

49
00:05:13,280 --> 00:05:15,080
the next step

50
00:05:15,080 --> 00:05:21,110
and for that we need to pass the location user picked back to the previous screen. With go back,

51
00:05:21,110 --> 00:05:25,970
that's relatively hard but instead we can use a pattern which I hadn't really used before in this course,

52
00:05:26,540 --> 00:05:34,010
I can use navigate here as well to then go back. I can navigate to my new place screen with the new place

53
00:05:34,070 --> 00:05:41,810
identifier as set up here in my places navigator and since I'm already on a screen ahead of that new

54
00:05:41,810 --> 00:05:42,990
place screen,

55
00:05:43,070 --> 00:05:48,260
don't forget that this is a stack of screens and I'm on a screen on top of the new place screen,

56
00:05:48,290 --> 00:05:53,040
this will actually not push this new place screen on top of the existing screen,

57
00:05:53,270 --> 00:05:56,020
we could force this with push but I don't want to,

58
00:05:56,030 --> 00:06:03,890
instead it will go back but now by using navigate, I can append some params here. I can add my picked

59
00:06:04,040 --> 00:06:12,980
location and there, point at my selected location prop which hopefully holds my picked location. Now since

60
00:06:12,980 --> 00:06:18,320
I use selected location in here and since this changes, I'll add this as a dependency to use callback

61
00:06:18,650 --> 00:06:23,900
so that this function is recreated when we have a new location picked and I want to make sure that we

62
00:06:23,900 --> 00:06:30,800
do have a location here, so I will check if selected location or to be precise,

63
00:06:30,830 --> 00:06:32,300
if we don't have one,

64
00:06:32,330 --> 00:06:37,580
so if this is undefined which means the user hasn't picked one yet, then I'll return and not continue

65
00:06:37,820 --> 00:06:44,750
and we can also show an alert here if we want to. Now I'll not do that here but you could show an alert

66
00:06:44,780 --> 00:06:46,780
if you wanted to.

67
00:06:46,950 --> 00:06:52,110
So now we'll only be able to click save if we do have a location picked but if we do so, we'll actually

68
00:06:52,110 --> 00:06:54,740
set it on the params of our go back

69
00:06:54,750 --> 00:06:57,250
action. Let's give it a try,

70
00:06:57,250 --> 00:07:03,250
let's go there, click picK on map and now please note I haven't picked any location yet, I haven't clicked

71
00:07:03,280 --> 00:07:04,630
anywhere yet so if I click save,

72
00:07:04,630 --> 00:07:09,160
nothing happens. If I do pick a location and click save, I do go back though.

73
00:07:09,970 --> 00:07:17,560
So now we can use the data we're passing back from map screen in our location picker ultimately to update

74
00:07:17,590 --> 00:07:18,890
the map preview there,

75
00:07:18,910 --> 00:07:20,290
so that's next thing I'll do.