So I want to have a save button in my header and for that of course, we need to add map screen navigation
options and use the function form there, so that we have access to this nav, that object with the navigation
object and in there, I want to return my configuration object.
You could add a header title but I'm actually happy without one
but I want to set header right here and now important, here
you can use header buttons of course and render a nice icon but actually, I'll render some text here. So
I'll import the text component or make sure that you do have it imported. I'll render some text here
where I'll just say save and you could of course also add a platform check to make this uppercase
on Android if you wanted to,
I'll just say save like this and then add a style here where I add my header button text style and around
that, I want to have a touchable view, so I'll use touchable opacity here which you therefore also need
to import, not from there but actually from React Native, so touchable opacity should be imported from
React Native and with that imported, we can wrap this around this text to make our own buttons so to
say and there, I also want to add a style and that style will be having an identifier of header button
let's say. Now up on pressing this, I want to save what we added or save our location we chose but that's
something I'll do in a second, for now let's style this. So down there in the stylesheet, for the header button
which is that touchable opacity, I'll add a margin horizontal of 20 to have some spacing around the button
to the left and right and on the header button text here, it's of course up to you what you want to add
there but I'll add a font size of 16 let's say and important, the color. For that, I need the platform
API because the color needs to differ, since this is on the header which is having a solid background
on Android but not on iOS, I can set my color here, my text color to Platform.OS equals Android, so
to check this and on Android I'll set it to white and otherwise, I'll set it to Colors.primary and
for that as always, make sure you're importing your colors constant from up there.
So now we have the save button, when we press the save button, I want to trigger a function that should
be defined in the component and that's also something we did multiple times in the course, I showed
you how you can communicate between your component and also your navigation options here. So we can essentially
add a new function here, save picked location handler, whatever you want to name it and this function or
a reference to this function should be passed to the navigation options and for that, we can use the good
old use effect hook and use callback to avoid this infinite loop if you remember and we can therefore
then wrap this with use callback and then use effect here to tell our navigation options about
this by using props navigation set params and then I want to set my save location param here to the
save picked location handler, so pass a reference to this function, to this param or with this param to
my headers and use effect of course depends on the save pick location handler function, so I'll add it as
a dependency here and important now, use callback here also has an array of dependencies because in here,
I want to basically leave this page and go back,
so here I can use props navigation go back and we'll tweak this in a second but for now, we can do this.
And therefore, normally of course, this go back function would be my dependency but to avoid an infinite loop,
with this approach we have to use by using params to update the component we already are on,
I'll actually add an empty array here as a dependency, so that this function effectively isn't rebuilt
right now.
So with that, we can extract this save location param in our header.
So here, I want to point at my save function which I get with navData. navigation.getParam pointing
at the save location identifier and then save function is the function I hook up to the onPress handler
on the touchable opacity.
So this should trigger this save function, this save picked location handler function here. With that saved
if we go back, let's give it a try,
let's go to pick on map and if I now click save, it should simply go back and it does.
So that works but of course right now, I'm not saving any location, I'm not using any location, that's
the next step
and for that we need to pass the location user picked back to the previous screen. With go back,
that's relatively hard but instead we can use a pattern which I hadn't really used before in this course,
I can use navigate here as well to then go back. I can navigate to my new place screen with the new place
identifier as set up here in my places navigator and since I'm already on a screen ahead of that new
place screen,
don't forget that this is a stack of screens and I'm on a screen on top of the new place screen,
this will actually not push this new place screen on top of the existing screen,
we could force this with push but I don't want to,
instead it will go back but now by using navigate, I can append some params here. I can add my picked
location and there, point at my selected location prop which hopefully holds my picked location. Now since
I use selected location in here and since this changes, I'll add this as a dependency to use callback
so that this function is recreated when we have a new location picked and I want to make sure that we
do have a location here, so I will check if selected location or to be precise,
if we don't have one,
so if this is undefined which means the user hasn't picked one yet, then I'll return and not continue
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
if you wanted to.
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
set it on the params of our go back
action. Let's give it a try,
let's go there, click picK on map and now please note I haven't picked any location yet, I haven't clicked
anywhere yet so if I click save,
nothing happens. If I do pick a location and click save, I do go back though.
So now we can use the data we're passing back from map screen in our location picker ultimately to update
the map preview there,
so that's next thing I'll do.