# 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 ejemplo de código a continuación, puedes ver un ejemplo de cómo escuchar y manejar eventos dentro de tu webview.


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

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

  let belvoWidgetURL = `https://widget.belvo.io/?access_token=${token}`;

  useEffect(() => {
    setBelvoURI(`${belvoWidgetURL}&${buildPayload(payload)}`);
  }, [belvoWidgetURL, payload]);

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

  const handleBelvoEvent = event => {
    console.log({event});
    const webviewEvent = new URL(event.url);

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

      switch (webviewEvent.hostname) {
        case 'success':
          const {link, institution} = parseParams;
          // Haz algo con el link y la institución.
          return false;
        case 'exit':
          // Si el redireccionamiento comienza con "exit",
          // Haz algo con los datos.
          return false;
        case 'error':
          const {error, error_message} = parseParams;
          // Si el redireccionamiento comienza con "error",
          // Haz algo con los datos del error.
          return false;
      }
      return false;
    }
    return true;
  };
  
  // Inserta código para escuchar eventos adicionales aquí

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

## 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!