tschoffelen / react-native-map-link Goto Github PK
View Code? Open in Web Editor NEW🗺 Open the map app of the user's choice.
License: MIT License
🗺 Open the map app of the user's choice.
License: MIT License
This issue is an extension/proposal for #37
After a deeper investigation I found out that system's popup shows only when the map url is https://maps.google.com/...
. If we use https://www.google.com/maps/dir/
it's still recognized with google maps yet not recognized by third-party apps which eliminates that annoying popup.
Can you make deeper config options/googlemap-specific option to solve this issue? (or I can submit a PR with it) @tschoffelen
🚨 You need to enable Continuous Integration on Greenkeeper branches of this repository. 🚨
To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.
Since we didn’t receive a CI status on the greenkeeper/initial
branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.
If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/
.
Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please click the 'fix repo' button on account.greenkeeper.io.
10.0.2
to 10.0.3
.This version is covered by your current version range and after updating it in your project the build failed.
babel-eslint is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
Hi,
First, thanks a lot for this awesome work!
I was taking a look to the docs and code and i can't find a way to show only the apps that i want in the Popup Component.
IE: Maybe i have google maps installed but i don't want to show Google Maps as an option.
Is that possible?
Regards
if you enter any string to 'app' option, showLocation with fire unhandled promise rejection, because you can't use Array.find with strings https://github.com/includable/react-native-map-link/blob/master/index.js#L141
Hi,
the showLocation()
function stopped working for me, even when testing it on a real iOS device and not the simulator. So I went through the code of the latest version (2.4.1
at the time of writing this), and noticed this in src/utils.js
:
export const getAvailableApps = async (prefixes) => {
let availableApps = []
for (let app in prefixes) { // prefixes is always undefined -> no apps will be returned
if (!prefixes.hasOwnProperty(app)) {
continue
}
let avail = await isAppInstalled(app, prefixes)
if (avail) {
availableApps.push(app)
}
}
return availableApps
}
// ...
export function askAppChoice({ dialogTitle, dialogMessage, cancelText, appsWhiteList }) {
return new Promise(async (resolve) => {
let availableApps = await getAvailableApps() // shouldn't this be called with a parameter?
// ...
})
}
Why is the prefixes
parameter not handed to the getAvailableApps ()
function? Or, differently asked, can v2.4.1 work for anybody at all?
Thanks for some infos.
Great package. Can you add support for Grab? www.grab.com
Hi, what do you think about to have an option to remember last app selection?
I mean when the user selects a navigation app, give them another option to remember the last selected app for future interactions.
Makes sense or maybe is something which not correspond to the scope of this library?
With Babel 7 on 0.56.0 react-native-modal which is a dependency of this package, fails to build. So we need to update react-native-modal to latest version.
The quickfix for react-native-modal is in this commit: react-native-modal/react-native-modal@e2618cb
The task of the issue of react-native-modal can be found in this issue: facebook/react-native#20038
Best,
Y
When I open with Google maps on Android, an other popup is opening, asking the user with which app to open this link...
Google Maps an Waze working Fine, but when Uber is the choice just open the app.
Expected Behavior:
Open Uber and fill the input with the adress, just leaving to the user the final step.
Hi,
I used react-native-map-link where I just pass the origin and destination longitude and latitude. Everthing is ok in Android but I encountered an issue in IOS where it shows the modal of the available Map applications but it suddenly disappears in 1-2 second then the app hangs.
Hoping for your assistance on this.
9.1.0
to 9.2.0
.This version is covered by your current version range and after updating it in your project the build failed.
eslint-plugin-node is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
The new version differs by 9 commits.
9fbdaec
🔖 9.2.0
c1d5dbf
✨ add no-callback-literal rule (#179)
72de3a3
🐛 vulnerability fix: update eslint-utils to ^1.4.2 & eslint-plugin-es to ^1.4.1 (fixes #180) (#183)
cfc6352
🎨 fix typos in function names (#177)
b757c3e
⚒ improve azure-pipelines.yml (#173)
a85d541
⚒ trivial fix
88829af
⚒ Update azure-pipelines.yml for codecov (#170)
5b3f815
🐛 fix for ESLint 6 (#169)
fe73872
⚒ Switch to Azure Pipelines (#168)
See the full diff
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
I'm trying it out and adding the title with the name of the place but in Google maps it shows as unnamed location, yet if I open using Uber it works well.
I think it would be better if sourceLatitude
& sourceLongitude
is not defined, capture the current location automatically. It would be a good feature for this package. Thanks in advance 🙏🏻
Sorry for my english in advance.
I'm testing with the example code and works perfectly in all platforms (i test just in my android device) excepts in G-Maps. The map never shows the location pointer and just put the loading icon in the search bar.
I'm using a Moto G5 plus - Android 8.1.0. [email protected]
Currently, the application titles in the app selection menu are displayed are based on constants. It would be nice if we could override those. For example, using internationalization we could have the apps name translated.
I am suggesting something along the lines of:
const app = await showLocation({
appTitles: [
'apple-maps': 'Plans',
'google-maps': 'Cartes Google',
]
});
Then this config could be merged with the title constant to generate the menu.
If this is something we want as a new feature, I am willing to implement it and open a PR.
Let me know.
Hi there - it would be very helpful if there were a changelog for this package. In particular, knowing if there are breaking changes between v1.X.x and v2.0.x would be great!
Hi,
I am looking for a package that open the default map application of the user.
I saw this package and it seem nice, but I noticed it receive a location by latitude and longitude.
Is there a way to send the default map application the location as a string - for example:
St foo 100, Bar
(bar is the country).
and this location/address string will be placed in the search box of the application?
Hi
Thanks for this plug-in - working nice
I'm building the app using expo and react native.
When I use the function showLocation, although I have put three apps in the whitelist options (google maps, apple maps and uber), it opens directly in apple maps. I've tried both in simulator and expo app on a device
According to the Basic usage
section from REDME, dialogTitle
, dialogMessage
and cancelText
are optional. But after update to "^2.1.2" they don't seem anymore:
index.d.ts
interface Options {
latitude: number | string
longitude: number | string
sourceLatitude?: number
sourceLongitude?: number
googleForceLatLon?: boolean
googlePlaceId?: number
title?: string
app?: string
dialogTitle: string
dialogMessage: string
cancelText: string
appsWhiteList?: string[]
}
android/app/build/intermediates/res/merged/release/drawable-xhdpi/node_modules_reactnativemaplink_as
sets_images_yandex.png: error: uncompiled PNG file passed as argument. Must be compiled first into .flat file..
error: failed parsing overlays.
7.14.0
to 7.14.1
.This version is covered by your current version range and after updating it in your project the build failed.
eslint-plugin-react is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
The new version differs by 3 commits.
62255af
Update CHANGELOG and bump version
655eb01
Merge pull request #2320 from golopot/issue-2319
9639d82
[Fix] prop-types
: fix crash on multiple destructuring
See the full diff
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
I created a fork and am testing the fix on my repo but the directory format is different than yours when I add it to my project. I noticed you have a src file in the repo but when I add it to my project the src becomes the root. But in my fork when I try to add it to my project its still react-native-map-link/src.
Any help on what I am doing wrong? I didnt see any scripts in package.json..
I'm using react-native-map-link
1.1.1 with CRNA and testing using the Expo Client on my iPhone 7 plus on 11.3. I definitely have Google Maps installed but it doesn't show up in the askAppChoice()
list. Any clue why?
Is that expected? Is it possible to have the FROM address too, and not only the destiny address?
As a developer I want to add support of Yandex Maps.
Doesn't seems to pickup the latitude
and longitude
on Android
It opens the google map with Location
as a search keyword.
If we specify a title
then Google map is opening searching for this title, however still no pin corresponding to the latitude and longitude.
It's working fine on iOS
I'm using typescript so adding the definitions might be useful for those who use it as well.
I created them for my project, feel free to add them to the repo:
declare module "react-native-map-link" {
import * as React from 'react';
import { ViewStyle, StyleProp, ImageStyle, TextStyle } from 'react-native';
interface Options {
latitude: number | string
longitude: number | string
sourceLatitude?: number
sourceLongitude?: number
googleForceLatLon?: boolean
googlePlaceId?: number
title?: string
app?: string
dialogTitle: string
dialogMessage: string
cancelText: string
appsWhiteList?: string[]
}
interface PopupStyleProp {
container?: StyleProp<ViewStyle>,
itemContainer?: StyleProp<ViewStyle>,
image?: StyleProp<ImageStyle>,
itemText?: StyleProp<TextStyle>,
headerContainer?: StyleProp<ViewStyle>,
titleText?: StyleProp<TextStyle>,
subtitleText?: StyleProp<TextStyle>,
cancelButtonContainer?: StyleProp<ViewStyle>,
cancelButtonText?: StyleProp<TextStyle>,
separatorStyle?: StyleProp<ViewStyle>,
activityIndicatorContainer?: StyleProp<ViewStyle>
}
interface PopupProps {
isVisible: boolean,
showHeader?: boolean,
onCancelPressed: () => void,
onBackButtonPressed: () => void,
onAppPressed: () => void,
style?: PopupStyleProp,
modalProps?: object,
options: Options,
appsWhiteList: string[]
}
export function showLocation (options: Options): Promise<void>;
export class Popup extends React.Component<PopupProps>{}
}
Hi, is possible (with this) to open maps writing street and city? Instead of lat and long
Hi guys. I ejected an expo project to react-native and the popup doesn't work anymore. I upgraded to @2.4.3 but it didn't fix it for me. I must say that on expo, in order to make it work, i needed to add permission READ_PHONE_STATE. I added this to Manifest but it still doesn't work :
<uses-permission android:name="android.permission.READ_PHONE_STATE"/>
Any ideas? Thanks in advance
We installed the package and the UI for the popup looks fantastic when opened, however when we click on any of the mapping options (apple/google/uber/lyft/waze) nothing happens, the modal just disappears and the following warning is generated in the console:
Possible Unhandled Promise Rejection (id: 1):
TypeError: Cannot read property 'indexOf' of undefined
TypeError: Cannot read property 'indexOf' of undefined
at checkOptions (blob:file:///722dfb5c-3809-4aaa-bd85-0cea3ed24ad4:110095:59)
at showLocation$ (blob:file:///722dfb5c-3809-4aaa-bd85-0cea3ed24ad4:106794:37)
at tryCatch (blob:file:///722dfb5c-3809-4aaa-bd85-0cea3ed24ad4:18420:19)
at Generator.invoke [as _invoke] (blob:file:///722dfb5c-3809-4aaa-bd85-0cea3ed24ad4:18593:24)
at Generator.prototype.(anonymous function) [as next] (blob:file:///722dfb5c-3809-4aaa-bd85-0cea3ed24ad4:18463:23)
at tryCatch (blob:file:///722dfb5c-3809-4aaa-bd85-0cea3ed24ad4:18420:19)
at invoke (blob:file:///722dfb5c-3809-4aaa-bd85-0cea3ed24ad4:18496:22)
at blob:file:///722dfb5c-3809-4aaa-bd85-0cea3ed24ad4:18524:13
at tryCallTwo (blob:file:///722dfb5c-3809-4aaa-bd85-0cea3ed24ad4:5193:7)
at doResolve (blob:file:///722dfb5c-3809-4aaa-bd85-0cea3ed24ad4:5357:15)
Are there any additional setup steps not included in the README such as linking or anything? I put the required fields in on the Info.plist but there seems to be no other installation steps. Thanks, looks like a great package!
Our implementation is as follows:
<Popup
isVisible={this.state.navigationDirectionsPopupVisible}
onCancelPressed={() => this.setState({ navigationDirectionsPopupVisible: false })}
onAppPressed={() => this.setState({ navigationDirectionsPopupVisible: false })}
onBackButtonPressed={() => this.setState({ navigationDirectionsPopupVisible: false })}
modalProps={{
// you can put all react-native-modal props inside.
animationIn: 'slideInUp'
}}
options={{
latitude: 38.8976763,
longitude: -77.0387185,
title: 'The White House', // optional
dialogTitle: 'Get Directions', // optional (default: 'Open in Maps')
dialogMessage: 'Choose your prefered application', // optional (default: 'What app would you like to use?')
cancelText: 'Nevermind' // optional (default: 'Cancel')
}}
style={
{
/* Optional: you can override default style by passing your values. */
}
}
/>
Additionally the showLocation
method does nothing. When we call it no actionsheet pops up like the documentation states it will.
OS: iOS 11
Device: iPhone X
React: v0.55
UPDATE:
I dug through your code and noticed that upon tapping the following is called:
_onAppPressed = ({app}) => {
showLocation({...this.props.options, app})
this.props.onAppPressed()
This makes sense that nothing is happening since the showLocation
does not work for me directly either. The problem lies within showLocation
UPDATE 2:
Diving into your code it looks like it's an error in your utils.js
file on line 121 apps.indexOf(options.app) < 0
- I have confirmed that for whatever reason apps is undefined so it silently fails and nothing happens. Please advise where we should go from here. If I wrap this in a try/catch the mapping applications open fine but curious why this is happening.
UPDATE 3:
Ok, it's importing { apps }
from constants/index.js
however there is no apps
exported from constants/index.js.... so looks just like coder error and a lack of tests. I have forked to my own repo for fix.
When I added yet another prefix for the Google Maps (just an example) Linking.canOpenURL returns true. Otherwise, it is false. Is there any option to provide the list prefixes as a parameter to Popup? Or how otherwise should I solve it?
I work on an Expo based React Native app.
export const prefixes = {
...
'google-maps': isIOS ? 'comgooglemaps://' : 'https://maps.google.com/',
'google-maps': 'https://maps.google.com/',
...
}
Btw. great job on that library!
Hi... I am newbie in React Native.
I follow this example https://github.com/leanmotherfuckers/react-native-map-link/blob/master/docs/popup.md
Everything is working well on iOS, but not working on Android.
What is wrong here ? (Please look my attachment file)
The logic is
I have a component named "OpenMapLocation". This component have 2 props, named 'address' and 'title'. Then with Geocoder (react-native-geocoding), I can get LatLong of the address.
When I click the address, the popup will be displayed. It is working on iOS.
BUT NOT on Android.
Could you help me please? :)
Hey @tschoffelen I am trying to understand why this is the opposite:
'apple-maps': isIOS ? 'http://maps.apple.com/' : 'applemaps://',
'google-maps': isIOS ? 'comgooglemaps://' : 'https://maps.google.com/',
Why in IOS we dont use applemaps:// ?
Reference: 2daad68
npm latests version is 1.0.5.
In that version this error stills happens:
Unhandled promise rejection: TypeError: Array.prototype.find callback must be a function
Hi, is it possible to add another param to the showLocation function to customize the navigation method when we open the app? For example, when I enter a source and destination I also want the option to specify the navigation method as walking initially or driving/cycling for google maps.
Thanks!
Love the code this is great and works fantastic for all the supplies i use apart from Google maps. When it tries to use google maps on an Iphone it just opens google maps but doesn't go to the supplied lat and long it seems to be looking more for what is passed in the title prop rather than using the supplied coordinates. My code is the same as example code except i'm passing different coorordinates which work on Apple Maps, Waze etc. Any ideas any one else with this problem?
"react-native": "^0.49.3", "react": "^16.0.0-beta.5", "react-native-map-link": "^1.0.5",
First of all I want to say thank you for open-sourcing this library. It is well-done and super useful.
I want to revisit issue #39 since I am encountering the same issue. It successfully detects Waze, but not Google Maps.
I too am using Expo and my app.json file includes:
"ios": {
"infoPlist": {
"LSApplicationQueriesSchemes": [
"comgooglemaps",
"apple-maps",
"citymapper",
"waze"
]
}
}
Just like in that other issue, I editing contacts.js
in the following way:
export const prefixes = {
...
- 'google-maps': isIOS ? 'comgooglemaps://' : 'https://maps.google.com/',
+ 'google-maps': 'https://maps.google.com/',
...
}
When I do this, the Google Maps app is detected and it opens as I would expect. But without this, it never appears on the list. In #39, it says that 'comgooglemaps' is more reliable, but this does not seem to be the case.
Thanks.
Thanks for this awesome module! I needed to pop open the map with the to/from address populated. Is this possible? (if geolocation is disabled i was planning on leaving the from blank so they can fill it in)
Are the only apps that will open the ones listed on the readme page?
For example, I don't see "careem" listed - could I find the right id for careem and add it?
14.0.1
to 14.1.0
.This version is covered by your current version range and after updating it in your project the build failed.
eslint-config-standard is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
Hi,
ActionSheet not opening in ios.
When I debug the code I found that Linking.canOpenUrl() method returns false but the apps are installed in mobile(ios) and defined the schemas in LSApplicationQueriesSchmes. Please can you give me the suggestion how to do?
Thanks in Advance
Hey! I can contribute on your project with making logo design. If you interested I can show my portfolio. I am waiting your feedback, have a nice day!
Best Regards
Baran Pirinçal
Graphic Designer
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.