1
00:00:02,100 --> 00:00:09,600
To display this on a map, we have this map screen component which currently just has some dummy content

2
00:00:09,600 --> 00:00:15,800
and now we need to be able to render an interactive map and for this, expo again has got us covered.

3
00:00:15,870 --> 00:00:17,880
There, you find the

4
00:00:18,970 --> 00:00:20,810
map view package.

5
00:00:20,850 --> 00:00:25,840
Now this behind the scenes uses a package named React Native maps which you can also use in non-expo

6
00:00:25,840 --> 00:00:26,070
apps,

7
00:00:26,080 --> 00:00:30,220
by the way many of these packages can be used in non-expo apps and that's something I will come back

8
00:00:30,220 --> 00:00:33,950
to in the building apps without expo module

9
00:00:34,060 --> 00:00:38,480
but for now we can simply conveniently install this by running this command and this will install the

10
00:00:38,500 --> 00:00:40,630
React Native maps package and

11
00:00:40,640 --> 00:00:43,820
then we can use it as we see it here in this example.

12
00:00:43,900 --> 00:00:49,660
By the way also check out the official documentation at this link to see way more usage examples in

13
00:00:49,660 --> 00:00:52,660
there because there, you can learn all about how to use this package,

14
00:00:52,660 --> 00:00:56,300
some examples are also shown here in this module of course.

15
00:00:56,410 --> 00:01:01,810
So let's run expo install react-native-maps to install this package here and this will then

16
00:01:01,810 --> 00:01:06,160
allow us to use various components that render interactive maps.

17
00:01:06,160 --> 00:01:12,860
So let's wait for that to finish and with that finished, in the map screen component, we can start using

18
00:01:12,860 --> 00:01:13,300
that map.

19
00:01:15,730 --> 00:01:26,160
Now in there, to use the map, we can import map view from React Native map, so from this package we just

20
00:01:26,160 --> 00:01:31,150
installed and that will allow us to render a map on the screen.

21
00:01:31,200 --> 00:01:32,730
Now how does that work?

22
00:01:32,730 --> 00:01:38,880
Well let's go here into our map screen and instead of returning this view here, I'll return a map view

23
00:01:39,630 --> 00:01:41,340
like that.

24
00:01:41,370 --> 00:01:43,470
Now the map view can be a self-closing tag

25
00:01:43,470 --> 00:01:47,910
for now, we can later also add some markers in there but for now let's just render it like this

26
00:01:48,180 --> 00:01:51,530
and now you need to configure this map view. To be precise,

27
00:01:51,540 --> 00:01:58,310
it needs a region props which tells it where it should be focused on when it loads,

28
00:01:58,440 --> 00:02:03,990
so which map part or which part of the world it should focus on when it loads.

29
00:02:03,990 --> 00:02:12,770
So we need to create such a region here and I'll store that in a constant named map region and a region

30
00:02:12,770 --> 00:02:20,810
is actually an object with four properties and you have to name them like this - latitude and not lat

31
00:02:20,840 --> 00:02:24,470
but really latitude written out, longitude,

32
00:02:27,360 --> 00:02:32,680
latitudeDelta and longitudeDelta.

33
00:02:32,830 --> 00:02:41,430
The deltas basically set the zoom factor because this describes how much space you can see around

34
00:02:41,490 --> 00:02:45,450
the center which you describe with these two points.

35
00:02:45,480 --> 00:02:48,690
So that describes a point, together with the two deltas,

36
00:02:48,690 --> 00:02:51,030
it describes a surface.

37
00:02:51,080 --> 00:02:54,890
So now here, we can start with some dummy values before we

38
00:02:54,890 --> 00:02:58,820
then later also make sure that we can prepopulate this.

39
00:02:58,820 --> 00:03:03,980
So here, I'll set this to dummy value of 37.78 and -122.43

40
00:03:03,980 --> 00:03:11,900
which is in the Bay Area around the Google headquarters and here, latitudeDelta will

41
00:03:11,900 --> 00:03:18,080
take 0.0922 and then 0.0421,

42
00:03:18,080 --> 00:03:21,030
I found that this works quite well as a region.

43
00:03:21,080 --> 00:03:27,120
Of course you can experiment with these numbers but then in the end, pass in this map region here.

44
00:03:27,200 --> 00:03:30,020
Now this should render a map on the screen,

45
00:03:30,110 --> 00:03:32,320
now we just need to be able to reach it and for that

46
00:03:32,330 --> 00:03:37,000
let me go back to the location picker and I want to reach it in two different ways - 

47
00:03:37,010 --> 00:03:42,380
one is with the help of a button which I didn't add yet. Besides the get user location button, I want to

48
00:03:42,390 --> 00:03:48,730
have a second button which should sit next to the first one, so I'll add a view to wrap both and then

49
00:03:48,730 --> 00:03:53,830
move this button in here and have a second button in there and this button will generally be configured

50
00:03:53,830 --> 00:04:01,400
in the same way but I will say pick on map and of course, I'll trigger a different method,

51
00:04:01,400 --> 00:04:09,740
different function, here I want to trigger a function which is the pick on map handler and I'll therefore

52
00:04:09,740 --> 00:04:10,870
use this here

53
00:04:10,940 --> 00:04:16,220
and that's one way of selecting this. The other way of selecting this or of going to the map is by clicking

54
00:04:16,220 --> 00:04:22,900
on the map preview. Now before I implement this, let me quickly style this view that holds the two buttons.

55
00:04:22,900 --> 00:04:30,460
I'll give it a style identifier of actions and then down there, actions can be configured in a relatively

56
00:04:30,460 --> 00:04:31,620
straightforward way.

57
00:04:32,930 --> 00:04:38,720
I want to have the item sit next to each other, so flex direction will be a row not column. Justify content

58
00:04:38,720 --> 00:04:45,580
can be space around to distribute the available free space around both buttons, I'll take a width of 100%

59
00:04:45,620 --> 00:04:49,400
for this row and that's actually it.

60
00:04:49,400 --> 00:04:51,170
Now with that, I have my buttons here,

61
00:04:51,170 --> 00:04:56,510
now we need to make sure that we can also tap the map preview and for that, let me go to map preview and

62
00:04:56,510 --> 00:05:03,090
actually wrap this, not in a view but in a touchable component and here I'll just use touchable opacity,

63
00:05:03,110 --> 00:05:07,700
of course you could also go for a different touchable components based on the platform you're running

64
00:05:07,700 --> 00:05:08,260
on,

65
00:05:08,270 --> 00:05:14,000
I want to keep this relatively straightforward, so I'll just replace this view here with touchable opacity,

66
00:05:14,450 --> 00:05:15,430
have my style here,

67
00:05:15,440 --> 00:05:20,750
that's fine but also of course have the onPress handler and there, I want to trigger a function which

68
00:05:20,750 --> 00:05:23,950
I expect to get from outside via props.

69
00:05:24,020 --> 00:05:28,210
I'll just call this onPress too but you could give this prop any name you want.

70
00:05:28,250 --> 00:05:32,030
This now allows us to add an onPress prop on the map preview,

71
00:05:32,030 --> 00:05:38,030
so here in the location picker, I can listen to onPress on the map preview and there of course,

72
00:05:38,030 --> 00:05:42,050
I want to trigger the same function as when I click on the button down there.

73
00:05:42,140 --> 00:05:44,420
I want to trigger the pick on map handler,

74
00:05:44,660 --> 00:05:46,490
so that's what I do.

75
00:05:46,520 --> 00:05:49,790
Now the pick on map handler should simply go to the map screen right,

76
00:05:49,790 --> 00:05:56,700
so in there we can say props.navigation.navigate map and that's it for the second.

77
00:05:56,720 --> 00:06:01,760
So if we now save this, we should be able to reach this full screen interactive map where we can't select

78
00:06:01,760 --> 00:06:04,140
a place yet but at least we can view it.

79
00:06:04,160 --> 00:06:09,500
So now if I click on the plus here and then pick on map, I get an error,

80
00:06:09,600 --> 00:06:15,930
now why is that? Well that's totally unrelated to native modules. You might remember that the navigation prop

81
00:06:15,930 --> 00:06:20,700
is only available on components which are directly loaded as screens which the location picker of course

82
00:06:20,700 --> 00:06:22,140
isn't. Now there

83
00:06:22,140 --> 00:06:23,750
are various workarounds,

84
00:06:23,760 --> 00:06:26,070
there would be a higher order component we can use,

85
00:06:26,080 --> 00:06:29,910
we can also install a React navigation specific hooks package

86
00:06:30,360 --> 00:06:35,430
but here I'll take a simple approach and just make sure that I have a navigation prop on location picker

87
00:06:35,760 --> 00:06:39,720
by going to the new place screen which is where I do use the location picker

88
00:06:39,960 --> 00:06:45,600
and there I'll set this navigation prop and forward props.navigation which I here do have available

89
00:06:45,600 --> 00:06:49,170
because this is a component directly loaded through a navigator,

90
00:06:49,170 --> 00:06:54,960
so now I'm just forwarding access to my navigation props. And with that if we now go back and click this,

91
00:06:55,680 --> 00:07:00,300
we do load this map here or at least a map screen

92
00:07:00,320 --> 00:07:01,740
but where is the map?

93
00:07:01,820 --> 00:07:09,290
Well the map is invisible because, and that's important, for your map you need to add a style and here, I'll

94
00:07:09,290 --> 00:07:15,130
add styles.map and it can be a very simple style but you just need to define how big it should be

95
00:07:15,140 --> 00:07:18,520
because by default, it will not occupy any space.

96
00:07:18,560 --> 00:07:24,410
So by just setting flex to one here and telling it it should take all the space it gets, just by doing

97
00:07:24,410 --> 00:07:26,840
that, you will make sure that you see a map.

98
00:07:26,840 --> 00:07:35,360
So now with that if you click on this, here is our map getting loaded. Now also worth noting, on iOS you

99
00:07:35,450 --> 00:07:40,490
automatically use Apple Maps, though you can also use Google Maps there if you want to, the official

100
00:07:40,490 --> 00:07:44,680
docs tell you how, on Android you always use google maps.

101
00:07:44,690 --> 00:07:46,820
So here if I click on pick on map,

102
00:07:46,910 --> 00:07:53,430
we will also see that once we load that new screen, here it is. Now of course, we can also go to that screen

103
00:07:53,430 --> 00:07:55,290
by clicking on our preview here,

104
00:07:55,350 --> 00:07:56,580
that's what we set up right,

105
00:07:56,580 --> 00:08:00,500
so that also works, of course also works on iOS.

106
00:08:00,540 --> 00:08:05,940
And by the way, the animation here isn't super smooth, on a real device it will be,

107
00:08:05,940 --> 00:08:09,300
so that's not a problem, that's just here on the emulator.

108
00:08:09,300 --> 00:08:14,040
So with that we have our map here and on this map, we can scroll. Again, on the simulator it might be a

109
00:08:14,040 --> 00:08:16,620
bit small, on a real device it won't be.

110
00:08:16,620 --> 00:08:21,090
So here you can scroll around, you will also be able to pinch and zoom later, so you can do all of that and

111
00:08:21,090 --> 00:08:23,150
with that, we see the map.

112
00:08:23,220 --> 00:08:27,570
Now the map is usable but of course, we can't pick a place on there yet,

113
00:08:27,600 --> 00:08:29,430
so that's the next thing we'll need to change.