@mono.co/prove-react-native/lib/module/mono-prove.js

The Mono Prove SDK is a quick and secure way to onboard your users from within your React Native app.

"use strict";

import { View, StyleSheet, Modal, SafeAreaView, ActivityIndicator } from 'react-native';
import React from 'react';
import { createUrl } from "./utils.js";
import WebView from 'react-native-webview';
import Error from "./error.js";
import { jsx as _jsx } from "react/jsx-runtime";
const INJECTED_JAVASCRIPT = `window.MonoClientInterface = window.ReactNativeWebView;`;
const MonoProve = props => {
  const {
    sessionId,
    onClose,
    onSuccess,
    onEvent,
    openWidget,
    setOpenWidget,
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    children,
    ...otherConfig
  } = props;
  const prove_url = React.useMemo(() => {
    const qs = {
      reference: otherConfig?.reference,
      ...otherConfig
    };
    return createUrl(sessionId, qs);
  }, [otherConfig, sessionId]);
  function handleMessage(message) {
    const response = JSON.parse(message);
    const eventData = response.data;
    switch (response.type) {
      case 'mono.prove.widget_opened':
        if (onEvent) onEvent('OPENED', eventData);
        break;
      case 'mono.prove.error_occurred':
        if (onEvent) onEvent('ERROR', eventData);
        break;
      case 'mono.prove.identity_verified':
        onSuccess();
        if (onEvent) onEvent('IDENTITY_VERIFIED', eventData);
        setOpenWidget(false);
        break;
      case 'mono.prove.widget.closed':
        setOpenWidget(false);
        onClose();
        break;
    }
  }
  return /*#__PURE__*/_jsx(Modal, {
    visible: openWidget,
    animationType: "slide",
    transparent: false,
    children: /*#__PURE__*/_jsx(SafeAreaView, {
      style: styles.container,
      children: /*#__PURE__*/_jsx(WebView, {
        javaScriptEnabled: true,
        startInLoadingState: true,
        allowsInlineMediaPlayback: true,
        mediaPlaybackRequiresUserAction: false,
        mediaCapturePermissionGrantType: "grant",
        style: styles.webViewContainer,
        injectedJavaScript: INJECTED_JAVASCRIPT,
        source: {
          uri: prove_url
        },
        onMessage: e => handleMessage(e.nativeEvent.data),
        renderLoading: () => /*#__PURE__*/_jsx(View, {
          style: styles.loaderContainer,
          children: /*#__PURE__*/_jsx(ActivityIndicator, {
            size: "large",
            color: "#182CD1"
          })
        }),
        renderError: e => /*#__PURE__*/_jsx(Error, {
          name: e,
          setOpenWidget: setOpenWidget
        })
      })
    })
  });
};
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'rgba(0,0,0, 0.6)'
  },
  webViewContainer: {
    flex: 1,
    borderTopLeftRadius: 10,
    borderTopRightRadius: 10
  },
  loaderContainer: {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'white',
    height: '100%'
  }
});
export default MonoProve;
//# sourceMappingURL=mono-prove.js.map