0.7.1 • Published 5 months ago
react-native-cogniscan v0.7.1
react-native-cogniscan
A library to help with Digital ekyc process
Installation
npm install react-native-cogniscan
Basic Example Usage
import React, { useEffect, useState } from 'react';
import {
Alert,
Button,
Image,
ScrollView,
StyleSheet,
Text,
TouchableOpacity,
View,
} from 'react-native';
import {
CogniScanProvider,
getMetaData,
initialize,
startFaceMatch,
startOCR,
} from 'react-native-cogniscan';
export default function App() {
const [metadata, setMetadata] = useState<any>(null);
const [ocrResponse, setOcrResponse] = useState<any>(null);
const [faceMatchResponse, setFaceMatchResponse] = useState<any>(null);
const [selectedCountryId, setSelectedCountryId] = useState<number | null>(
null
);
const [selectedCardId, setSelectedCardId] = useState<number | null>(null);
useEffect(() => {
const initializePackage = async () => {
try {
await initialize('__________'); // Replace with your actual API key
} catch (error: any) {
Alert.alert('Initialization Error', error.message);
}
};
initializePackage();
}, []);
const fetchMetadata = async () => {
try {
const data = await getMetaData();
setMetadata(data);
} catch (error: any) {
Alert.alert('Metadata Error', error.message);
}
};
const handleStartOCR = async () => {
try {
if (selectedCountryId === null || selectedCardId === null) {
Alert.alert('Selection Error', 'Please select a card to scan.');
return;
}
const ocrResult = await startOCR(selectedCardId);
setOcrResponse(ocrResult?.payload);
} catch (error: any) {
console.error('OCR Error:', error);
Alert.alert('OCR Error', error.message);
}
};
const handleStartFacematch = async () => {
try {
if (!ocrResponse?.Person) {
Alert.alert(
'Face Match Error',
'No person image available for face match.'
);
return;
}
const facematchResult = await startFaceMatch(ocrResponse.Person);
setFaceMatchResponse(facematchResult?.payload);
} catch (error: any) {
console.error('Facematch Error:', error);
Alert.alert('Facematch Error', error.message);
}
};
const resetData = () => {
setMetadata(null);
setOcrResponse(null);
setFaceMatchResponse(null);
setSelectedCountryId(null);
setSelectedCardId(null);
};
return (
<ScrollView contentContainerStyle={styles.container}>
<Button title="Get Metadata" onPress={fetchMetadata} />
{metadata && (
<>
<Text style={styles.title}>Select a Card to Scan:</Text>
{metadata.countries.map((country: any) => (
<View key={country.id} style={styles.countryContainer}>
<Text style={styles.countryName}>{country.name}</Text>
{country.cards.map((card: any) => (
<TouchableOpacity
key={card.id}
style={styles.radioContainer}
onPress={() => {
setSelectedCountryId(country.id);
setSelectedCardId(card.id);
}}
>
<View style={styles.radioCircle}>
{selectedCardId === card.id &&
selectedCountryId === country.id && (
<View style={styles.selectedRb} />
)}
</View>
<View>
<Text style={styles.radioText}>{card.name}</Text>
<Text style={styles.cardDescription}>
{card.description}
</Text>
</View>
</TouchableOpacity>
))}
</View>
))}
</>
)}
<Button
title="Start OCR"
onPress={handleStartOCR}
disabled={!selectedCardId}
/>
<CogniScanProvider />
{ocrResponse && (
<View style={styles.resultContainer}>
<Text style={styles.resultText}>OCR Data:</Text>
{ocrResponse.Person ? (
<Image
source={{ uri: `data:image/png;base64,${ocrResponse.Person}` }}
style={styles.personImage}
/>
) : (
<Text>No Image Available</Text>
)}
{Object.entries(ocrResponse)
.filter(([key]) => key !== 'Person')
.map(([key, value]) => (
<Text key={key} style={styles.dataText}>
{key}: {value}
</Text>
))}
</View>
)}
<Button title="Start Face Match" onPress={handleStartFacematch} />
{faceMatchResponse && (
<View style={styles.resultContainer}>
{Object.entries(faceMatchResponse).map(([key, value]) => (
<Text key={key} style={styles.dataText}>
{key}: {value.score !== undefined ? value.score : value.distance}
</Text>
))}
</View>
)}
<Button title="Reset Data" onPress={resetData} color="red" />
</ScrollView>
);
}
const styles = StyleSheet.create({
container: {
padding: 20,
gap: 10,
},
jsonPre: {
fontFamily: 'monospace',
fontSize: 12,
backgroundColor: '#e0e0e0',
padding: 10,
borderRadius: 5,
marginVertical: 10,
color: '#333',
},
resultContainer: {
marginTop: 20,
alignItems: 'center',
},
personImage: {
width: 100,
height: 100,
resizeMode: 'contain',
marginBottom: 10,
},
resultText: {
fontSize: 18,
fontWeight: 'bold',
marginBottom: 10,
},
dataText: {
fontSize: 16,
marginBottom: 5,
},
title: {
fontSize: 18,
fontWeight: 'bold',
marginVertical: 10,
},
countryContainer: {
marginBottom: 20,
},
countryName: {
fontSize: 16,
fontWeight: 'bold',
marginBottom: 5,
},
radioContainer: {
flexDirection: 'row',
alignItems: 'center',
marginBottom: 10,
},
radioText: {
fontSize: 16,
},
cardDescription: {
fontSize: 12,
color: '#666',
},
radioCircle: {
height: 20,
width: 20,
borderRadius: 10,
borderWidth: 2,
borderColor: '#2680EB',
alignItems: 'center',
justifyContent: 'center',
marginRight: 10,
},
selectedRb: {
width: 10,
height: 10,
borderRadius: 5,
backgroundColor: '#2680EB',
},
});
Made with create-react-native-library
Created with : npx create-react-native-library@0.28.0 cogniscan-master --reactNativeVersion 0.71.7
0.7.1
5 months ago
0.7.4-patch
5 months ago
0.7.3-patch
5 months ago
0.7.2-patch
5 months ago
0.7.1-patch
5 months ago
0.7.0
5 months ago
0.7.0-patch
5 months ago
0.6.2
6 months ago
0.6.1
6 months ago
0.6.0
6 months ago
0.5.6
7 months ago
0.5.5
7 months ago
0.5.4-patch-0
7 months ago
0.5.4
7 months ago
0.5.3
7 months ago
0.5.2
7 months ago
0.5.1
7 months ago
0.5.0
7 months ago
0.4.2
7 months ago
0.4.1
7 months ago
0.4.0-patch-1
7 months ago
0.4.0-patch
7 months ago
0.4.0
7 months ago
0.3.0-2-patch
7 months ago
0.3.0-3
8 months ago
0.3.0-2
8 months ago
0.3.0-1
8 months ago
0.3.0
8 months ago
0.2.0-1
8 months ago
0.2.0
8 months ago
0.1.0
8 months ago