0.1.19 • Published 7 months ago
react-native-skorku-sdk v0.1.19
react-native-skorku-sdk
skorku sdk package for react native
Package Installation
npm i react-native-skorku-sdk
Add these dependencies to your main package.json
"dependencies": {
// ...
"@react-native-community/checkbox": "^0.5.16",
"@react-native-community/datetimepicker": "^7.6.0",
"@react-navigation/native": "^6.1.7",
"@react-navigation/native-stack": "^6.9.13",
"axios": "^1.5.0",
"react-native-autoheight-webview": "^1.6.5",
"react-native-confirmation-code-field": "^7.3.1",
"react-native-device-info": "^10.11.0",
"react-native-encrypted-storage": "^4.0.3",
"react-native-fs": "^2.20.0",
"react-native-image-crop-picker": "^0.40.0",
"react-native-linear-gradient": "^2.8.3",
"react-native-modal-datetime-picker": "^17.1.0",
"react-native-radio-buttons-group": "^3.0.3",
"react-native-safe-area-context": "^4.7.2",
"react-native-screens": "^3.25.0",
"react-native-vision-camera": "^3.1.0",
"react-native-webview": "^13.6.0",
"utf8": "^3.0.0"
},
then, run:
npm i
Netwok configuration
Android
*if your app using network security config, please add these on your network security config xml file:
...
<domain-config cleartextTrafficPermitted="true">
...
<domain includeSubdomains="true">103.161.185.94</domain> <---- Add this
</domain-config>
...
Integrate The Liveness Module
1. Download the corresponding sdk, unzip it and copy the liveness folder to the android directory, same level as the app folder.
- for react-native < 0.60.0 : https://doc.advance.ai/sdk/android/liveness/sdk/react-native/liveness-support.zip
- for react-native >= 0.60.0 : https://doc.advance.ai/sdk/android/liveness/sdk/react-native/liveness-androidx.zip
2. Modify the android/settings.gradle
// ...
include ':app', ':liveness'
3. If u're using react-native >= 0.60.0, on android/gradle.properties please add this line:
android.enableJetifier=true
4. Modify the android/app/build.gradle to add the library dependencies:
...
android {
...
}
dependencies {
...
api project(':liveness') // <---- add this
}
5. Add LivenessReactPackage
In the android/app directory, find the class that implements ReactApplication with the default name MainApplication, add LivenessReactPackage
for react-native >= 0.60 :
import ai.advance.liveness.sdk.rn.LivenessReactPackage; // <------- add this
public class MainApplication extends Application implements ReactApplication {
// ...
@Override
protected List<ReactPackage> getPackages() {
@SuppressWarnings("UnnecessaryLocalVariable")
List<ReactPackage> packages = new PackageList(this).getPackages();
// Packages that cannot be autolinked yet can be added manually here, for example:
// packages.add(new MyReactNativePackage());
packages.add(new LivenessReactPackage()); // <------- add this
return packages;
}
- for react-native >=0.29 :
import ai.advance.liveness.sdk.rn.LivenessReactPackage; // <------- add this
public class MainApplication extends Application implements ReactApplication {
// ...
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(), // <---- add comma
new LivenessReactPackage() // <---------- add this
);
}
Usage
1. Create a SkorkuScreen.tsx for providing the SkorkuLivenessSDK Component
// SkorkuScreen.tsx
import { useNavigation } from '@react-navigation/native';
import React from 'react';
import SkorkuLivenessSDK, { SkorkuType } from 'react-native-skorku-sdk';
import type { StackNavigation } from './router';
function SkorkuScreen(): JSX.Element {
const navigation = useNavigation<StackNavigation>();
return (
<SkorkuLivenessSDK
sdkKey={''}
secretKey={''}
skorkuKey={''}
skorkuSecret={''}
skorkuType={SkorkuType.lite} // <---- select the type, e.g: SkorkuType.lite or SkorkuType.ekyc
dataOcr={ // <--- should be filled if ure choosing the SkorkuType.lite
{
nik: '',
blood_type: '',
religion: '',
gender: '',
dob: '',
pob: '',
province: '',
city: '',
district: '',
village: '',
rtrw: '',
occupation: '',
nationality: '',
marital: '',
address: '',
ktp: '' // <--- base64ktp
}
}
onExited={(v: boolean) => {
console.log(v)
navigation.goBack()
}} />
);
}
export default SkorkuScreen;
2. Import the component and configure your NavigationContainer:
// ...
import SkorkuScreen from "../path-to-skorku-screen-component-in-your-app";
import SkorkuStack from "react-native-skorku-sdk";
export type ScreenNames = [
// ...
"SkorkuScreen",
"SkorkuStack"
]
// or
export type RootStackParamList = {
// ...
SkorkuScreen: undefined,
SkorkuSDK: undefined
};
export type StackNavigation = NavigationProp<RootStackParamList>;
const Stack = createNativeStackNavigator<RootStackParamList>();
function AppRouter() {
return (
<NavigationContainer>
<Stack.Navigator>
// ...
<Stack.Screen name="SkorkuScreen" component={SkorkuScreen} />
<Stack.Screen name="SkorkuStack" component={SkorkuStack} />
</Stack.Navigator>
</NavigationContainer>
);
}
export default AppRouter
3. Navigate to the SkorkuScreen component you've configured:
<Button title="a" onPress={() => {
navigation.navigate('SkorkuScreen')
}} />
License
MIT
Made with create-react-native-library
0.1.10
7 months ago
0.1.11
7 months ago
0.1.12
7 months ago
0.1.13
7 months ago
0.1.14
7 months ago
0.1.15
7 months ago
0.1.0
7 months ago
0.1.2
7 months ago
0.1.1
7 months ago
0.1.16
7 months ago
0.1.8
7 months ago
0.1.17
7 months ago
0.1.7
7 months ago
0.1.18
7 months ago
0.1.19
7 months ago
0.1.9
7 months ago
0.1.4
7 months ago
0.1.3
7 months ago
0.1.6
7 months ago
0.1.5
7 months ago
1.0.5
8 months ago
1.0.4
8 months ago
1.0.3
8 months ago
1.0.2
8 months ago
1.0.1
8 months ago
1.0.0
8 months ago