Linking Native API
Introduction#
Linking API enables you to both send and receive links between applications. For example, opening the Phone app with number dialed in or opening the Google Maps and starting a navigation to a chosen destination. You can also utilise Linking to make your app able to respond to links opening it from other applications.
To use Linking you need to first import it from react-native
import {Linking} from 'react-native'
Outgoing Links
To open a link call openURL.
Linking.openURL(url)
.catch(err => console.error('An error occurred ', err))The preferred method is to check if any installed app can handle a given URL beforehand.
Linking.canOpenURL(url)
.then(supported => {
if (!supported) {
console.log('Unsupported URL: ' + url)
} else {
return Linking.openURL(url)
}
}).catch(err => console.error('An error occurred ', err))URI Schemes
| Target App | Example | Reference |
|---|---|---|
| Web Browser | https://stackoverflow.com |
|
| Phone | tel:1-408-555-5555 |
Apple |
mailto:email@example.com |
Apple | |
| SMS | sms:1-408-555-1212 |
Apple |
| Apple Maps | https://maps.apple.com/?ll=37.484847,-122.148386 |
Apple |
| Google Maps | geo:37.7749,-122.4194 |
|
| iTunes | See iTunes Link Maker | Apple |
fb://profile |
Stack Overflow | |
| YouTube | https://www.youtube.com/v/oHg5SJYRHA0 |
Apple |
| Facetime | facetime://user@example.com |
Apple |
| iOS Calendar | calshow:514300000 [1] |
iPhoneDevWiki |
[1] Opens the calendar at the stated number of seconds since 1. 1. 2001 (UTC?). For some reason this API is undocumented by Apple.
Incomming Links
You can detect when your app is launched from an external URL.
componentDidMount() {
const url = Linking.getInitialURL()
.then((url) => {
if (url) {
console.log('Initial url is: ' + url)
}
}).catch(err => console.error('An error occurred ', err))
}To enable this on iOS Link RCTLinking to your project.
To enable this on Android, follow these steps.