How to add polylines using Google directions API in a react-native app (ios) — Part 1

This tutorial will explain the step by step process of adding polylines to react-native-maps using the Google directions API on an iOS simulator using the default maps included (not google maps), I will do one for Android in the near future I just didn’t want to make the article too long.

Cool cat

The first step is to create a react-native app, to do this open up your code editor of choice mine is always VS Code, and within the terminal inside of this code editor enter the below command.

react-native init polylinesgoogledirec

This will create a react-native project including an IOS and Android folder, this will take a minute or two to process.

Once this has been done open the file “App.js”, and replace the default “App” attribute whether it be a class or function with the below.

class App extends React.Component {
render() {
return (
<View>
<View style={styles.customMargin}>
<Text style={styles.customAlign}>My Google polyline application!</Text>
</View>
</View>
)
}
}

Change your “styles” variable which will be equal to a stylesheet container at the bottom of the “App.js” file to the below as well.

const styles = StyleSheet.create({
customMargin: {
marginTop: 50
},
customAlign: {
textAlign: 'center'
}
});

So now your simulator should look like the below (I know, very basic lol)

The next step is to install a package named “react-native-maps”, this is a great package that is full of functionality including showing a map on the screen and getting the users current location, install it using the below command.

npm install react-native-maps

After you have ran this we need to install the pod dependencies for react-native maps, so enter the below command (at the root of your project) to change to your ios directory and install the missing dependencies.

cd ios && pod install

Now that you have installed we will need to close the simulator and terminal to ensure then when we reload the simulator our changes will take effect, sometimes react-native can be weird and you don’t need to close and reopen the simulator, but better safe than sorry.

Now enter the below.

cd ..

To navigate back to the root of your project.

Next we will import our MapView from the ‘react-native-maps’ package. The MapView component is our container for showing values and content on our map, this is where we define the initial region we want our map to show i.e. in a real world application you could set the inital region to the users location using a property called “showUsersLocation” or you could set it to the latitude and longitude values of a place you want to show on the map. To import MapView use the below.

NOTE: Usually it is better to set a value to the “provider” property on the MapView component, usually to Google, however, additional steps need to be taken in order to set that up correctly in our iOS and Android projects which is out of scope for this tutorial, I may do a tutorial about this in the future. Moreover, we will stick with the default provider for iOS which is Apple Maps. Below is how to import MapView for use.

import MapView from 'react-native-maps';

There is a property called “initialRegion” which takes an object as it’s value with values for “latitude”, “longitude”, “latitue delta” and “longitude delta”.

The delta values correspond to how far the map zooms in when divided by the width set in the style attribute of the component. The explanation of that is out of scope for this tutorial, however, there is a thorough explanation in this stack overflow question.

React native MapView: what is latitudeDelta longitudeDelta

<MapView
initialRegion={{
latitude:51.5123,
longitude:-0.0910,
latitudeDelta:0.05,
longitudeDelta:0.05
}}
style={{width:300,height:300}}
/>

So as you can see in my MapView component I have set an initial region (I have set mine to a London location, however, you can set yours to whatever you like whether you are in US, India, Canada etc), with a few style attributes.

Now to test this run the below command on your simulator.

react-native run-ios

A cool thing you can do with your simulator is define a custom location, this is handy if you want to test/ create a scenario for when you want to see your user on a map.

To do this go to your simulator and on the top tab of the screen there is an option called “Features”.

Click this, then you will see a bunch of options, click the one called “Location”, and then click “custom location”. Click this, then when you have entered the latitude and longitude values you want to use then click ok.

This will enable you to set a custom latitude and longitude value for your simulator, I will be using a custom location of somewhere in London since I have set my initial region to a London area and want to see a short polyline between the users location and place I want to go to and I don’t want the line to look ridiculously big and go cross country haha

After you have set this add the property “showsUserLocation” to the “MapView” component, this will show a blue dot on the map of the location that is in the simulator, or in our case it is the custom location we just set earlier.

Ok, so that concludes part 1 of the tutorial, I didn’t want to make the article too long that people lost interest so decided to stretch it out into 2 parts. In the next part I will be showing you how to include the Google directions API into your app to draw a polyline between the users location and another location of your choice, mine will be piccadilly circus ( a place I have never been but I am sure is amazing).

See my blog here — https://simplyreact.uk/