Implementar enlaces profundos Deep Links o enlaces Universales con Expo en React Native

Tiempo de lectura: 4 minutos

Los enlaces profundos nos permiten abrir secciones de nuestra APP utilizando un link o url.

Primero vamos a implementar los deep links en Android. Para ello:

Vamos a app.json y añadimos:

{
  "expo": {
    "android": {
      "intentFilters": [
        {
          "action": "VIEW",
          "autoVerify": true,
          "data": [
            {
              "scheme": "https",
              "host": "myapp.com",
              "pathPrefix": "/main"
            }
          ],
          "category": ["BROWSABLE", "DEFAULT"]
        }
      ]
    }
  }
}

Suponiendo que la url que queremos abrir es https://myapp.com/main.

Para obtener el contenido de la URL abierta añadimos dentro de nuestra pantalla de navegación o pantalla principal:

 import { Linking } from 'react-native';

useEffect(() => {
    // Agrega un listener para manejar los enlaces profundos
    const handleDeepLink = async () => {
      const initialUrl = await Linking.getInitialURL();
      console.log('Initial URL:', initialUrl);
    };

    // El método addEventListener devuelve una función que puedes usar para eliminar el listener
    const removeListener = Linking.addEventListener('url', handleDeepLink);

    // Limpia el listener al desmontar el componente
    return () => {
      removeListener.remove();
    };
  }, []);

Para manejar la apertura de los links y redireccionar a las screens correctas, tendremos que implementar LinkingOptions dentro de nuestro NavigationContainer:

const linking: LinkingOptions<RootParamList> = {
    prefixes: ['https://myapp.com'],
    config: {
      screens: {
        Home: 'main/:codigo',
      },
    },
  };

  return (
    <View style={styles.container}>
      {continuarCarga && (
        <NavigationContainer linking={linking} >

En este caso supongo que tenemos una pantalla llamada Home que puede recibir un código y queremos abrirla y además pasarle el código (si no tenemos código podemos quitar esa parte y dejar solo main/).

Esta configuración obtendrá el filtro del prefijo directamente y lo compartirá con las screens indicadas.

Se ha añadido dentro de linking={linking} en el NavigationContainer.

Es muy importante que este código esté dentro del NavigationContainer de nuestra APP para que nos permita utilizarlo.

Para obtenerlo en la siguiente pantalla, simplemente indicamos el parametro y lo obtendremos:

type RouteParams = {
  [key: string]: {
    codigo?: string;
  };
};

const HomeScreen = () => {
  const route = useRoute<RouteProp<RouteParams, 'Home'>>();
  const codigo= route.params.codigo;
  console.log(codigo)

El link que estamos abriendo es algo cómo:

https://myapp.com/12345

Android

Ahora tenemos que ir a Android/app/src/AndroidManifest.xml

Y modificamos el filter con este:

<intent-filter android:autoVerify="true" data-generated="true">
        <action android:name="android.intent.action.VIEW"/>
        <data android:scheme="https" android:host="myapp.com" android:pathPrefix="/main"/>
        <category android:name="android.intent.category.BROWSABLE"/>
        <category android:name="android.intent.category.DEFAULT"/>
      </intent-filter>

De esta forma nos abrirá los links.

Si tenemos problemas con abrir los links en Android, es posible que tengamos que verificar el dominio, para ello tenemos que ir a nuestro dominio, crear una carpeta llamada .well-known y dentro un archivo llamando assetlinks.json

[
  {
    "relation": ["delegate_permission/common.handle_all_urls"],
    "target": {
      "namespace": "android_app",
      "package_name": "com.myapp",
      "sha256_cert_fingerprints":
     ["AB:CD:EF:GH:00:00:00..."]
 
    }
  }
]

Tendremos que añadir este archivo, indicando la firma sha256 del certificado o certificados con los que se ha firmado la APP.

Si no sabes cómo obtener la firma del certificado, te lo indico aquí:

Obtener Huella digital del certificado SHA-1 para debug.keystore en Android (clave de firma por defecto de Android Studio)

iOS

Para configurar deep links en nuesta APP de iOS tendremos que hacer lo siguiente:

Activar links asociados.

Vamos a la consola de Apple developer.

Abrimos: Certificados, identificadores y perfiles > Identificadores

Ahora busca tu APP y le pulsas.

Selecciona dominios asociados (Associated Domains):

Ahora pulsas en guardar, te indicará que el certificado de aprovisionamiento deberá renovarse.

Ahora tenemos que abrir la app con Xcode:

Ahora elegimos + Capability y añadimos Associated Domains

Y añadimos nuestras urls de esta forma:

applinks:myapp.com

Y sit eiene www. podemos indicar

applinks:myapp.com

Verificar dominio para la cuenta Apple.

El dominio asociado debe estar respaldado por un archivo llamado apple-app-site-association (AASA) que debe alojarse en el servidor web. Este archivo define las rutas y las apps que soportan el deep linking.

Crea un archivo apple-app-site-association con el siguiente contenido:

{
  "applinks": {
    "apps": [],
    "details": [
      {
        "appID": "<TEAM_ID>.<BUNDLE_ID>",
        "paths": [
          "/main/*",
          "/"
        ]
      }
    ]
  }
}

Reemplaza <TEAM_ID> con el identificador de tu equipo en Apple Developer (lo puedes encontrar en tu cuenta de desarrollador).Reemplaza <BUNDLE_ID> con el identificador de tu aplicación (por ejemplo, com.myapp).

Coloca el archivo en el dominio https://www.myapp.com/.well-known/apple-app-site-association

• Asegúrate de que el archivo esté disponible públicamente y sea servido con un encabezado Content-Type: application/json.

Pudes validar el link desde aquí.