So I want to go to the map screen and I actually want to add a marker there right from the start which
is also something it doesn't support right now
and I want to make sure that I can't pick a new location there,
so a couple of restrictions.
So when we click the map preview, onPress, I want to navigate to the different screen right.
So I'll add a new constant here to hold a function which I'll name show map handler,
of course you could have also used an inline function and I'll connect the show map handler to my on
press prop here on map preview.
This will be triggered when we click the preview, when we tap it
and here of course I want to navigate. Of course that can be done with props.navigation.navigate and then
go to the map screen.
The problem just is if we do it like this,
unsurprisingly if we have a look at this on Android once this reloaded, if I click on this, I load the
map screen but I don't have the place I selected preselected and I can also click here and save and
go back to my add place screen and that's definitely not how this should work,
so that's wrong.
Instead I want to pass some data to the map screen where I can for one set this to read only let's say,
so I'll pass a read only prop and set this to true
and I also want to set an initial location and set this to an object for example, where I basically pass
in this location I also show on the preview.
So this here, I can cut it from there and create a new helper constant here, selected location is now
just this here and I pass this as an initial location here, the selected location and I pass it to my map
preview on the location prop
and with that, we're passing the data to the map screen,
we now need to use it there.
So we need to use the read only prop or param to make sure we can't select a new place, an initial location
to still have a marker in there right from the start.
So now to use all that information here in the map screen, I can get my data from the params I receive,
so I get my initial location by accessing props.navigation.getParam initial location which might be
set, of course this also might be undefined but it also might be set and I get the read only with props
navigation get param read only which also might be undefined.
Now the initial location can be used to initialize the state
now. Now this will not reinitialize this whenever this re-renders but instead React manages this such that
this sets the initial state and for subsequent re-render cycles, this is simply ignored you could say.
So now when we have an initial location, our state will be initialized to that location which is great.
Now keep in mind that what I passed to initial location is of type object with lat and lng
and that of course should match what we manage with our state in here and that is the case because there
I also set my state to an object with lat and lng, if that would be different, you would need some logic
for normalizing this. Now read only is the other thing I'm extracting and I can use this in a select location
handler which is the function that triggers whenever we press the map and there, we can check if read
only is true and if it's undefined, it will be false but if it's true, I just return here which means
I don't continue, I don't pick a new location. With that, picking a location should be disabled.
Now I also want to get rid of the save button if we have nothing to save,
so if we're in read only mode, then we can't save anything. So headerRight should only be set
if we're not in read only mode, so here I'll also extract read only mode with the help of navigation
get param read only which I can do here as well of course
and therefore now here, if we're in read only mode, if that is true, then the configuration I return is
an empty object,
so without any button. Let's give this a try.
Let's save it and go back and if I now click on this item here and I click on the map, it opens but I
got no save button and also no marker so that doesn't work but at least I can't select a new one, that's
good but the marker is also not working. Now before we fix this,
let's go to the new place screen and see if we there can still set a marker and that is the case,
we can pick a place there, so that works.
So the only thing that doesn't really work is loading this map with a marker chosen and actually, that's
not correct,
we do have a marker, it's just not here on the screen we preselected in San Francisco. If we go to the Google
plex
down there,
here is the marker. So it did save this,
it just didn't focus on that when we loaded it,
so that's a little tweak we should also add on the map screen. There,
we should make sure that this map region we set here also takes the initial location into account
if we have one. So here the latitude we set initially,
well if we do have an initial location, then I want to use initial location.lat instead of the default,
only use the default otherwise, same of course for the longitude.
If we have an initial location, I want to use the longitude of that initially instead of the default.
Now with that if we save this, we should be able to have a map which is automatically centered on our marker
if we open it in the read only mode, so here,
indeed that works
and if I of course add a new place, that also still works. There we open it on the default place,
so somewhere here in San Francisco. This therefore all works
and now I just want to test it on some real devices before I wrap up this module
and we're done with adding native device features to our React Native app.