react-native-map-link 2.7.27 → 2.8.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +56 -28
- package/index.d.ts +44 -41
- package/package.json +2 -2
- package/src/constants.js +3 -0
- package/src/images/liftago.png +0 -0
- package/src/index.js +79 -12
package/README.md
CHANGED
|
@@ -12,25 +12,26 @@ on their device. The app supports Apple Maps, Google Maps, Citymapper, Uber, and
|
|
|
12
12
|
<details>
|
|
13
13
|
<summary>Full list of supported apps</summary>
|
|
14
14
|
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
15
|
+
- Apple Maps – `apple-maps`
|
|
16
|
+
- Google Maps – `google-maps`
|
|
17
|
+
- Citymapper – `citymapper`
|
|
18
|
+
- Uber – `uber`
|
|
19
|
+
- Lyft – `lyft`
|
|
20
|
+
- The Transit App – `transit`
|
|
21
|
+
- TruckMap – `truckmap`
|
|
22
|
+
- Waze – `waze`
|
|
23
|
+
- Yandex.Navi – `yandex`
|
|
24
|
+
- Moovit – `moovit`
|
|
25
|
+
- Yandex Taxi – `yandex-taxi`
|
|
26
|
+
- Yandex Maps – `yandex-maps`
|
|
27
|
+
- Kakao Map – `kakaomap`
|
|
28
|
+
- Mapy.cz – `mapycz`
|
|
29
|
+
- Maps.me – `maps-me`
|
|
30
|
+
- OsmAnd - `osmand`
|
|
31
|
+
- Gett - `gett`
|
|
32
|
+
- Naver Map - `navermap`
|
|
33
|
+
- 2GIS - `dgis`
|
|
34
|
+
- Liftago - `liftago`
|
|
34
35
|
|
|
35
36
|
</details>
|
|
36
37
|
|
|
@@ -74,6 +75,7 @@ Just add this in your `Info.plist` depending on which apps you'd like to support
|
|
|
74
75
|
<string>gett</string>
|
|
75
76
|
<string>nmap</string>
|
|
76
77
|
<string>dgis</string>
|
|
78
|
+
<string>lftgpas</string>
|
|
77
79
|
</array>
|
|
78
80
|
```
|
|
79
81
|
|
|
@@ -178,9 +180,21 @@ You can do so by coping the `<queries>` statement below, and pasting it in the t
|
|
|
178
180
|
<action android:name="android.intent.action.VIEW" />
|
|
179
181
|
<data android:scheme="dgis" />
|
|
180
182
|
</intent>
|
|
183
|
+
<intent>
|
|
184
|
+
<action android:name="android.intent.action.VIEW" />
|
|
185
|
+
<data android:scheme="lftgpas" />
|
|
186
|
+
</intent>
|
|
181
187
|
</queries>
|
|
182
188
|
```
|
|
183
189
|
|
|
190
|
+
If you're running into a 'unexpected element `<queries>` found in `<manifest>`' error, make sure you have an updated version of Gradle in your `android/build.gradle` file:
|
|
191
|
+
|
|
192
|
+
```java
|
|
193
|
+
classpath("com.android.tools.build:gradle:3.5.4")
|
|
194
|
+
```
|
|
195
|
+
|
|
196
|
+
More info [here](https://stackoverflow.com/a/67383641/1129689).
|
|
197
|
+
|
|
184
198
|
</details>
|
|
185
199
|
|
|
186
200
|
<details>
|
|
@@ -190,7 +204,6 @@ You can do so by coping the `<queries>` statement below, and pasting it in the t
|
|
|
190
204
|
|
|
191
205
|
</details>
|
|
192
206
|
|
|
193
|
-
|
|
194
207
|
## Usage
|
|
195
208
|
|
|
196
209
|
Using the `showLocation` function will shown an action sheet on iOS and an alert on Android, without any custom styling:
|
|
@@ -211,19 +224,34 @@ showLocation({
|
|
|
211
224
|
dialogMessage: 'This is the amazing dialog Message', // optional (default: 'What app would you like to use?')
|
|
212
225
|
cancelText: 'This is the cancel button text', // optional (default: 'Cancel')
|
|
213
226
|
appsWhiteList: ['google-maps'], // optionally you can set which apps to show (default: will show all supported apps installed on device)
|
|
214
|
-
naverCallerName: 'com.example.myapp' // to link into Naver Map You should provide your appname which is the bundle ID in iOS and applicationId in android.
|
|
215
|
-
// appTitles: { 'google-maps': 'My custom Google Maps title' } // optionally you can override default app titles
|
|
216
|
-
// app: 'uber' // optionally specify specific app to use
|
|
227
|
+
naverCallerName: 'com.example.myapp', // to link into Naver Map You should provide your appname which is the bundle ID in iOS and applicationId in android.
|
|
228
|
+
// appTitles: { 'google-maps': 'My custom Google Maps title' }, // optionally you can override default app titles
|
|
229
|
+
// app: 'uber', // optionally specify specific app to use
|
|
230
|
+
directionsMode: 'walk' // optional, accepted values are 'car', 'walk', 'public-transport' or 'bike'
|
|
217
231
|
})
|
|
218
232
|
```
|
|
219
233
|
|
|
220
234
|
Notes:
|
|
221
235
|
|
|
222
|
-
|
|
223
|
-
|
|
236
|
+
- The `sourceLatitude/sourceLongitude` options only work if you specify both. Currently supports all apps except Waze.
|
|
237
|
+
- `directionsMode` works on google-maps and apple-maps (on the latter, `bike` mode will not work). Without setting it, the app will decide based on his own settings.
|
|
224
238
|
|
|
225
239
|
## More information
|
|
226
240
|
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
241
|
+
- [Using this library with Expo](docs/expo.md)
|
|
242
|
+
- [Alternative usage: styled popup](docs/popup.md)
|
|
243
|
+
- [Adding support for new maps apps](docs/add-app.md)
|
|
244
|
+
|
|
245
|
+
<br /><br />
|
|
246
|
+
|
|
247
|
+
---
|
|
248
|
+
|
|
249
|
+
<div align="center">
|
|
250
|
+
<b>
|
|
251
|
+
<a href="https://schof.co/consulting/?utm_source=flexible-agency/react-native-map-link">Get professional support for this package →</a>
|
|
252
|
+
</b>
|
|
253
|
+
<br>
|
|
254
|
+
<sub>
|
|
255
|
+
Custom consulting sessions availabe for implementation support or feature development.
|
|
256
|
+
</sub>
|
|
257
|
+
</div>
|
package/index.d.ts
CHANGED
|
@@ -1,52 +1,55 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import {ViewStyle, StyleProp, ImageStyle, TextStyle} from 'react-native';
|
|
3
3
|
|
|
4
4
|
interface Options {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
5
|
+
latitude: number | string;
|
|
6
|
+
longitude: number | string;
|
|
7
|
+
sourceLatitude?: number;
|
|
8
|
+
sourceLongitude?: number;
|
|
9
|
+
alwaysIncludeGoogle?: boolean;
|
|
10
|
+
googleForceLatLon?: boolean;
|
|
11
|
+
googlePlaceId?: string;
|
|
12
|
+
title?: string;
|
|
13
|
+
app?: string;
|
|
14
|
+
dialogTitle?: string;
|
|
15
|
+
dialogMessage?: string;
|
|
16
|
+
cancelText?: string;
|
|
17
|
+
appsWhiteList?: string[];
|
|
18
|
+
appTitles?: {[key: string]: string};
|
|
19
|
+
naverCallerName?: string;
|
|
20
|
+
directionsMode?: 'car' | 'walk' | 'public-transport' | 'bike';
|
|
20
21
|
}
|
|
21
22
|
|
|
22
23
|
interface PopupStyleProp {
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
24
|
+
container?: StyleProp<ViewStyle>;
|
|
25
|
+
itemContainer?: StyleProp<ViewStyle>;
|
|
26
|
+
image?: StyleProp<ImageStyle>;
|
|
27
|
+
itemText?: StyleProp<TextStyle>;
|
|
28
|
+
headerContainer?: StyleProp<ViewStyle>;
|
|
29
|
+
titleText?: StyleProp<TextStyle>;
|
|
30
|
+
subtitleText?: StyleProp<TextStyle>;
|
|
31
|
+
cancelButtonContainer?: StyleProp<ViewStyle>;
|
|
32
|
+
cancelButtonText?: StyleProp<TextStyle>;
|
|
33
|
+
separatorStyle?: StyleProp<ViewStyle>;
|
|
34
|
+
activityIndicatorContainer?: StyleProp<ViewStyle>;
|
|
34
35
|
}
|
|
35
36
|
|
|
36
37
|
interface PopupProps {
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
38
|
+
isVisible: boolean;
|
|
39
|
+
showHeader?: boolean;
|
|
40
|
+
customHeader?: React.ReactNode;
|
|
41
|
+
customFooter?: React.ReactNode;
|
|
42
|
+
onCancelPressed: () => void;
|
|
43
|
+
onBackButtonPressed: () => void;
|
|
44
|
+
onAppPressed: () => void;
|
|
45
|
+
style?: PopupStyleProp;
|
|
46
|
+
modalProps?: object;
|
|
47
|
+
options: Options;
|
|
48
|
+
appsWhiteList: string[];
|
|
49
|
+
appTitles?: {[key: string]: string};
|
|
49
50
|
}
|
|
50
51
|
|
|
51
|
-
export function showLocation(
|
|
52
|
-
|
|
52
|
+
export function showLocation(
|
|
53
|
+
options: Options,
|
|
54
|
+
): Promise<string | undefined | null>;
|
|
55
|
+
export class Popup extends React.Component<PopupProps> {}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-native-map-link",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.8.2",
|
|
4
4
|
"description": "Open the map app of the user's choice with a specific location",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"repository": {
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
"eslint": "^6.5.1",
|
|
44
44
|
"jest": "^25.1.0",
|
|
45
45
|
"metro-react-native-babel-preset": "^0.61.0",
|
|
46
|
-
"react-native": "^0.
|
|
46
|
+
"react-native": "^0.64.1"
|
|
47
47
|
},
|
|
48
48
|
"jest": {
|
|
49
49
|
"preset": "react-native",
|
package/src/constants.js
CHANGED
|
@@ -27,6 +27,7 @@ export function generatePrefixes(options) {
|
|
|
27
27
|
gett: 'gett://',
|
|
28
28
|
navermap: options.naverCallerName ? 'nmap://' : 'nmap-disabled://',
|
|
29
29
|
dgis: 'dgis://2gis.ru/',
|
|
30
|
+
liftago: 'lftgpas://',
|
|
30
31
|
};
|
|
31
32
|
}
|
|
32
33
|
|
|
@@ -57,6 +58,7 @@ export function generateTitles(titles) {
|
|
|
57
58
|
gett: 'Gett',
|
|
58
59
|
navermap: 'Naver Map',
|
|
59
60
|
dgis: '2GIS',
|
|
61
|
+
liftago: 'Liftago',
|
|
60
62
|
...(titles || {}),
|
|
61
63
|
};
|
|
62
64
|
}
|
|
@@ -81,6 +83,7 @@ export const icons = {
|
|
|
81
83
|
gett: require('./images/gett.png'),
|
|
82
84
|
navermap: require('./images/naver-map.png'),
|
|
83
85
|
dgis: require('./images/dgis.png'),
|
|
86
|
+
liftago: require('./images/liftago.png'),
|
|
84
87
|
};
|
|
85
88
|
|
|
86
89
|
export const appKeys = Object.keys(icons);
|
|
Binary file
|
package/src/index.js
CHANGED
|
@@ -17,7 +17,7 @@ import {askAppChoice, checkOptions} from './utils';
|
|
|
17
17
|
* sourceLongitude: number | undefined | null,
|
|
18
18
|
* alwaysIncludeGoogle: boolean | undefined | null,
|
|
19
19
|
* googleForceLatLon: boolean | undefined | null,
|
|
20
|
-
* googlePlaceId: number | undefined | null,
|
|
20
|
+
* googlePlaceId: number | string | undefined | null,
|
|
21
21
|
* title: string | undefined | null,
|
|
22
22
|
* app: string | undefined | null
|
|
23
23
|
* dialogTitle: string | undefined | null
|
|
@@ -26,6 +26,7 @@ import {askAppChoice, checkOptions} from './utils';
|
|
|
26
26
|
* appsWhiteList: array | undefined | null
|
|
27
27
|
* appTitles: object | undefined | null
|
|
28
28
|
* naverCallerName: string | undefined
|
|
29
|
+
* directionsMode: 'car' | 'walk' | 'public-transport' | 'bike' | undefined
|
|
29
30
|
* }} options
|
|
30
31
|
*/
|
|
31
32
|
export async function showLocation(options) {
|
|
@@ -80,29 +81,83 @@ export async function showLocation(options) {
|
|
|
80
81
|
|
|
81
82
|
let url = null;
|
|
82
83
|
|
|
84
|
+
const getDirectionsModeAppleMaps = () => {
|
|
85
|
+
switch (options.directionsMode) {
|
|
86
|
+
case 'car':
|
|
87
|
+
return 'd';
|
|
88
|
+
|
|
89
|
+
case 'walk':
|
|
90
|
+
return 'w';
|
|
91
|
+
|
|
92
|
+
case 'public-transport':
|
|
93
|
+
return 'r';
|
|
94
|
+
|
|
95
|
+
default:
|
|
96
|
+
return undefined;
|
|
97
|
+
}
|
|
98
|
+
};
|
|
99
|
+
|
|
100
|
+
const getDirectionsModeGoogleMaps = () => {
|
|
101
|
+
switch (options.directionsMode) {
|
|
102
|
+
case 'car':
|
|
103
|
+
return 'driving';
|
|
104
|
+
|
|
105
|
+
case 'walk':
|
|
106
|
+
return 'walking';
|
|
107
|
+
|
|
108
|
+
case 'public-transport':
|
|
109
|
+
return 'transit';
|
|
110
|
+
|
|
111
|
+
case 'bike':
|
|
112
|
+
return 'bicycling';
|
|
113
|
+
|
|
114
|
+
default:
|
|
115
|
+
return undefined;
|
|
116
|
+
}
|
|
117
|
+
};
|
|
118
|
+
|
|
83
119
|
switch (app) {
|
|
84
120
|
case 'apple-maps':
|
|
121
|
+
const appleDirectionMode = getDirectionsModeAppleMaps();
|
|
85
122
|
url = prefixes['apple-maps'];
|
|
86
123
|
url = useSourceDestiny
|
|
87
124
|
? `${url}?saddr=${sourceLatLng}&daddr=${latlng}`
|
|
88
125
|
: `${url}?ll=${latlng}`;
|
|
89
126
|
url += `&q=${title ? encodedTitle : 'Location'}`;
|
|
127
|
+
url += appleDirectionMode ? `&dirflg=${appleDirectionMode}` : '';
|
|
90
128
|
break;
|
|
91
129
|
case 'google-maps':
|
|
130
|
+
const googleDirectionMode = getDirectionsModeGoogleMaps();
|
|
92
131
|
// Always using universal URL instead of URI scheme since the latter doesn't support all parameters (#155)
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
url
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
132
|
+
if (useSourceDestiny || options.directionsMode) {
|
|
133
|
+
// Use "dir" as this will open up directions
|
|
134
|
+
url = 'https://www.google.com/maps/dir/?api=1';
|
|
135
|
+
url += sourceLatLng ? `&origin=${sourceLatLng}` : '';
|
|
136
|
+
if (!options.googleForceLatLon && title) {
|
|
137
|
+
url += `&destination=${encodedTitle}`;
|
|
138
|
+
} else {
|
|
139
|
+
url += `&destination=${latlng}`;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
url += options.googlePlaceId
|
|
143
|
+
? `&destination_place_id=${options.googlePlaceId}`
|
|
144
|
+
: '';
|
|
145
|
+
|
|
146
|
+
url += googleDirectionMode ? `&travelmode=${googleDirectionMode}` : '';
|
|
99
147
|
} else {
|
|
100
|
-
|
|
148
|
+
// Use "search" as this will open up a single marker
|
|
149
|
+
url = 'https://www.google.com/maps/search/?api=1';
|
|
150
|
+
|
|
151
|
+
if (!options.googleForceLatLon && title) {
|
|
152
|
+
url += `&query=${encodedTitle}`;
|
|
153
|
+
} else {
|
|
154
|
+
url += `&query=${latlng}`;
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
url += options.googlePlaceId
|
|
158
|
+
? `&query_place_id=${options.googlePlaceId}`
|
|
159
|
+
: '';
|
|
101
160
|
}
|
|
102
|
-
|
|
103
|
-
url += options.googlePlaceId
|
|
104
|
-
? `&destination_place_id=${options.googlePlaceId}`
|
|
105
|
-
: '';
|
|
106
161
|
break;
|
|
107
162
|
case 'citymapper':
|
|
108
163
|
url = `${prefixes.citymapper}directions?endcoord=${latlng}`;
|
|
@@ -219,6 +274,18 @@ export async function showLocation(options) {
|
|
|
219
274
|
if (useSourceDestiny) {
|
|
220
275
|
url = `${prefixes.dgis}routeSearch/to/${lng},${lat}/from/${sourceLng},${sourceLat}/go`;
|
|
221
276
|
}
|
|
277
|
+
break;
|
|
278
|
+
case 'liftago':
|
|
279
|
+
url = `${prefixes.liftago}order?destinationLat=${lat}&destinationLon=${lng}`;
|
|
280
|
+
|
|
281
|
+
if (title) {
|
|
282
|
+
url += `&destinationName=${encodedTitle}`;
|
|
283
|
+
}
|
|
284
|
+
|
|
285
|
+
if (useSourceDestiny) {
|
|
286
|
+
url += `&pickupLat=${sourceLat}&pickupLon=${sourceLng}`;
|
|
287
|
+
}
|
|
288
|
+
break;
|
|
222
289
|
}
|
|
223
290
|
|
|
224
291
|
if (url) {
|