@ha_tecno/live-id-sdk NPM

react-native-live-id-sdk

uma lib para o live id sdk

Installation

npm install react-native-live-id-sdk

yarn add react-native-live-id-sdk

Adicione outras libs que serão utilizadas pelo sdk

yarn add react-native-vision-camera react-native-fs


cd ios && pod install

Se tiver erro com o react-native-modal ou react-native-responsive-fontsize, instale as libs abaixo

yarn add react-native-responsive-fontsize

yarn add react-native-modal

yarn add react-native-orientation-locker

obs: no Windows, você pode precisar instalar worklets-core

yarn add react-native-worklets-core

Android

Open your project's AndroidManifest.xml and add the following lines inside the "manifest" tag:

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

    <!-- optionally, if you want to record audio: -->
    <uses-permission android:name="android.permission.RECORD_AUDIO" />

iOS

Open your project's Info.plist and add the following lines inside the outermost "dict" tag:

    <key>NSCameraUsageDescription</key>
    <string>$(PRODUCT_NAME) needs access to your Camera.</string>

    <!-- optionally, if you want to record audio: -->
    <key>NSMicrophoneUsageDescription</key>
    <string>$(PRODUCT_NAME) needs access to your Microphone.</string>

Usage

here is an example of how to use the library in your project

/* eslint-disable react-native/no-inline-styles */
import React, { useState } from 'react';
import {
  ScrollView,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from 'react-native';
import {
  ValidaFinger,
  CameraProvaVidas,
  CadastroFinger,
  CadastroScreen,
} from 'react-native-live-id-sdk';

export default function App() {
  const [person, setPerson] = useState<{
    cpf: string;
    finger: boolean;
    person_id: string;
    status: string;
  } | null>({
    cpf: '11111111111',
    finger: false,
    person_id: '321',
    status: 'Ativo',
  });

  // estados para abrir e fechar os modais do sdk
  const [showModalValidaFinger, setShowModalValidaFinger] = useState(false);
  const [showModalProvaVidas, setShowModalProvaVidas] = useState(false);
  const [showModalCadastroFinger, setShowModalCadastroFinger] = useState(false);
  const [showModalCadastroScreen, setShowModalCadastroScreen] = useState(false);

  return (
    <ScrollView
      contentContainerStyle={{
        paddingBottom: 100,
      }}
    >
      <View style={styles.container}>
        <Text style={styles.textExplicativoTitle}>
          Logo abaixo temos alguns exemplos de como utilizar o SDK.
        </Text>
        <Text style={styles.textExplicativo}>
          <Text style={styles.textBold}> 1 - </Text>Aqui abaixo temos
          informacoes do usuario que foi cadastrado, caso ainda nao tenha,
          clique em CadastroScreen para cadastrar e depois testar as outras
          funcionalidades.
        </Text>
        {person ? (
          <View style={styles.containerPerson}>
            <Text style={styles.personText}>ID: {person?.person_id}</Text>
            <Text style={styles.personText}>CPF:{person?.cpf}</Text>
            <Text style={styles.personText}>STATUS: {person?.status}</Text>
            <Text style={styles.personText}>
              DIGITAL:{' '}
              {person?.finger ? 'Possui digital' : 'Não possui digital'}
            </Text>
          </View>
        ) : (
          <View style={styles.containerPerson}>
            <Text style={styles.textNoperson}>
              Clique em "Cadastrar usuário teste" para cadastrar e depois testar
              as outras funcionalidades.
            </Text>
          </View>
        )}
        <TouchableOpacity
          // disabled={person ? true : false}
          style={[
            styles.containerButton,
            {
              // backgroundColor: person ? 'gray' : 'lightblue',
            },
          ]}
          onPress={() => setShowModalCadastroScreen(true)}
        >
          <Text style={styles.personText}>Cadastrar usuário teste</Text>
        </TouchableOpacity>

        <TouchableOpacity
          style={[
            styles.containerButton,
            {
              backgroundColor: !person ? 'gray' : 'lightblue',
            },
          ]}
          onPress={() => setShowModalCadastroFinger(true)}
        >
          <Text style={styles.personText}>Cadastrar digital</Text>
        </TouchableOpacity>

        <TouchableOpacity
          style={[
            styles.containerButton,
            {
              backgroundColor: !person ? 'gray' : 'lightblue',
            },
          ]}
          onPress={() => setShowModalValidaFinger(true)}
        >
          <Text style={styles.personText}>Validar digital</Text>
        </TouchableOpacity>

        <TouchableOpacity
          style={[
            styles.containerButton,
            {
              backgroundColor: !person ? 'gray' : 'lightblue',
            },
          ]}
          onPress={() => setShowModalProvaVidas(true)}
        >
          <Text style={styles.personText}>Prova de vida</Text>
        </TouchableOpacity>

        <CadastroScreen
          screenProps={{ id: '321' }}
          isVisible={showModalCadastroScreen}
          onCloseModal={() => setShowModalCadastroScreen(false)}
          onError={(response) => console.log('onError --> ', response)}
          onSuccess={response => {
            setPerson({
              cpf: response?.cpf,
              finger: response?.finger,
              person_id: response?.person_id,
              status: response?.status,
            });
            console.log('onSuccess --> ', response);
          }}
        />

        <CadastroFinger
          screenProps={{ id: '321' }}
          isVisible={showModalCadastroFinger}
          onCloseModal={() => setShowModalCadastroFinger(false)}
          onError={(response) => console.log('onError --> ', response)}
          onSuccess={(response) => console.log('onSuccess --> ', response)}
        />

        <ValidaFinger
          screenProps={{ id: '321' }}
          isVisible={showModalValidaFinger}
          onCloseModal={() => setShowModalValidaFinger(false)}
          onError={(response) => console.log('onError --> ', response)}
          onSuccess={(response) => console.log('onSuccess --> ', response)}
        />

        <CameraProvaVidas
          screenProps={{ id: '321' }}
          isVisible={showModalProvaVidas}
          onCloseModal={() => setShowModalProvaVidas(false)}
          onError={(response) => console.log('onError --> ', response)}
          onSuccess={(response) => {
            console.log('onSuccess --> ', response);
          }}
        />
      </View>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 10,
  },

  containerButton: {
    width: '100%',
    height: 50,
    backgroundColor: 'lightblue',
    borderRadius: 8,
    alignItems: 'center',
    justifyContent: 'center',
    marginTop: 30,
  },

  containerPerson: {
    width: '100%',
    height: 100,
    backgroundColor: '#ccc',
    borderRadius: 4,
    alignItems: 'flex-start',
    justifyContent: 'center',
    padding: 10,
    marginBottom: 20,
  },

  button: {
    width: '100%',
    height: 50,
    backgroundColor: 'lightblue',
    borderRadius: 4,
    alignItems: 'center',
    justifyContent: 'center',
    marginTop: 10,
  },

  personText: {
    fontSize: 16,
    color: '#000',
  },

  textBold: {
    fontWeight: 'bold',
    fontSize: 18,
  },

  textExplicativoTitle: {
    fontSize: 20,
    fontWeight: 'bold',
    color: '#000',
    margin: 10,
  },

  textExplicativo: {
    fontSize: 16,
    color: '#000',
    margin: 10,
    fontStyle: 'italic',
  },

  textNoperson: {
    fontSize: 16,
    color: '#000',
    margin: 10,
    fontWeight: 'bold',
  },

  textError: {
    fontSize: 12,
    color: 'red',
    margin: 10,
    fontWeight: 'bold',
  },
});