Resumen y Solución al Problema de Verificación KYC en React Native WebView

Descripción del Problema

Al integrar react-native-webview para gestionar un flujo de verificación KYC (Conozca a su Cliente), se presenta un problema cuando el proveedor de KYC intenta abrir una nueva ventana usando target="_blank". En lugar de abrir correctamente la nueva página, se muestra un mensaje de error indicando que el navegador no es compatible, y el flujo de verificación se bloquea.

Comportamiento Esperado

El comportamiento esperado es que el WebView maneje los enlaces target="_blank" abriendo:

1. Una nueva instancia de WebView.
2. Permita la redirección sin romper el proceso de verificación.
3. Proporcione una forma de abrir el enlace en el navegador predeterminado si es necesario.

Comportamiento Actual

Actualmente, cuando se intenta abrir una nueva ventana, el WebView bloquea la solicitud, lo que resulta en un mensaje de superposición o una página en blanco. Esto impide que el proceso de verificación continúe.

Solución Propuesta

Para manejar correctamente los enlaces target="_blank" en un WebView, se puede utilizar la prop onShouldStartLoadWithRequest para detectar cuando se está intentando abrir un enlace y decidir cómo manejarlo.

A continuación, se presenta un código de ejemplo que ilustra cómo implementar un manejador para esto:

import React from 'react';
import { View, StyleSheet, Linking } from 'react-native';
import { WebView } from 'react-native-webview';

export default function App() {
  const url = "https://integration-api.ekeynox.net/contract/signbook/v3/#/identity-page?token=20250603_QGvBPAnJFTzpNwt9iJ85QFK0BABw5mC";

  const handleNavigation = (request) => {
    // Detectar si hay un intento de abrir un enlace externo
    if (request.url !== url) {
      Linking.openURL(request.url); // Abrir en el navegador predeterminado
      return false; // No cargar en el WebView
    }
    return true; // Cargar en el WebView
  };

  return (
    <View style={styles.container}>
      <WebView 
        source={{ uri: url }}
        style={styles.webview}
        onShouldStartLoadWithRequest={handleNavigation}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  webview: {
    flex: 1,
  },
});

Conclusión

Implementando el manejo de la navegación con onShouldStartLoadWithRequest, se solucionan los problemas relacionados con target="_blank" en react-native-webview, permitiendo así una experiencia de usuario más fluida durante la verificación KYC. Se recomienda probar este enfoque en el entorno deseado para asegurarse de que se comporte según lo esperado.