Deep linking con React Native

Esta guía está enfocada en apps creadas con React Native CLI (no Expo). Deep linking permite que tu app se abra desde un enlace externo, por ejemplo cuando un usuario hace clic en un link especial desde un navegador o correo electrónico.

Un caso de uso común es el flujo de autorización de APIs como Uber, donde después de que el usuario autoriza tu app en el navegador, Uber redirige a tu app usando un deep link con el código de autorización.

Paso 1: Configura AppDelegate.m (iOS)

Agrega el siguiente código a tu archivo AppDelegate.m para manejar los deep links:

#import <React/RCTLinkingManager.h>

- (BOOL)application:(UIApplication *)application
   openURL:(NSURL *)url
   options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options
{
  return [RCTLinkingManager application:application openURL:url options:options];
}

- (BOOL)application:(UIApplication *)application
   continueUserActivity:(nonnull NSUserActivity *)userActivity
   restorationHandler:(nonnull void (^)(NSArray<id<UIUserActivityRestoring>> * _Nullable))restorationHandler
{
  return [RCTLinkingManager application:application
                   continueUserActivity:userActivity
                     restorationHandler:restorationHandler];
}

Paso 2: Configura Info.plist (iOS)

Agrega el URL scheme de tu app en Info.plist. Esto le dice a iOS que tu app puede abrir URLs con el esquema especificado:

<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>myapp</string>
    </array>
  </dict>
</array>

Paso 3: Maneja el deep link en JavaScript

En tu App.js, usa el módulo Linking de React Native para escuchar los deep links:

import { Linking } from 'react-native';

componentDidMount() {
  Linking.addEventListener('url', this.handleOpenURL);
  Linking.getInitialURL().then((url) => {
    if (url) {
      this.handleOpenURL({ url });
    }
  });
}

componentWillUnmount() {
  Linking.removeEventListener('url', this.handleOpenURL);
}

handleOpenURL = (event) => {
  const url = event.url;
  // Parse the URL and navigate accordingly
  console.log('Deep link URL:', url);
}

Demo