react-native-live-id-sdk
v5.7.0
Published
uma lib para o live id sdk
Downloads
126
Maintainers
Readme
react-native-live-id-sdk
uma lib para o live id sdk
Installation
npm install react-native-live-id-sdk
ou
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',
},
});
License
MIT