# React Native

## Pré-requisitos

Para poder usar o hosted widget no seu aplicativo React Native, certifique-se de que você:

- Pode criar tokens de `access` no seu servidor.
- Sabe como implementar webviews para sua plataforma. Para mais informações, consulte os artigos sobre webview na página do github do React Native.


## Manipular eventos na sua webview

No exemplo de código abaixo, você pode ver um exemplo de como escutar e manipular eventos dentro da sua webview.


```javascript Exemplo de Manipulação de Webview
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;
          // Faça algo com o link e a instituição.
          return false;
        case 'exit':
          // Se o redirecionamento começar com "exit",
          // Faça algo com os dados.
          return false;
        case 'error':
          const {error, error_message} = parseParams;
          // Se o redirecionamento começar com "error",
          // Faça algo com os dados do erro.
          return false;
      }
      return false;
    }
    return true;
  };
  
  // Insira o código para escutar eventos adicionais aqui

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

## Ouvindo eventos adicionais

Nosso widget para webviews também envia dados adicionais sobre eventos que o usuário encontra ao longo do widget. Por exemplo, quando o usuário vai da tela de seleção de instituição para a tela de login de credenciais, nosso widget enviará um evento.

Os eventos são enviados como payloads JSON com o seguinte esquema:

Evento de Carregamento de Página

```json PAGE_LOAD Event
{
    "eventName": "PAGE_LOAD",
    "metadata":{
        "page": "/institutions", // Página para a qual o usuário é direcionado
        "from": "/consent", // Página onde o usuário estava anteriormente
        "institution_name": "", // Nota: Este campo só aparece DEPOIS que eles selecionaram uma instituição
    }
}
```

Evento de Erro

```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 ouvir esses eventos, basta adicionar o seguinte código à sua aplicação:


```js
<WebView
      source={{
        uri: // ...
      }}
      onMessage={(event) => {
        // faça algo com event.nativeEvent.data
      }}
/>
```

Pronto! Agora você pode ouvir eventos adicionais na sua webview!