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>
)