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


## Manipule 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 {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;

    // Abra URLs de instituições / externas https no navegador do sistema — não as carregue dentro do 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;
          // Faça algo com o link e a instituição.
          return false;
        }
        case 'exit':
          // Manipule a saída.
          return false;
        case 'error':
          // Manipule o erro (params.error, params.error_message).
          return false;
      }
      return false;
    }

    return true;
  };

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

Importante
URLs de instituições e outras externas `https://` devem ser abertas no navegador do sistema usando `Linking.openURL()` — não carregadas dentro do WebView. Carregar essas URLs no WebView pode quebrar redirecionamentos de instituições.

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