7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.6 `MapView`

The MapView component from Airbnb is a great example of a useful third-party component. In this lesson we’ll install and use it to track the user’s location.

Related Links

2.6 `MapView`

Hi, and welcome back to Get Started with React Native. In this lesson, I'll teach you how to integrate and work with third-party components such as MapView. The integrated MapView component was deprecated and removed from React Native recently. This means we need another solution to add it to our project. Fortunately, Airbnb has created a bunch of components in the react-native-maps package that also is recommended by the react-native developers. Installation of a third party component can vary, but in this case it's pretty simple. Just run NPM install React Native maps as the safe option or yarn add React Native maps, depending on what you are using. Then, run react-native link, react-native maps, which will add the native dependencies to the X code and Android projects. If you are using Android, you have to get a maps API key and add that to your manifest file. Check out the installation instructions for React Native maps on that. Okay, let's have a look at MapView, the main component and a few examples. MapView is simply added by importing it from the package and using it like any other component. You can also add a custom initial region, for instance around the user, where you want to start from. The module offers support for both Google Maps or the Native implementation of the platform. On iOS, it's MKMapView with Apple Maps. You can also add markers to a MapView with custom call outs and descriptions. One of the most useful things you can do is showing the user's location. To do that, you have to have the NSLocationWhenInUsageDescription key in your info.plist on iOS. But this is automatically done when initializing a React Native app. MapView is very powerful. We will see that when adding our drawing code to show the user's route. But let me give you another example. You can change the tiles of your map as well. For example, to OpenStreetMap. This is awesome. Okay, enough theory. Let's implement it in our app. First of all, we have to install it. I'm using yarn, so let me do this by typing yarn add react-native-maps. Followed by react-native link react-native-maps to link to Native modules to the project. After installing the module, we have to import the MapView component into our app at the top. And now we can use it and play around. I'm going to add a style called map to our Stylesheet that uses absoluteFillObject. Which essentially uses position absolute and top right bottom and left set to zero so it covers the whole screen. To use the map, just add the component and the style and we have a map. I know that we are going to be in Cupertino for most of our work on labs, so let me quickly add the correct coordinates as an initialRegion. I'm also going to activate city bicycle run in the simulators location settings so we have a moving location. Now it's time to show the location. I'm going to add shows to the user location to the MapView. The true value is implicit and doesn't need to be added. When reloading, the app asks us if we want to allow get started to use the location. After confirming, it shows our virtual location on screen. Let's also add follows user location, which takes away the interactivity of the MapView, but follows our fake user through the city. Finally, let's do another little project, that goes into the direction of drawing a line, but without the use of any API, and by using markers. So, let's use an event on MapView that gets triggered whenever the map region changes. I'm going to extract that into a separate function called add marker. Within this function, I'll first add a Native throttle so we don't get a massive amount of markers on screen. By storing the last time a marker was added and comparing it to the current time minus 5000 milliseconds. So we only get a marker every five seconds. Then we have to set the state. I want to populate a marker array of the contents of the previous markers, which I can do with three dots and then append the new one. A marker needs a coordinate, which I can fabricate from the latitudes and longitudes of the region. Since the marker doesn't care that there are additional values in the region, we can just use it as is. Then, I'm also going to add a key attribute that will receive a global ID. Data gets incremented just to write some warnings. Finally, I want to set a new last edit marker time to now. So, let's add in id global and set it to zero. And, also set the initial state of markers to an empty array. Finally, we can look through all stored markers with map and as a marker to the MapView with the coordinate and key set. And now we have a working pseudo-tracking device. It isn't all that useful because we can't interact with the map. But it works, yay. To recap, third party modules can be installed and imported very easily. Always check the installation documentation to integrate Native modules. React-native-maps is a powerful and easy to use map solution. In the next lesson, we will have a look at React Native APIs, especially Geolocation that we will use to properly track the user's location and draw a path of their route. See you there!

Back to the top