# React Native

## Requisitos previos

Para poder usar el hosted widget en tu aplicación React Native, asegúrate de que:

- Puedes crear tokens de `access` en tu servidor.
- Sabes cómo implementar webviews para tu plataforma. Para más información, consulta los artículos sobre webview en la página de github de React Native.


## Manejar eventos en tu webview

En el siguiente ejemplo de código puedes ver cómo escuchar y manejar eventos dentro de tu webview.

```javascript Webview Handling Example
import React, {useState, useEffect} from 'react';
import {Linking} from 'react-native';
import {WebView} from 'react-native-webview';
import {URL} from 'react-native-url-polyfill';

const BELVO_URI = 'https://widget.belvo.io/';

export default function BelvoWidget({token, payload}) {
  const [belvoURI, setBelvoURI] = useState('');

  useEffect(() => {
    setBelvoURI(`${BELVO_URI}?access_token=${token}&${buildPayload(payload)}`);
  }, [token, payload]);

  const buildPayload = (rawPayload) =>
    Object.keys(rawPayload)
      .map((key) => `${key}=${rawPayload[key]}`)
      .join('&');

  const handleBelvoEvent = (event) => {
    const {url} = event;

    // Abre las URLs de instituciones / externas https en el navegador del sistema — no las cargues dentro del WebView.
    if (url.startsWith('https://') && !url.startsWith(BELVO_URI)) {
      Linking.openURL(url);
      return false;
    }

    const webviewEvent = new URL(url);
    if (webviewEvent.protocol === 'your-url-here:') {
      const params = Object.fromEntries(webviewEvent.searchParams);

      switch (webviewEvent.hostname) {
        case 'success': {
          const {link, institution} = params;
          // Haz algo con el link y la institución.
          return false;
        }
        case 'exit':
          // Maneja la salida.
          return false;
        case 'error':
          // Maneja el error (params.error, params.error_message).
          return false;
      }
      return false;
    }

    return true;
  };

  return (
    <WebView
      source={{uri: belvoURI}}
      originWhitelist={['your-url-here://*']}
      onShouldStartLoadWithRequest={handleBelvoEvent}
    />
  );
}
```

Importante
Las URLs de instituciones y otras externas `https://` deben abrirse en el navegador del sistema usando `Linking.openURL()` — no cargarlas dentro del WebView. Cargar estas URLs en el WebView puede romper los redireccionamientos de las instituciones.

## Escuchando eventos adicionales

Nuestro widget para webviews también envía datos adicionales sobre los eventos que el usuario encuentra a lo largo del widget. Por ejemplo, cuando el usuario pasa de la pantalla de selección de institución a la pantalla de inicio de sesión de credenciales, nuestro widget enviará un evento.

Los eventos se envían como cargas JSON con el siguiente esquema:

Evento de Carga de Página
```json PAGE_LOAD Event
{
    "eventName": "PAGE_LOAD",
    "metadata":{
        "page": "/institutions", // Página a la que se dirige el usuario
        "from": "/consent", // Página donde estaba el usuario anteriormente
        "institution_name": "", // Nota: Este campo solo aparece DESPUÉS de que hayan seleccionado una institución
    }
}
```

Evento de Error
```json ERROR Event
{
  "eventName": "ERROR",
  "request_id": "UUID",
  "meta_data": {
    "error_code": "login_error",
    "error_message": "Invalid credentials provided to login to the institution",
    "institution_name": "bancoazteca_mx_retail",
    "timestamp": "2020-04-27T19:09:23.918Z"
  }
}
```

Para escuchar estos eventos, solo agrega el siguiente código a tu aplicación:

```js
<WebView
      source={{
        uri: // ...
      }}
      onMessage={(event) => {
        // do something with event.nativeEvent.data
      }}
/>
```

¡Listo! ¡Ahora puedes escuchar eventos adicionales en tu webview!