Linking Map in React Native

Question

I am using RN 0.20 for iOS. I want to make a link where if you click that link, it will redirect you to the Map apps available in the phone with its coordinate. This is what I have done using Linking component.

redirectToMap() {
    Linking.canOpenURL('geo:37.484847,-122.148386').then(supported => {
        if (supported) {
            Linking.openURL('geo:37.484847,-122.148386');
        } else {
            console.log('Don\'t know how to go');
        }
    }).catch(err => console.error('An error occurred', err));
}

But it keeps giving me 'Don't know how to go'. However, I see from its documentation in https://facebook.github.io/react-native/docs/linking.html that it is doable to use geo: to link to map.

Answer 1

Use correct URL scheme

Have a look at the official documentation of iOS. To open maps, use the suggested scheme:

http://maps.apple.com/?ll=<lat>,<long>

Answer 2

You can use react-native-open-maps package

1. Install the repository $ npm install --save react-native-open-maps

2. Add an import to the top of your file import openMap from 'react-native-open-maps'

3. Put it all together

import React, { Component } from 'react'
import { Button } from 'react-native'
import openMap from 'react-native-open-maps'

export default class App extends Component {
  _goToYosemite() {
    openMap({ latitude: 37.865101, longitude: -119.538330 });
  }

render() {
    return (
      <Button
        color={'#bdc3c7'}
        onPress={this._goToYosemite}
        title="Click To Open Maps 🗺" />
    );
  }
}