react-native-navigation-apps

Open & Navigate With External Navigation Apps (Waze,GoogleMaps,iOS Maps) from react native

Description

A react native component for using navigation apps like waze google maps and ios maps to navigate by address or latitude and longitude

Example

Installation

npm -i --save react-native-navigation-apps

yarn add react-native-navigation-apps

Usage

import {NavigationApps,actions,googleMapsTravelModes} from "react-native-navigation-apps";

      <NavigationApps
                    iconSize={50}
                    row
                    address='some default address to navigate' // address to navigate by for all apps 
                    waze={{address:'',lat:'',lon:'',action: actions.navigateByAddress}} // specific settings for waze
                    googleMaps={{search,lat:'',lon:'',action: actions.navigateByAddress,travelMode:googleMapsTravelModes.driving}} // specific settings for google maps
                    maps={{search,lat:'',lon:'',action: actions.navigateByAddress,travelMode:mapsTravelModes.driving}} // specific settings for maps
                />

Details

Each app (waze,google maps,ios maps) has its own configuration an action address lat lon and icon For google maps and ios maps also have travelMode (driving,walking,transit) Action can be : navigateByAddress -- navigate to an address by address (text) navigateByLatAndLon -- navigate to an address by Latitude and Longitude searchLocationByLatAndLon -- only search an address (not navigate) by Latitude and Longitude travelMode can be : driving walking transit

Properties

| Prop | Description | Default | | --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | | row | align navigation apps as row | false | | viewMode | Set navigation apps display as modal , view or sheet mode | view | | iconSize | icon size of the navigation app | 100 | | modalProps | react native modal props | {} | | modalContainerStyle | Styling modal container | {} | | modalBtnCloseContainerStyle| Styling the modal close button container | {} | | modalBtnCloseStyle | Styling the modal close button | {} | | modalBtnCloseTextStyle | Styling the modal close button text | {} | | modalBtnOpenStyle | Styling the modal open button | {} | | modalBtnOpenTextStyle | Styling the modal open button text | {} | | modalBtnOpenTitle | Title for the the modal open button | '' | | modalBtnCloseTitle | Title for the modal close button | '' | | actionSheetBtnOpenTitle | Title for the the action sheet open button | open action sheet | | actionSheetCloseTitle | Title for the action sheet close button | close action sheet | | actionSheetBtnOpenTextStyle| Styling the action sheet open button text | {} | | actionSheetBtnOpenStyle | Styling the action sheet open button | {} | | address | Set the default address for the navigation apps | '' | | waze | Set configuration for waze : action address lat lon and icon ... if address not set waze will take the address from the default address prop | address:'',action:navigateByAddress,lat:'',lon:'' | | googleMaps |Set configuration for google maps action address lat lon icon and travelMode ... if address not set google maps will take the address from the default address prop | address:'',action:navigateByAddress,lat:'',lon:travelMode:'driving'| | maps | Set configuration for ios maps action address lat lon icon and travelMode ... if address not set ios maps will take the address from the default address prop | address:'',action:navigateByAddress,lat:'',lon:'',travelMode:'driving' |

IOS Usage

To use waze and google maps on iOS devices you must add this lines to the info.plist file

<key>LSApplicationQueriesSchemes</key>
	<array>
		<string>comgooglemaps</string>
		<string>waze</string>
	</array>