1
00:00:02,160 --> 00:00:09,210
So I want to go to the map screen and I actually want to add a marker there right from the start which

2
00:00:09,210 --> 00:00:11,050
is also something it doesn't support right now

3
00:00:11,100 --> 00:00:13,910
and I want to make sure that I can't pick a new location there,

4
00:00:13,990 --> 00:00:15,990
so a couple of restrictions.

5
00:00:15,990 --> 00:00:21,960
So when we click the map preview, onPress, I want to navigate to the different screen right.

6
00:00:22,020 --> 00:00:28,330
So I'll add a new constant here to hold a function which I'll name show map handler,

7
00:00:28,590 --> 00:00:33,300
of course you could have also used an inline function and I'll connect the show map handler to my on

8
00:00:33,300 --> 00:00:35,340
press prop here on map preview.

9
00:00:35,370 --> 00:00:38,970
This will be triggered when we click the preview, when we tap it

10
00:00:39,130 --> 00:00:47,430
and here of course I want to navigate. Of course that can be done with props.navigation.navigate and then

11
00:00:47,430 --> 00:00:49,200
go to the map screen.

12
00:00:49,200 --> 00:00:51,520
The problem just is if we do it like this,

13
00:00:51,520 --> 00:00:58,830
unsurprisingly if we have a look at this on Android once this reloaded, if I click on this, I load the

14
00:00:58,830 --> 00:01:05,790
map screen but I don't have the place I selected preselected and I can also click here and save and

15
00:01:05,790 --> 00:01:10,120
go back to my add place screen and that's definitely not how this should work,

16
00:01:11,240 --> 00:01:12,860
so that's wrong. 

17
00:01:12,890 --> 00:01:19,640
Instead I want to pass some data to the map screen where I can for one set this to read only let's say,

18
00:01:19,880 --> 00:01:23,140
so I'll pass a read only prop and set this to true

19
00:01:23,450 --> 00:01:32,870
and I also want to set an initial location and set this to an object for example, where I basically pass

20
00:01:32,870 --> 00:01:35,990
in this location I also show on the preview.

21
00:01:35,990 --> 00:01:46,870
So this here, I can cut it from there and create a new helper constant here, selected location is now

22
00:01:46,870 --> 00:01:54,310
just this here and I pass this as an initial location here, the selected location and I pass it to my map

23
00:01:54,310 --> 00:01:57,440
preview on the location prop

24
00:01:57,510 --> 00:02:01,160
and with that, we're passing the data to the map screen,

25
00:02:01,170 --> 00:02:02,430
we now need to use it there.

26
00:02:02,430 --> 00:02:08,940
So we need to use the read only prop or param to make sure we can't select a new place, an initial location

27
00:02:08,940 --> 00:02:11,670
to still have a marker in there right from the start.

28
00:02:12,620 --> 00:02:19,990
So now to use all that information here in the map screen, I can get my data from the params I receive,

29
00:02:20,000 --> 00:02:30,380
so I get my initial location by accessing props.navigation.getParam initial location which might be

30
00:02:30,380 --> 00:02:37,940
set, of course this also might be undefined but it also might be set and I get the read only with props

31
00:02:37,970 --> 00:02:42,980
navigation get param read only which also might be undefined.

32
00:02:43,150 --> 00:02:45,860
Now the initial location can be used to initialize the state

33
00:02:45,860 --> 00:02:51,680
now. Now this will not reinitialize this whenever this re-renders but instead React manages this such that

34
00:02:51,680 --> 00:02:56,450
this sets the initial state and for subsequent re-render cycles, this is simply ignored you could say.

35
00:02:57,650 --> 00:03:03,530
So now when we have an initial location, our state will be initialized to that location which is great.

36
00:03:03,590 --> 00:03:09,290
Now keep in mind that what I passed to initial location is of type object with lat and lng

37
00:03:09,290 --> 00:03:13,510
and that of course should match what we manage with our state in here and that is the case because there

38
00:03:13,510 --> 00:03:18,950
I also set my state to an object with lat and lng, if that would be different, you would need some logic

39
00:03:18,950 --> 00:03:25,490
for normalizing this. Now read only is the other thing I'm extracting and I can use this in a select location

40
00:03:25,490 --> 00:03:31,220
handler which is the function that triggers whenever we press the map and there, we can check if read

41
00:03:31,340 --> 00:03:37,940
only is true and if it's undefined, it will be false but if it's true, I just return here which means

42
00:03:37,940 --> 00:03:44,090
I don't continue, I don't pick a new location. With that, picking a location should be disabled.

43
00:03:44,090 --> 00:03:47,900
Now I also want to get rid of the save button if we have nothing to save,

44
00:03:47,900 --> 00:03:53,630
so if we're in read only mode, then we can't save anything. So headerRight should only be set

45
00:03:53,780 --> 00:03:58,790
if we're not in read only mode, so here I'll also extract read only mode with the help of navigation

46
00:03:58,790 --> 00:04:02,200
get param read only which I can do here as well of course

47
00:04:02,600 --> 00:04:09,230
and therefore now here, if we're in read only mode, if that is true, then the configuration I return is

48
00:04:09,230 --> 00:04:10,550
an empty object,

49
00:04:10,550 --> 00:04:14,240
so without any button. Let's give this a try.

50
00:04:14,300 --> 00:04:22,550
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

51
00:04:22,550 --> 00:04:28,430
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

52
00:04:28,430 --> 00:04:32,030
good but the marker is also not working. Now before we fix this,

53
00:04:32,030 --> 00:04:37,540
let's go to the new place screen and see if we there can still set a marker and that is the case,

54
00:04:37,550 --> 00:04:40,700
we can pick a place there, so that works.

55
00:04:40,700 --> 00:04:48,640
So the only thing that doesn't really work is loading this map with a marker chosen and actually, that's

56
00:04:48,640 --> 00:04:49,360
not correct,

57
00:04:49,360 --> 00:04:57,600
we do have a marker, it's just not here on the screen we preselected in San Francisco. If we go to the Google

58
00:04:57,600 --> 00:04:58,260
plex

59
00:05:01,440 --> 00:05:02,750
down there,

60
00:05:02,760 --> 00:05:06,160
here is the marker. So it did save this,

61
00:05:06,180 --> 00:05:08,880
it just didn't focus on that when we loaded it,

62
00:05:09,300 --> 00:05:13,970
so that's a little tweak we should also add on the map screen. There,

63
00:05:14,190 --> 00:05:22,240
we should make sure that this map region we set here also takes the initial location into account

64
00:05:22,240 --> 00:05:26,590
if we have one. So here the latitude we set initially,

65
00:05:26,620 --> 00:05:32,770
well if we do have an initial location, then I want to use initial location.lat instead of the default,

66
00:05:32,920 --> 00:05:36,550
only use the default otherwise, same of course for the longitude.

67
00:05:36,550 --> 00:05:42,010
If we have an initial location, I want to use the longitude of that initially instead of the default.

68
00:05:44,060 --> 00:05:50,390
Now with that if we save this, we should be able to have a map which is automatically centered on our marker

69
00:05:50,390 --> 00:05:54,050
if we open it in the read only mode, so here,

70
00:05:54,470 --> 00:05:55,960
indeed that works

71
00:05:56,180 --> 00:06:01,840
and if I of course add a new place, that also still works. There we open it on the default place,

72
00:06:01,850 --> 00:06:08,840
so somewhere here in San Francisco. This therefore all works

73
00:06:08,870 --> 00:06:13,190
and now I just want to test it on some real devices before I wrap up this module

74
00:06:13,340 --> 00:06:17,240
and we're done with adding native device features to our React Native app.