react-native-map-direction

This open source library have few applications using Google Maps API.

MapViewer:

Display direction between two geolocation.

Installation:

npm i react-native-map-direction --save

General Usage:

import MapViewer from ‘react-native-map-direction’;

API KEY:

Go to https://developers.google.com/maps/documentation/ios-sdk/get-api-key
and
https://developers.google.com/maps/documentation/android-api/signup to get your keys for both iOS and Android.

Make sure that Google Maps Android API and Google Maps SDK for iOS are enabled for the current project.

https://console.developers.google.com/apis/library/maps-android-backend.googleapis.com/
https://console.developers.google.com/apis/library/maps-ios-backend.googleapis.com

Without an API key the Google Maps map won't render anything.

Where to ADD API KEY:

Add your API key to your manifest file in
“ android/app/src/main/AndroidManifest.xml “

You will only need to add this meta-data tag, but make sure it's a child of application
<application   >
<meta-data
    android:name="com.google.android.geo.API_KEY"
    android:value="YOUR_API_KEY_HERE"/>
</application   >

Issues:

If there are any Map related issues and Gradle, then follow this link :

https://itnext.io/install-react-native-maps-with-gradle-3-on-android-44f91a70a395

Customizable Features:

• Polyline: Color and Width

• Marker: Color

• View: height and width

Dependencies Used:

• ‘react-native-maps’
• ‘@mapbox/polyline’

Usage:

import MapViewer from 'react-native-map-direction';
class MapComponent extends Component {
  constructor(props) {
  super(props);
  this.state = {
  geoCode: {
    startLoc: {
      lat: 8.192738,
      lon: -77.714723
    },
    destinationLoc: {
      lat: 70.196917
      lon: -148.419491
    }

  },   screenDimension: {
    width: Dimensions.get('window').width, // width
    height: Dimensions.get('window').height //height
  },
  pinColors: {
    start: 'green',
    destination: 'red'
  },
  polyline: {
    strokeColor: 'navy',
    strokeWidth: 4
  }
  }
  }
  render() {
    return (       <MapViewer

          geoCode={this.state.geoCode}
          screenDimension={this.state.screenDimension}
          pinColors={this.state.pinColors}
          polyline={this.state.polyline}
      />
    )
  };
}
export default MapComponent;

Component API:

Props

Props	Type	Note
geoCode	geoCode: {   startLoc: {     lat: Number,     lon: Number   },   destinationLoc: {     lat: Number,     lon: Number   } }	The start and destination geolocation in terms of latitude and longitude.
screenDimension	screenDimension: {   width: Number,   height: Number }	Height and width of the view in which the Map will be shown
pinColors	pinColors: {   start: ‘color_name’,   destination: ‘color_name’   }	Colors for start and destination marker
polyline	polyline: {   strokeColor: ‘color_name’,   strokeWidth: Number   }	Color and line width for the polyline