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;