Today we’re going to draw directions route on a map in React Native, showcasing the path between two different locations. We’re going to make use of which is a powerful library, allowing us to draw polylines between multiple coordinates. We are also going to use Google Directions API, in order to fetch precise directions routes between two coordinates. react-native-maps It is important to note that the react-native-maps library as of the time of this writing only officially supports the polyline module on the latest React Native version due to the increasing changes in the React Native ecosystem that are not easy to keep up with. Installation Let’s install and configure this library. Depending on your preferred package manager, simply run: npm install react-native-maps --save-exact or yarn add react-native-maps -E Pro Tip: The -E flag installs the exact latest version of this library Setup iOS cd ios pod install Get a Google API key from your Google Console. You can learn how to obtain the Google API Key step by step in our tutorial. Once you have the API key, edit your file: User Location AppDelegate.m + # <GoogleMaps/GoogleMaps.h> @implementation AppDelegate ... - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { + [GMSServices provideAPIKey:@ ]; ... import "_YOUR_API_KEY_" // add this line using the api key obtained from Google Console Add the following to your above the use_native_modules! function and run pod install in the folder: Podfile ios # React Native Maps dependencies rn_maps_path = pod , : rn_maps_path pod pod '../node_modules/react-native-maps' 'react-native-google-maps' => path 'GoogleMaps' 'Google-Maps-iOS-Utils' Android If you’ve defined (recommended!) in your root build.gradle, this library will detect the presence of the following properties: project-wide properties buildscript {...} allprojects {...} ext { compileSdkVersion = xxx targetSdkVersion = xxx buildToolsVersion = minSdkVersion = xxx supportLibVersion = playServicesVersion = androidMapsUtilsVersion = } /** + Project-wide Gradle configuration properties */ "xxx" "xxx" "17.0.0" // or get latest version "xxx" or you could do buildscript { ext { buildToolsVersion = minSdkVersion = xxx compileSdkVersion = xxx targetSdkVersion = xxx supportLibVersion = playServicesVersion = androidMapsUtilsVersion = } } ... "xxx" "xxx" "17.0.0" // or find latest version "xxx" If you do have defined and have a different play-services version than the one included in this library, use the following instead (switch 17.0.0 and/or 17.2.1 for the desired versions): not project-wide properties ... dependencies { ... implementation(project( )){ exclude group: , : exclude group: , : } implementation implementation } ':react-native-maps' 'com.google.android.gms' module 'play-services-base' 'com.google.android.gms' module 'play-services-maps' 'com.google.android.gms:play-services-base:17.2.1' 'com.google.android.gms:play-services-maps:17.0.0' Finally, you have to add your already retrieved Google API Key to the : AndroidManifest.xml <application> <meta-data android:name="com.google.android.geo.API_KEY" android:value="Your Google maps API Key Here"/> <!-- You will also only need to add this uses-library tag --> <uses-library android:name="org.apache.http.legacy" android:required="false"/> </application> <!-- You will only need to add this meta-data tag, but make sure it's a child of application --> Usage The basic usage of this library is as follows: React ; {StyleSheet, View, Dimensions} ; MapView ; App = { ( <MapView style={styles.maps} initialRegion={{ latitude: 48.864716, longitude: 2.349014, latitudeDelta: 0.0622, longitudeDelta: 0.0121, }}/> </View> /** * Sample React Native App * https://github.com/facebook/react-native * * @format * @flow strict-local */ import from 'react' import from 'react-native' import from 'react-native-maps' const => () return < = > View style {styles.container} ); }; const styles = StyleSheet.create({ container: { flex: 1, }, maps: { width: Dimensions.get('screen').width, height: Dimensions.get('screen').height, }, }); export default App; This snippet of code renders a basic map that centers on Paris, France. It’s just the bare map as we can see below but we will add the functionality to render a line showing a direction between two locations. To achieve the goal of this article, we have to take a look at an element named provided by which draws the directions route between two points on the map. Polyline, react-native-maps App = { [coordinates] = useState([ { : , : , }, { : , : , }, ]); ( <MapView style={styles.maps} initialRegion={{ latitude: coordinates[0].latitude, longitude: coordinates[0].longitude, latitudeDelta: 0.0622, longitudeDelta: 0.0121, }}> <Marker coordinate={coordinates[0]} /> <Marker coordinate={coordinates[1]} /> <Polyline coordinates={coordinates} strokeColor="#000" // fallback for when `strokeColors` is not supported by the map-provider strokeColors={['#7F0000']} strokeWidth={6} /> </MapView> </View> ); }; const => () const latitude 48.8587741 longitude 2.2069771 latitude 48.8323785 longitude 2.3361663 return < = > View style {styles.container} As we can see in the screenshot below it just displays a straight line between the two markers on the map and this is not helpful for our purpose because it does not show us the path between the two locations. To solve this issue, we have to use an external library react-native-maps-directions to help us draw the correct directions route between our two desired locations. This library makes use the of the , which is a REST endpoint provided by Google, which you can query to get the directions routes between two coordinates with a simple HTTP call. Google Directions API App = { [coordinates] = useState([ { : , : , }, { : , : , }, ]); ( <MapView style={styles.maps} initialRegion={{ latitude: coordinates[0].latitude, longitude: coordinates[0].longitude, latitudeDelta: 0.0622, longitudeDelta: 0.0121, }}> <MapViewDirections origin={coordinates[0]} destination={coordinates[1]} apikey={GOOGLE_API_KEY} // insert your API Key here strokeWidth={4} strokeColor="#111111" /> <Marker coordinate={coordinates[0]} /> <Marker coordinate={coordinates[1]} /> </MapView> </View> ); }; const => () const latitude 48.8587741 longitude 2.2069771 latitude 48.8323785 longitude 2.3361663 return < = > View style {styles.container} With that we would have achieved our goal. Conclusion If you have followed closely you would have been able to render directions on a React Native map. But take note that you should enable for the directions to be rendered and if you are testing for Android or if you’re testing for iOS. Directions API Google Maps for Android Google Maps API for iOS We were able to draw the directions route between two given locations on a map in React Native, by using a maps library as well as the Google Directions API endpoint. If you found this React Native tutorial useful, please spread the word by sharing it with your community. Cheers! Previously published at https://www.instamobile.io/react-native-tutorials/react-native-draw-directions-map/
