🚀 ConnectaHub KYC

Biblioteca React Native para integração com o ConnectaHub KYC, permitindo a verificação de identidade via WebView.

📥 Instalação

Antes de instalar, certifique-se de que seu projeto React Native já está configurado.

🔹 Instalar a biblioteca

Se estiver usando npm:

npm install @conectahub/sdk-connecthub-kyc-rn 

Se estiver usando yarn:

yarn add connectahub-kyc
🛠 Configuração
Certifique-se de que o react-native-webview está instalado:

A biblioteca depende do react-native-webview. Caso ainda não tenha instalado, execute:

npm install react-native-webview

Ou com Yarn:

yarn add react-native-webview
Configurar permissão para WebView (Android):

📌Configuração para Android

Abra o arquivo android/app/src/main/AndroidManifest.xml e adicione as seguintes permissões dentro da tag <manifest>:

<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.CAMERA"/>

Para garantir o funcionamento correto da câmera no Android, adicione a seguinte configuração dentro da tag 
<application>:

 
<provider
    android:name="androidx.core.content.FileProvider"
    android:authorities="${applicationId}.fileprovider"
    android:grantUriPermissions="true"
    android:exported="false">
    <meta-data
        android:name="android.support.FILE_PROVIDER_PATHS"
        android:resource="@xml/provider_paths"/>
</provider>
Agora, crie o arquivo android/app/src/main/res/xml/provider_paths.xml e adicione:

 
<?xml version="1.0" encoding="utf-8"?>
<paths>
    <external-files-path name="camera_images" path="Pictures"/>
</paths>
📌 Configuração para iOS
No arquivo ios/Info.plist, adicione:

 
<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>

<key>NSCameraUsageDescription</key>
<string>Este aplicativo precisa acessar a câmera para capturar fotos e realizar a verificação de identidade.</string>

<key>NSMicrophoneUsageDescription</key>
<string>Este aplicativo precisa acessar o microfone para capturar vídeos durante a verificação.</string>
Isso garantirá que o aplicativo tenha permissão para acessar a câmera e o microfone no iOS.


📌 Como Usar
Aqui está um exemplo de implementação completa no seu aplicativo React Native:

import React, { useState } from "react";
import { View, StyleSheet, Text, Button, Alert, ActivityIndicator } from "react-native";
import { ConnectaHubKYC, Transaction } from "connectahub-kyc";

export default function App() {
  const [isProcessing, setIsProcessing] = useState(false);
  
  // Token de autenticação obtido do backend
  const authToken = "SEU_TOKEN_AQUI";

  // Dados da transação para o KYC
  const transactionData: Transaction = {
    name: "João Silva",
    document_number: "123.456.789-00",
    birthdate: "1990-01-01",
    email: "[email protected]",
    country_code: "BR",
    phone: "5592999999999"
  };

  // Componente de carregamento personalizado
  const CustomLoadingComponent = () => (
    <View style={styles.loadingContainer}>
      <ActivityIndicator size="large" color="#0000ff" />
      <Text style={styles.loadingText}>Preparando verificação de identidade...</Text>
      <Text style={styles.loadingSubtext}>Por favor, aguarde alguns instantes</Text>
    </View>
  );

  return (
    <View style={styles.container}>
      {!isProcessing ? (
        <View style={styles.buttonContainer}>
          <Text style={styles.title}>Verificação KYC</Text>
          <Text style={styles.description}>
            Prepare seu documento de identidade e inicie o processo de verificação.
          </Text>
          <Button title="Iniciar verificação" onPress={() => setIsProcessing(true)} />
        </View>
      ) : (
        <ConnectaHubKYC
          transaction={transactionData}
          token={authToken} // Passando o token de autenticação
          customLoadingComponent={CustomLoadingComponent}
          onTransactionCreated={(id, url) => {
            console.log(`Transação criada: ${id}`);
            console.log(`URL do iframe: ${url}`);
          }}
          onError={(error) => {
            Alert.alert("Erro", error.message, [{ text: "OK", onPress: () => setIsProcessing(false) }]);
          }}
        />
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "white"
  },
  buttonContainer: {
    flex: 1,
    justifyContent: "center",
    padding: 20
  },
  title: {
    fontSize: 24,
    fontWeight: "bold",
    textAlign: "center",
    marginBottom: 16
  },
  description: {
    fontSize: 16,
    textAlign: "center",
    marginBottom: 32
  },
  loadingContainer: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#f5f5f5",
    padding: 20
  },
  loadingText: {
    fontSize: 18,
    marginTop: 16,
    textAlign: "center",
    fontWeight: "bold"
  },
  loadingSubtext: {
    fontSize: 14,
    marginTop: 8,
    color: "#666",
    textAlign: "center"
  }
});