react-native-navigation-apps
Version:
Open & Navigate With External Navigation Apps (Waze,GoogleMaps,iOS Maps) from react native
85 lines (69 loc) • 5.69 kB
Markdown
# 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
<a href="https://imgflip.com/gif/2byelf"><img src="https://i.imgflip.com/2byelf.gif" title="made at imgflip.com"/></a>
## Installation
```
npm -i --save react-native-navigation-apps
```
```
yarn add react-native-navigation-apps
```
## Usage
```javascript
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>
```