MENU


Linking

The Linking API allows you to interact with incoming and outgoing app links.

MethodsaddEventListener()canOpenURL()getInitialURL()openSettings()openURL()removeEventListener()sendIntent()

1. Open Links and Deep Links (Universal Links)


RESETRUNFULL
import React, { useCallback } from "react";import { Alert, Button, Linking, StyleSheet, View } from "react-native";const supportedURL = "https://google.com";const unsupportedURL = "slack://open?team=123456";const OpenURLButton = ({ url, children }) => {
  const handlePress = useCallback(async () => {    // Checking if the link is supported for links with custom URL scheme.
    const supported = await Linking.canOpenURL(url);
    if (supported) {      // Opening the link with some app, if the URL scheme is "http" the web       // link should be opened by some browser in the mobile
      await Linking.openURL(url);
    } else Alert.alert(`Don't know how to open this URL: ${url}`);
  }, [url]);
  return <Button title={children} onPress={handlePress} />;};const App = () => {
  return (
    <View style={styles.container}>
      <OpenURLButton url={supportedURL}>Open Supported URL
      </OpenURLButton>
      <OpenURLButton url={unsupportedURL}>Open Unsupported URL
      </OpenURLButton>
    </View>
  );};const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: "center", alignItems: "center" },});export default App;

2. Open Custom Settings


RESETRUNFULL
import React, { useCallback } from "react";import { Button, Linking, StyleSheet, View } from "react-native";const OpenSettingsButton = ({ children }) => {
  const handlePress = useCallback(async () => {    // Open the custom settings if the app has one
    await Linking.openSettings();
  }, []);
  return <Button title={children} onPress={handlePress} />;};const App = () => {
  return (
    <View style={styles.container}>
      <OpenSettingsButton>Open Settings</OpenSettingsButton>
    </View>
  );};const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: "center", alignItems: "center" },});export default App;

3. Get the Deep Link


RESETRUNFULL
import React, { useState, useEffect } from "react";import { Linking, StyleSheet, Text, View } from "react-native";const useMount = func => useEffect(() => func(), []);const useInitialURL = () => {
  const [url, setUrl] = useState(null);
  const [processing, setProcessing] = useState(true);
  useMount(() => {
    const getUrlAsync = async () => {      // Get the deep link used to open the app
      const initialUrl = await Linking.getInitialURL();      // The setTimeout is just for testing purpose
      setTimeout(() => {
        setUrl(initialUrl);
        setProcessing(false);
      }, 1000);
    };
    getUrlAsync();
  });
  return { url, processing };};const App = () => {
  const { url: initialUrl, processing } = useInitialURL();
  return (
    <View style={styles.container}>
      <Text>
        {processing
          ? `Processing the initial url from a deep link`
          : `The deep link is: ${initialUrl || "None"}`}
      </Text>
    </View>
  );};const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: "center", alignItems: "center" },});export default App;

4. Send Intents (Android)


RESETRUNFULL
import React, { useCallback } from "react";import { Alert, Button, Linking, StyleSheet, View } from "react-native";const SendIntentButton = ({ action, extras, children }) => {
  const handlePress = useCallback(async () => {
    try { await Linking.sendIntent(action, extras);
    } catch (e) { Alert.alert(e.message); }
  }, [action, extras]);
  return <Button title={children} onPress={handlePress} />;};const App = () => {
  return (
    <View style={styles.container}>
      <SendIntentButton action= "android.intent.action.POWER_USAGE_SUMMARY">
        Power Usage Summary
      </SendIntentButton>
      <SendIntentButton
           action="android.settings.APP_NOTIFICATION_SETTINGS"
        extras={[{ "android.provider.extra.APP_PACKAGE": "com.facebook.katana" }]}>
        App Notification Settings
      </SendIntentButton>
    </View>
  );};const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: "center", alignItems: "center" },});export default App;