@qore-id/react-native-qoreid-sdk 0.1.2 → 1.0.0

package/README.md

@@ -1,57 +1,61 @@
-# @qore-id/react-native-qoreid-sdk
-
 QoreID React Native SDK
 
+
+Link to [documentation](https://dash.readme.com/project/qoreid/v1.0/docs/qoreid-react-native-sdk)
+
 ## Installation
 
-```sh
-npm install @qore-id/react-native-qoreid-sdk
+```c npm
+npm install --save  @qore-id/react-native-qoreid-sdk
 ```
-
-```sh
+```c yarn
 yarn add @qore-id/react-native-qoreid-sdk
 ```
 
-You will be required to install WebView package if you don't already have it installed in your project.
-
-```sh
-npm i react-native-webview
-```
-
 ### Android
 
 Add the following to your `app/build.gradle`
 
 ```groovy
     //before your dependencies
-    repositories {
-        mavenCentral()
-        google()
-        maven {
-            url "https://repo.qoreid.com/repository/maven-releases/"
-        }
-    }
+repositories {
+  mavenCentral()
+  google()
+  maven {
+    url "https://repo.qoreid.com/repository/maven-releases/"
+  }
+}
 
 ```
 
-```groovy
-
+In your `android/app/res/values/styles.xml` Add the Material Component theme to use the QoreIdButton.
 
+```xml
+<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar" />
 ```
 
-### iOS
-From your root directory
-```sh
+Add the material library to your `app/build.gradle` dependency 
 
-   project % cd ios && pod install
+```groovy
+dependencies {
+ 		...
+    implementation 'com.google.android.material:material:1.7.0'
+  	...
+}
 ```
 
+### iOS
 
+From your root directory
 
+```sh
+cd ios && pod install
+```
 
-## Usage 
+## Usage
 
-```tsx
+```coffeescript verify.tsx
+//verify.tsx
 import React from 'react'
 import { QoreIdButton } from '@qore-id/react-native-qoreid-sdk';
 
@@ -59,7 +63,6 @@ import { QoreIdButton } from '@qore-id/react-native-qoreid-sdk';
 function App() {
  
     let clientId = /* CLIENT ID */
-    const customButton  = ({ onPress }) =>  <Button onPress={onPress} title="QoreId Button" />
 
     const onError = (data) => {
         console.error(data);
@@ -81,7 +84,7 @@ function App() {
             {/* Other components */}
             <QoreIdButton
                 title="Verify"
-                flowId=""
+                flowId="" {/* defaults to 0 */}
                 clientId={clientId} {/* Required */}
                 productCode="" {/* Required */}
                 customerReference={customerRef} {/* Required */}
@@ -103,7 +106,6 @@ function App() {
                 onQoreIDSdkSubmitted={onSumitted}
                 onQoreIDSdkError={onError}
                 onQoreIDSdkClosed={onClosed}
-                render={customButton} {/* Only supported for iOS */}
             />
         </View>
     )
@@ -111,15 +113,13 @@ function App() {
 
 ```
 
-
-
-### Utilities
+## Utilities
 
 QoreId SDK exposes utilities that you can easily use
 
-```tsx
+```coffeescript
 
-import React from 'react'
+import React, {useRef} from 'react'
 import { QoreIdButton, utils } from '@qore-id/react-native-qoreid-sdk';
 
 function App() {
@@ -135,6 +135,4 @@ function App() {
     ...
 }
 
-```
-- Link to [doc/product-code]('https://docs.qoreid.com/docs/product-codes')
-- Link to [doc/accepted-documents]('https://docs.qoreid.com/docs/ocr-accepted-documents#accepted-documents-for-ocr-verifications')
+```

package/android/src/main/java/com/qoreidsdk/QoreIdReactButtonFragment.kt

@@ -40,27 +40,22 @@ class QoreIdReactButtonFragment : Fragment() {
         super.onViewCreated(view, savedInstanceState)
         val configData = gson.fromJson(config, Config::class.java)
 
-        if (configData.flowId != 0L) {
-            qoredIdButton
-                .params(
-                    QoreIDParams()
-                        .clientId(configData.clientId)
-                        .customerReference(configData.customerRef)
-                        .ocrAcceptedDocuments(configData.acceptedDocuments)
-                        .workflow(configData.flowId!!)
-
-                )
-            return;
+        val qoreIDParams = if (configData.flowId != 0L) {
+            QoreIDParams()
+                .clientId(configData.clientId)
+                .customerReference(configData.customerRef)
+                .ocrAcceptedDocuments(configData.acceptedDocuments)
+                .workflow(configData.flowId!!)
+        } else {
+            QoreIDParams()
+                .clientId(configData.clientId)
+                .customerReference(configData.customerRef)
+                .ocrAcceptedDocuments(configData.acceptedDocuments)
+                .collection(configData.productCode)
         }
 
         qoredIdButton
-            .params(
-                QoreIDParams()
-                    .clientId(configData.clientId)
-                    .customerReference(configData.customerRef)
-                    .ocrAcceptedDocuments(configData.acceptedDocuments)
-                    .collection(configData.productCode)
-            )
+            .params(qoreIDParams)
 
     }
 

package/lib/commonjs/index.js

@@ -20,6 +20,6 @@ Object.keys(_utils).forEach(function (key) {
     }
   });
 });
-const QoreIdButton = _reactNative.Platform.OS === 'android' ? require('./qoreIdButton.android').QoreIdButton : require('./qoreIdButton.ios').QoreIdButton;
+const QoreIdButton = _reactNative.Platform.OS === 'android' ? require('./qoreIdButton.android').QoreIdButton : {}; // (require('./qoreIdButton.ios').QoreIdButton as React.FC<IQoreIdButton>);
 exports.QoreIdButton = QoreIdButton;
 //# sourceMappingURL=index.js.map

package/lib/commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_reactNative","require","_utils","Object","keys","forEach","key","prototype","hasOwnProperty","call","_exportNames","exports","defineProperty","enumerable","get","QoreIdButton","Platform","OS"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":";;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,OAAA;AASA,IAAAC,MAAA,GAAAD,OAAA;AAAAE,MAAA,CAAAC,IAAA,CAAAF,MAAA,EAAAG,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA;EAAA,IAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAJ,MAAA,CAAAI,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAZ,MAAA,CAAAI,GAAA;IAAA;EAAA;AAAA;AANO,MAAMS,YAAY,GACvBC,qBAAQ,CAACC,EAAE,KAAK,SAAS,GACpBhB,OAAO,CAAC,wBAAwB,CAAC,CAC/Bc,YAAY,GACdd,OAAO,CAAC,oBAAoB,CAAC,CAACc,YAAwC;AAACJ,OAAA,CAAAI,YAAA,GAAAA,YAAA"}
+{"version":3,"names":["_reactNative","require","_utils","Object","keys","forEach","key","prototype","hasOwnProperty","call","_exportNames","exports","defineProperty","enumerable","get","QoreIdButton","Platform","OS"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":";;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,OAAA;AASA,IAAAC,MAAA,GAAAD,OAAA;AAAAE,MAAA,CAAAC,IAAA,CAAAF,MAAA,EAAAG,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA;EAAA,IAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAJ,MAAA,CAAAI,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAZ,MAAA,CAAAI,GAAA;IAAA;EAAA;AAAA;AANO,MAAMS,YAAY,GACvBC,qBAAQ,CAACC,EAAE,KAAK,SAAS,GACpBhB,OAAO,CAAC,wBAAwB,CAAC,CAC/Bc,YAAY,GACf,CAAC,CAA4B,EAAC;AAAAJ,OAAA,CAAAI,YAAA,GAAAA,YAAA"}

package/lib/module/index.js

@@ -1,4 +1,5 @@
 import { Platform } from 'react-native';
-export const QoreIdButton = Platform.OS === 'android' ? require('./qoreIdButton.android').QoreIdButton : require('./qoreIdButton.ios').QoreIdButton;
+export const QoreIdButton = Platform.OS === 'android' ? require('./qoreIdButton.android').QoreIdButton : {}; // (require('./qoreIdButton.ios').QoreIdButton as React.FC<IQoreIdButton>);
+
 export * from './utils';
 //# sourceMappingURL=index.js.map

package/lib/module/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["Platform","QoreIdButton","OS","require"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,cAAc;AAGvC,OAAO,MAAMC,YAAY,GACvBD,QAAQ,CAACE,EAAE,KAAK,SAAS,GACpBC,OAAO,CAAC,wBAAwB,CAAC,CAC/BF,YAAY,GACdE,OAAO,CAAC,oBAAoB,CAAC,CAACF,YAAwC;AAE7E,cAAc,SAAS"}
+{"version":3,"names":["Platform","QoreIdButton","OS","require"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,cAAc;AAGvC,OAAO,MAAMC,YAAY,GACvBD,QAAQ,CAACE,EAAE,KAAK,SAAS,GACpBC,OAAO,CAAC,wBAAwB,CAAC,CAC/BF,YAAY,GACf,CAAC,CAA4B,EAAC;;AAEpC,cAAc,SAAS"}

package/lib/typescript/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":";AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAE7C,eAAO,MAAM,YAAY,gDAIoD,CAAC;AAE9E,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":";AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAE7C,eAAO,MAAM,YAAY,gDAIU,CAAA;AAEnC,cAAc,SAAS,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qore-id/react-native-qoreid-sdk",
-  "version": "0.1.2",
+  "version": "1.0.0",
   "description": "QoreId React Native SDK",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -14,6 +14,7 @@
     "ios",
     "cpp",
     "*.podspec",
+    "!src/qoreIdButton.ios.tsx",
     "!lib/typescript/example",
     "!ios/build",
     "!android/build",
@@ -80,7 +81,7 @@
   "peerDependencies": {
     "react": "*",
     "react-native": "*",
-    "react-native-webview":"*"
+    "react-native-webview": "*"
   },
   "engines": {
     "node": ">= 16.0.0"

package/src/index.tsx

@@ -5,6 +5,6 @@ export const QoreIdButton =
   Platform.OS === 'android'
     ? (require('./qoreIdButton.android')
         .QoreIdButton as React.FC<IQoreIdButton>)
-    : (require('./qoreIdButton.ios').QoreIdButton as React.FC<IQoreIdButton>);
+    : {} as React.FC<IQoreIdButton> // (require('./qoreIdButton.ios').QoreIdButton as React.FC<IQoreIdButton>);
 
 export * from './utils';

package/src/qoreIdButton.ios.tsx

@@ -1,150 +0,0 @@
-import React, { useState } from 'react';
-import { Text, Platform, Alert, SafeAreaView } from 'react-native';
-import WebView, { WebViewMessageEvent } from 'react-native-webview';
-import type { IQoreIdButton } from './types';
-import { Dimensions } from 'react-native';
-import { TouchableOpacity } from 'react-native';
-
-export const QoreIdButton: React.FC<IQoreIdButton> = (initialData) => {
-  const [canShowWebView, setCanShowWebView] = useState(false);
-
-  const toggleWebView = () => setCanShowWebView((prev) => !prev);
-
-  const onMessage = ({ nativeEvent }: WebViewMessageEvent) => {
-    let browserEventData = null as any;
-
-    try {
-      browserEventData = JSON.parse(nativeEvent?.data || '');
-    } catch (error: any) {
-      console.error(error.message);
-    }
-   
-    switch (browserEventData?.type) {
-      case 'qoreid:verificationSubmitted':
-        if (initialData.onQoreIDSdkSubmitted)
-          initialData.onQoreIDSdkSubmitted(browserEventData);
-        break;
-      case 'qoreid:verificationError':
-        if (initialData.onQoreIDSdkError)
-          initialData.onQoreIDSdkError(browserEventData);
-        break;
-      case 'qoreid:verificationClosed':
-        setCanShowWebView(false);
-        if (initialData.onQoreIDSdkClosed)
-          initialData.onQoreIDSdkClosed(browserEventData);
-        break;
-    }
-  };
-
-  const html = `
-        <!DOCTYPE html>
-            <html>
-              <head>
-                <meta charset="UTF-8" />
-                <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-                <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-                <meta name="description" content="QoreID Web SDK" />
-                <title>QoreID | Web SDK</title>
-              </head>
-              <body>
-                <qoreid-button
-                  id="QoreIDButton"
-                  title="Verify"
-                  sdkSource="${Platform.OS === 'ios' ? 'ios_sdk' : 'android_sdk'}"
-                  flowId="${initialData.flowId || 0}"
-                  clientId="${initialData.clientId}"
-                  productCode="${initialData.productCode}"
-                  customerReference="${initialData.customerReference}"
-                  applicantData='{"firstname": "${
-                    initialData?.applicantData?.firstName
-                  }", "middlename": "${
-                    initialData?.applicantData?.middleName
-                  }", "lastname": "${initialData?.applicantData?.lastName}", "gender": "${
-                    initialData?.applicantData?.gender
-                  }", "phone": "${initialData?.applicantData?.phoneNumber}", "email": "${
-                    initialData?.applicantData?.email
-                  }"}'
-                  identityData='{"idType": "${
-                    initialData?.identityData?.idType
-                  }", "idNumber": "${initialData?.identityData?.idNumber}"}'
-                  addressData='{"address": "${
-                    initialData?.addressData?.address
-                  }", "city": "${initialData?.addressData?.city}", "lgaName": "${
-                    initialData?.addressData?.lga
-                  }"}'
-                  ocrAcceptedDocuments="${initialData?.ocrAcceptedDocuments}"
-                  onQoreIDSdkSubmitted="({type, detail})=>window.ReactNativeWebView.postMessage(JSON.stringify({ type, ...detail }))"
-                  onQoreIDSdkError="({type, detail})=>window.ReactNativeWebView.postMessage(JSON.stringify({ type, ...detail }))"
-                  onQoreIDSdkClosed="({type, detail})=>window.ReactNativeWebView.postMessage(JSON.stringify({ type, ...detail }))" 
-                />
-                <script
-                  type="text/javascript"
-                  src="https://dev-qoreid.verifynow.ng/qoreid-sdk/qoreid.js"
-                ></script>
-              </body>
-            </html>
-            `;
-  
-
-  if (!(initialData.productCode && initialData.clientId) && canShowWebView) {
-    Alert.alert(
-      'Initialization Error',
-      'Missing required fiels. e.g product code, customer ref, client Id'
-    );
-    setCanShowWebView(false);
-    return null;
-  }
-
-  if (canShowWebView) {
-    return (
-      <SafeAreaView
-        style={{
-          flex: 1,
-          alignSelf: 'stretch',
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          right: 0,
-        }}
-      >
-        <WebView
-          mixedContentMode="compatibility"
-          style={{
-            flex: 1,
-            marginTop: 40,
-            height: Dimensions.get('window').height,
-            width: Dimensions.get('screen').width,
-          }}
-          bounces={false}
-          scalesPageToFit={true}
-          javaScriptEnabled={true}
-          originWhitelist={['*']}
-          useWebView2={true}
-          useWebKit={true}
-          onMessage={onMessage}
-          source={{
-            html,
-          }}
-          onError={console.error}
-        />
-      </SafeAreaView>
-    );
-  }
-
-  return (
-    (initialData.render && initialData.render({ onPress: toggleWebView })) || (
-      <TouchableOpacity
-        style={{
-          flex: 1,
-          justifyContent: 'center',
-          alignItems: 'center',
-          paddingHorizontal: 10,
-          paddingVertical: 5,
-        }}
-        onPress={toggleWebView}
-      >
-        <Text style={{ color: 'blue' }}>Start QoreID</Text>
-      </TouchableOpacity>
-    )
-  );
-};