@kycaid/react-native-sdk/lib/App.js

KYCAID React Native SDK

import React, { useEffect, useRef } from 'react';
import { WebView } from '@kycaid/react-native-webview';
import { Provider, useDispatch, useSelector } from 'react-redux';
import { store } from './store/store';
import { generateForm, getVerification, resetVerificationData, selectGenerateFormData, selectGetVerificationData, } from './store';
const KYCaidComponent = ({ config, verificationCallback, }) => {
    const dispatch = useDispatch();
    const generatedForm = useSelector(selectGenerateFormData);
    const verificationData = useSelector(selectGetVerificationData);
    const webviewRef = useRef();
    useEffect(() => {
        dispatch(generateForm(config));
        dispatch(resetVerificationData());
    }, []);
    useEffect(() => {
        if (verificationData?.verification_id) {
            verificationCallback && verificationCallback(verificationData);
        }
    }, [verificationData?.verification_id]);
    const onNavigationStateChange = (event) => {
        if (event?.url === config.response_url) {
            if (generatedForm?.verification_id) {
                dispatch(getVerification({
                    api_url: config.api_url,
                    api_token: config.api_token,
                    verification_id: generatedForm.verification_id
                }));
            }
        }
    };
    const formUrl = generatedForm?.form_url ? `${generatedForm?.form_url}?reactNative=1${config.language ? `&lang=${config.language}` : ''}` : '';
    return (<WebView ref={() => webviewRef} useWebKit={true} originWhitelist={['*']} bounces={true} allowsInlineMediaPlayback={true} mediaPlaybackRequiresUserAction={false} startInLoadingState={true} allowsFullscreenVideo={true} mediaCapturePermissionGrantType={'grant'} autoManageStatusBarEnabled={false} useWebView2={true} incognito={true} source={{
        uri: formUrl || ''
    }} onNavigationStateChange={onNavigationStateChange}/>);
};
export const KYCAID = (props) => (<Provider store={store}>
    <KYCaidComponent {...props}/>
  </Provider>);