tschoffelen / react-native-map-link Goto Github PK

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.

The devDependency babel-eslint was updated from 10.0.2 to 10.0.3.

🚨 View failing branch.

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.

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.

Here's my implementation:

Hoping for your assistance on this.

The devDependency eslint-plugin-node was updated from 9.1.0 to 9.2.0.

🚨 View failing branch.

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.

Your Greenkeeper Bot 🌴

• Google Maps and Waze working as expected but Apple Maps doesn't pick street number, It just picks Street Name, City, State and Postal Code

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]

After updating to React Native 0.57 there is a warning about require cycle:

I can add this warning to warning ignores as a workaround.

Hello,

I just used the library and it works fine on Android.
On IOS also it works but when the modal is open i only see apple maps in the app proposal even if i update info.plist file by adding the apps i want, i still dont get the proposal working.
N.B: tested on IOS 11 and 12 / RN 0.58.3

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.

The devDependency eslint-plugin-react was updated from 7.14.0 to 7.14.1.

🚨 View failing branch.

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.

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.

OpenMapLocation.js.txt

Here the sample result on iOS

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

fixed issue in v1.0.6

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?

The devDependency eslint-config-standard was updated from 14.0.1 to 14.1.0.

🚨 View failing branch.

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.

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