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

Tiempo de lectura: 2 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();
    };
  }, []);

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.

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

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)