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