About react-native-manual-kyc

This package is about if user performs manual kyc in 3-steps :

Installation

npm install react-native-manual-kyc


# Step:1
// sample code to use KycStep1 component

import React from 'react';
import { View, Text } from 'react-native';
import { KycStep1 } from 'react-native-manual-kyc';



const App = (props) => {

# This step provide field such as Fullname, Address, PinCode, National ID, Contact Number, ID Proof
# User can customize the field name in customName key and customPlaceHolder Key.

Whichever key user will pass in array, that particular fields witll show up in Step 1.
eg. fieldsArr = [
{ id: 1, type: "Fullname", customName: "fullname", customPlaceHolder: "Full Name" },
{ id: 2, type: "Address", customName: "User Address", customPlaceHolder: "Address" },
{ id: 3, type: "PinCode", customName: "Pincode", customPlaceHolder: "Pincode" },
{ id: 4, type: "National ID", customName: "National ID", customPlaceHolder: "National ID" },
{ id: 5, type: "Phone Number", customName: "Phone Number", customPlaceHolder: "Phone Number" },
{ id: 6, type: "Id Proof", customName: "Id Proof", customPlaceHolder: "Select Id Proof" }];

 let DOCS = [
{ label: 'Pan Card', value: '1' },
{ label: 'Aadhaar Card', value: '2' },
{ label: 'Voter Card', value: '3' }
];
return (
    <KycStep1
    fieldsArr={fieldsArr}
DOCS={DOCS}
onPress={(finalArr)=>{}}
/>

);
};

export default App;


# Step:2

// sample code to use KycStep2 component

import React from 'react';
import { View, Text } from 'react-native';
import { KycStep2 } from 'react-native-manual-kyc';



const App (props) => {
const handleFrontFile = (uploadedImage: any) => {
console.log('front File value', uploadedImage);
// You can use this value to submit it to an API or use it in a state
};

const handleBackFile = (uploadedImage: any) => {
console.log('back file value', uploadedImage);
// You can use this value to submit it to an API or use it in a state
};

const handleSelfieFile = (uploadedImage: any) => {
console.log('selfie file value', uploadedImage);
// You can use this value to submit it to an API or use it in a state
};

const handleContinueButton = () => {
// Call this function to submit all above values to your API to complete document verification or perform any other operation
};

return (

      <KycStep2
        documentName={'Pan Card'}                   // prop for document name
        kycDocFrontFile={handleFrontFile}           // callback function for getting image file(object) of front side of your document that you uploaded from camera picker
        kycDocBackFile={handleBackFile}             // callback function for getting image file(object) of back side of your document that you uploaded from camera picker
        kycSelfieFile={handleSelfieFile}            // callback function for getting image file(object) of selfie that you uploaded from camera picker
        onSubmit={handleContinueButton}             // onPress function for continue button in the UI that you can use to call API or any other operation you want
      />

);
};

export default App;


# Step3:

// sample code to use KycStep3 component

import React from 'react';
import { View, Text } from 'react-native';
import { KycStep3 } from 'react-native-manual-kyc';



const App = (props) => {
const handleFile = (uploadedImage: any) => {
console.log(' File value', uploadedImage);
// You can use this value to submit it to an API or use it in a state
};

const handleContinueButton = () => {
// Call this function to submit all above values to your API to complete document verification or perform any other operation
};

return (

    <KycStep3
        documentName={'Pan Card'}                   // prop for document name
        kycDocFile={handleFile}                     // callback function for getting image file(object) of front side of your document that you uploaded from camera picker
        onSubmit={handleContinueButton}             // onPress function for continue button in the UI that you can use to call API or any other operation you want
      />

);
}

export default App;