@oiti/rn-liveness3d 1.0.0 → 1.0.2

package/lib/typescript/index.d.ts

@@ -1,5 +1,17 @@
-export declare function startLiveness3d(appKey: string): Promise<any>;
-export declare function StartLiveness3dCustomView({ instructionView, }: {
-    instructionView: any;
+import { FC } from 'react';
+import type { ArgsType } from './@types/ArgsType';
+export declare function startLiveness3d(options: ArgsType): Promise<any>;
+export declare function logEvent3D(name: string, appkey: string): Promise<any>;
+export declare function checkIosPermission(): Promise<any>;
+export declare function checkIosPermissionGranted(): Promise<any>;
+export declare function Liveness3dView({ CustomInstructionView, CustomPermissionView, options, }: {
+    CustomInstructionView: FC;
+    CustomPermissionView: FC;
+    options: ArgsType;
+}): JSX.Element;
+export declare function GetIntructionView({ CustomInstructionView, CustomPermissionView, options, }: {
+    CustomInstructionView: FC;
+    CustomPermissionView: FC;
+    options: ArgsType;
 }): JSX.Element;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAoBA,wBAAgB,eAAe,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,CAAC,GAAG,CAAC,CAE5D;AAED,wBAAgB,yBAAyB,CAAC,EACxC,eAAe,GAChB,EAAE;IACD,eAAe,EAAE,GAAG,CAAC;CACtB,eAEA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAuB,MAAM,OAAO,CAAC;AAEvD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AA0BlD,wBAAgB,eAAe,CAAC,OAAO,EAAE,QAAQ,GAAG,OAAO,CAAC,GAAG,CAAC,CAwB/D;AAED,wBAAgB,UAAU,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,OAAO,CAAC,GAAG,CAAC,CAErE;AAED,wBAAgB,kBAAkB,IAAI,OAAO,CAAC,GAAG,CAAC,CAEjD;AACD,wBAAgB,yBAAyB,IAAI,OAAO,CAAC,GAAG,CAAC,CAExD;AAoDD,wBAAgB,cAAc,CAAC,EAC7B,qBAAqB,EACrB,oBAAoB,EACpB,OAAO,GACR,EAAE;IACD,qBAAqB,EAAE,EAAE,CAAC;IAC1B,oBAAoB,EAAE,EAAE,CAAC;IACzB,OAAO,EAAE,QAAQ,CAAC;CACnB,eAQA;AAED,wBAAgB,iBAAiB,CAAC,EAChC,qBAAqB,EACrB,oBAAoB,EACpB,OAAO,GACR,EAAE;IACD,qBAAqB,EAAE,EAAE,CAAC;IAC1B,oBAAoB,EAAE,EAAE,CAAC;IACzB,OAAO,EAAE,QAAQ,CAAC;CACnB,eAsDA"}

package/lib/typescript/screens/Liveness3D/InstructionsView.d.ts

@@ -0,0 +1,5 @@
+export default function InstructionsView({ onVerify, onBack, }: {
+    onVerify(): void;
+    onBack(): void;
+}): JSX.Element;
+//# sourceMappingURL=InstructionsView.d.ts.map

package/lib/typescript/screens/Liveness3D/InstructionsView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InstructionsView.d.ts","sourceRoot":"","sources":["../../../../src/screens/Liveness3D/InstructionsView.tsx"],"names":[],"mappings":"AAkBA,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,QAAQ,EACR,MAAM,GACP,EAAE;IACD,QAAQ,IAAI,IAAI,CAAC;IACjB,MAAM,IAAI,IAAI,CAAC;CAChB,eAkDA"}

package/lib/typescript/screens/PermissionView.d.ts

@@ -0,0 +1,5 @@
+export default function PermissionView({ onVerify, onBack, }: {
+    onVerify(): void;
+    onBack(): void;
+}): JSX.Element;
+//# sourceMappingURL=PermissionView.d.ts.map

package/lib/typescript/screens/PermissionView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PermissionView.d.ts","sourceRoot":"","sources":["../../../src/screens/PermissionView.tsx"],"names":[],"mappings":"AAWA,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,QAAQ,EACR,MAAM,GACP,EAAE;IACD,QAAQ,IAAI,IAAI,CAAC;IACjB,MAAM,IAAI,IAAI,CAAC;CAChB,eA+BA"}

package/lib/typescript/utils/normalize.d.ts

@@ -0,0 +1,2 @@
+export declare function normalize(size: any, scale: any): any;
+//# sourceMappingURL=normalize.d.ts.map

package/lib/typescript/utils/normalize.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"normalize.d.ts","sourceRoot":"","sources":["../../../src/utils/normalize.tsx"],"names":[],"mappings":"AAEA,wBAAgB,SAAS,CAAC,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,OAO9C"}

package/oiti-rn-liveness3d.podspec

@@ -17,7 +17,8 @@ Pod::Spec.new do |s|
   s.source_files = "ios/**/*.{h,m,mm,swift}"
 
   s.dependency "React-Core"
-  s.ios.dependency 'FaceCaptcha', '~> 4.0.9-beta1'
+  s.ios.dependency 'FaceCaptcha', '~> 4.1.1'
+  #s.ios.dependency 'OISecurity', '~> 1.0.0'
 
   # Don't install the dependencies when we run `pod install` in the old architecture.
   if ENV['RCT_NEW_ARCH_ENABLED'] == '1' then

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oiti/rn-liveness3d",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "test",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

package/src/@types/ArgsType.ts

@@ -0,0 +1,12 @@
+export type ArgsType = {
+  appkey: string;
+  environment: '.HML' | '.PRD';
+  baseUrl: string;
+  apparence: ApparenceType;
+  liveness3Dtext: object;
+};
+
+export type ApparenceType = {
+  backgroundColor: string | undefined;
+  loadingColor: string | undefined;
+};

package/src/index.tsx

@@ -1,5 +1,8 @@
-import React from 'react';
-import { NativeModules, Platform } from 'react-native';
+import React, { FC, useEffect, useState } from 'react';
+import { NativeModules, Platform, PermissionsAndroid } from 'react-native';
+import type { ArgsType } from './@types/ArgsType';
+import InstructionsView from './screens/Liveness3D/InstructionsView';
+import PermissionView from './screens/PermissionView';
 
 const LINKING_ERROR =
   `The package '@oiti/rn-liveness3d' doesn't seem to be linked. Make sure: \n\n` +
@@ -7,6 +10,11 @@ const LINKING_ERROR =
   '- You rebuilt the app after installing the package\n' +
   '- You are not using Expo Go\n';
 
+const SCREEN = Object.freeze({
+  INSTRUCTION_VIEW: 1,
+  PERMISSION_VIEW: 2,
+} as const);
+
 const RnLiveness3d = NativeModules.RnLiveness3d
   ? NativeModules.RnLiveness3d
   : new Proxy(
@@ -18,14 +26,171 @@ const RnLiveness3d = NativeModules.RnLiveness3d
       }
     );
 
-export function startLiveness3d(appKey: string): Promise<any> {
-  return RnLiveness3d.startliveness3d(appKey);
+export function startLiveness3d(options: ArgsType): Promise<any> {
+  let args: ArgsType = {
+    appkey: options?.appkey === undefined ? '' : options?.appkey,
+    environment:
+      options?.environment === undefined ? '.HML' : options?.environment,
+    baseUrl: options?.baseUrl === undefined ? '' : options?.baseUrl,
+    apparence: {
+      backgroundColor:
+        options?.apparence?.backgroundColor === ''
+          ? '#1E1E1E'
+          : options?.apparence?.backgroundColor,
+      loadingColor:
+        options?.apparence?.loadingColor === ''
+          ? '#05D758'
+          : options?.apparence?.loadingColor,
+    },
+    liveness3Dtext: options.liveness3Dtext || [],
+  };
+
+  if (Platform.OS === 'android') {
+    return RnLiveness3d.startliveness3d(args.appkey);
+  }
+
+  return RnLiveness3d.startliveness3d(args);
+}
+
+export function logEvent3D(name: string, appkey: string): Promise<any> {
+  return RnLiveness3d.logevent({ event: name, appkey: appkey });
+}
+
+export function checkIosPermission(): Promise<any> {
+  return RnLiveness3d.checkiospermission({ p: 'granted' });
+}
+export function checkIosPermissionGranted(): Promise<any> {
+  return RnLiveness3d.checkpermissiongranted({ p: 'granted' });
 }
 
-export function StartLiveness3dCustomView({
-  instructionView,
+const PERMISSIONS_REQUEST: any = PermissionsAndroid.PERMISSIONS.CAMERA;
+
+const requestCameraPermission = async (options: ArgsType) => {
+  if (Platform.OS === 'ios') {
+    checkIosPermission().then((result) => {
+      if (result === 'true') {
+        return RnLiveness3d.startliveness3d(options);
+      }
+      if (result === 'false') {
+        return;
+      }
+    });
+  }
+  try {
+    const granted = await PermissionsAndroid.request(PERMISSIONS_REQUEST, {
+      title: 'Cool Photo App Camera Permission',
+      message: 'Precisamos acessar sua cãmera ',
+      buttonNeutral: 'Ver Depois',
+      buttonNegative: 'Cancelar',
+      buttonPositive: 'OK',
+    });
+
+    if (granted === PermissionsAndroid.RESULTS.GRANTED) {
+      startLiveness3d(options).then((result) => console.log(result));
+    } else {
+      console.log('Camera permission denied');
+    }
+  } catch (err) {
+    console.warn(err);
+  }
+};
+
+async function checkPermission(): Promise<boolean> {
+  if (Platform.OS === 'ios') {
+    const grantediso = await checkIosPermissionGranted();
+    if (grantediso === 'true') {
+      return true;
+    }
+    if (grantediso === 'false') {
+      return false;
+    }
+  }
+  const granted = await PermissionsAndroid.check(PERMISSIONS_REQUEST);
+  if (granted) {
+    return true;
+  } else {
+    return false;
+  }
+}
+
+export function Liveness3dView({
+  CustomInstructionView,
+  CustomPermissionView,
+  options,
 }: {
-  instructionView: any;
+  CustomInstructionView: FC;
+  CustomPermissionView: FC;
+  options: ArgsType;
 }) {
-  return <>{instructionView}</>;
+  return (
+    <GetIntructionView
+      CustomInstructionView={CustomInstructionView}
+      CustomPermissionView={CustomPermissionView}
+      options={options}
+    />
+  );
+}
+
+export function GetIntructionView({
+  CustomInstructionView,
+  CustomPermissionView,
+  options,
+}: {
+  CustomInstructionView: FC;
+  CustomPermissionView: FC;
+  options: ArgsType;
+}) {
+  const [screen, setScreen] = useState(1);
+
+  function onBack() {
+    switch (screen) {
+      case SCREEN.INSTRUCTION_VIEW:
+        setScreen(1);
+        break;
+      case SCREEN.PERMISSION_VIEW:
+        setScreen(1);
+        break;
+    }
+  }
+  async function verifyPermission() {
+    if (screen === 1) {
+      logEvent3D('ACTION_L3FT_instructionContinue', options.appkey);
+      if ((await checkPermission()) === true) {
+        startLiveness3d(options).then((result) => console.log(result));
+      } else {
+        setScreen(2);
+      }
+    }
+    if (screen === 2) {
+      logEvent3D('ACTION_L3FT_permissionVerify', options.appkey);
+      await requestCameraPermission(options);
+      setScreen(1);
+    }
+  }
+  useEffect(() => {
+    if (screen === 1) {
+      logEvent3D('STATE_L3FT_instructionView', options.appkey);
+    }
+    if (screen === 2) {
+      logEvent3D('STATE_L3FT_permissionView', options.appkey);
+    }
+  });
+
+  return (
+    <>
+      {screen === 1 &&
+        (!CustomInstructionView ? (
+          <InstructionsView onVerify={verifyPermission} onBack={onBack} />
+        ) : (
+          CustomInstructionView
+        ))}
+
+      {screen === 2 &&
+        (!CustomPermissionView ? (
+          <PermissionView onVerify={verifyPermission} onBack={onBack} />
+        ) : (
+          CustomPermissionView
+        ))}
+    </>
+  );
 }

package/src/screens/Liveness3D/InstructionsView.tsx

@@ -0,0 +1,214 @@
+import * as React from 'react';
+
+import {
+  StyleSheet,
+  View,
+  Text,
+  Image,
+  TouchableOpacity,
+  Dimensions,
+  Platform,
+} from 'react-native';
+import { normalize } from '../../utils/normalize';
+
+const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get('window');
+
+const scaleW = SCREEN_WIDTH / 320;
+const scaleH = SCREEN_HEIGHT / 920;
+
+export default function InstructionsView({
+  onVerify,
+  onBack,
+}: {
+  onVerify(): void;
+  onBack(): void;
+}) {
+  return (
+    <View style={styles.container}>
+      <View style={styles.boxImg}>
+        <TouchableOpacity onPress={() => onBack()} style={styles.navigationBar}>
+          <Image
+            source={require('../../assets/images/left-arrow.png')}
+            style={styles.leftArrow}
+          />
+        </TouchableOpacity>
+        <View style={styles.imgContainer}>
+          <Image
+            source={require('../../assets/images/img_face.png')}
+            style={styles.imgFace}
+          />
+        </View>
+      </View>
+
+      <View style={styles.boxBtn}>
+        <Text style={styles.title}>Reconhecimento Facial</Text>
+        <Text style={styles.subtitle}>Isso garante que você é você mesmo.</Text>
+
+        <View style={styles.intructions}>
+          <View style={styles.rowInstructions}>
+            <View style={styles.boxIcon}>
+              <Image
+                source={require('../../assets/images/lightbulb_outline.png')}
+              />
+            </View>
+            <Text style={styles.boxText}>
+              Escolha um ambiente bem iluminado.
+            </Text>
+          </View>
+          <View style={styles.rowInstructions}>
+            <View style={styles.boxIcon}>
+              <Image source={require('../../assets/images/face.png')} />
+            </View>
+            <Text style={styles.boxText}>
+              Não use acessórios como bonés, máscaras e afins.
+            </Text>
+          </View>
+        </View>
+        <View style={styles.viewBtn}>
+          <TouchableOpacity onPress={() => onVerify()} style={styles.nextBtn}>
+            <Text style={styles.nextText}>Continuar</Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    backgroundColor: '#1648CD',
+    width: '100%',
+    justifyContent: 'center',
+  },
+  rowInstructions: {
+    width: '100%',
+    flex: 2,
+    alignItems: 'center',
+    flexDirection: 'row',
+  },
+  viewBtn: {
+    width: '90%',
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  navigationBar: {
+    width: '100%',
+  },
+  intructions: {
+    width: '90%',
+    flex: 1.5,
+  },
+  boxIcon: {
+    width: 64,
+    height: 64,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderColor: '#E0E0E0',
+    borderWidth: 1,
+    backgroundColor: '#F5f5f5',
+    borderRadius: 100,
+  },
+  boxText: {
+    paddingLeft: 20,
+    width: '75%',
+    color: '#000000',
+    fontSize: normalize(25, scaleW),
+  },
+  imgContainer: {
+    flex: 1,
+    width: '90%',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+  },
+  title: {
+    marginTop: 30,
+    marginLeft: 20,
+    width: '90%',
+    fontSize: normalize(29, scaleW),
+    fontWeight: 'bold',
+    /* fontFamily: 'Ubuntu-Bold', */
+    color: '#1E1E1E',
+  },
+  nextBtn: {
+    width: 300,
+    backgroundColor: '#05D758',
+    alignItems: 'center',
+    fontWeight: 900,
+    borderRadius: 50,
+    marginTop: 0,
+  },
+  nextText: {
+    /* fontFamily: 'Ubuntu-Medium', */
+    fontSize: normalize(25, scaleW),
+    margin: 13,
+    color: '#000000',
+  },
+  description_one: {
+    textAlign: 'center',
+    color: '#FFFFFF',
+    /* fontFamily: 'Ubuntu-Bold', */
+    fontSize: 30,
+    marginLeft: 60,
+    marginRight: 60,
+    marginTop: 10,
+  },
+  boxInfo: {
+    width: '100%',
+    paddingTop: 15,
+    alignItems: 'center',
+    backgroundColor: '#037eee',
+  },
+  boxBtn: {
+    width: '100%',
+    flex: Platform.OS === 'ios' ? 1 : 1.3,
+    borderTopLeftRadius: 35,
+    borderTopRightRadius: 35,
+    height: '100%',
+    alignItems: 'center',
+    backgroundColor: '#FFFFFF',
+  },
+  boxImg: {
+    width: '100%',
+    flex: 1,
+    height: '100%',
+    alignItems: 'center',
+  },
+  subtitle: {
+    /* fontFamily: 'Ubuntu-Regular', */
+    fontSize: normalize(20, scaleW),
+    marginLeft: 20,
+    width: '90%',
+    color: '#666666',
+    paddingBottom: 25,
+  },
+  iconTop: {
+    marginTop: 60,
+    marginLeft: 20,
+    width: 55,
+    height: 55,
+  },
+  leftArrow: {
+    marginTop: normalize(70, scaleH),
+    marginLeft: 20,
+    width: 25,
+    height: 25,
+  },
+  imgFace: {
+    height: '100%',
+    flex: 1,
+    aspectRatio: 4 / 4.4,
+  },
+  waveTop: {
+    flex: 1,
+    width: '100%',
+    height: 400,
+  },
+  box: {
+    width: 60,
+    height: 60,
+    marginVertical: 20,
+  },
+});

package/src/screens/PermissionView.tsx

@@ -0,0 +1,174 @@
+import * as React from 'react';
+import { Dimensions } from 'react-native';
+
+import { StyleSheet, View, Text, Image, TouchableOpacity } from 'react-native';
+import { normalize } from '../utils/normalize';
+
+const { height: SCREEN_HEIGHT } = Dimensions.get('window');
+
+//const scaleW = SCREEN_WIDTH / 320;
+const scaleH = SCREEN_HEIGHT / 920;
+
+export default function PermissionView({
+  onVerify,
+  onBack,
+}: {
+  onVerify(): void;
+  onBack(): void;
+}) {
+  return (
+    <View style={styles.container}>
+      <View style={styles.navigationBar}>
+        <TouchableOpacity onPress={() => onBack()} style={styles.navigationBar}>
+          <Image
+            source={require('../assets/images/left-arrow-b.png')}
+            style={styles.leftArrow}
+          />
+        </TouchableOpacity>
+      </View>
+
+      <View style={styles.containerPerm}>
+        <View style={styles.imgContainer}>
+          <Image
+            source={require('../assets/images/camera_alt.png')}
+            style={styles.imgFace}
+          />
+          <View style={styles.intructions}>
+            <Text style={styles.title}>Permissões da câmera desativadas.</Text>
+            <Text style={styles.subtitle}>
+              Habilitar as configurações do seu aparelho.
+            </Text>
+            <TouchableOpacity onPress={() => onVerify()} style={styles.nextBtn}>
+              <Text style={styles.nextText}>Verificar</Text>
+            </TouchableOpacity>
+          </View>
+        </View>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    backgroundColor: '#FFFFF',
+    width: '100%',
+    justifyContent: 'center',
+  },
+  rowInstructions: {
+    width: '100%',
+    flex: 2,
+    alignItems: 'center',
+    flexDirection: 'row',
+  },
+  viewBtn: {
+    width: '90%',
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  navigationBar: {
+    width: '100%',
+    backgroundColor: '#FFF',
+  },
+  containerPerm: {
+    width: '100%',
+    backgroundColor: '#FFFFFF',
+    justifyContent: 'center',
+    flex: 1,
+    alignItems: 'center',
+  },
+  intructions: {
+    width: '90%',
+    flex: 1,
+  },
+  boxIcon: {
+    width: 64,
+    height: 64,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderColor: '#E0E0E0',
+    borderWidth: 1,
+    backgroundColor: '#F5f5f5',
+    borderRadius: 100,
+  },
+  boxText: {
+    paddingLeft: 20,
+    width: '75%',
+    color: '#000000',
+    fontSize: 25,
+  },
+  imgContainer: {
+    flex: 1,
+    width: '90%',
+    marginTop: 100,
+    alignItems: 'center',
+    textAlign: 'center',
+    justifyContent: 'center',
+  },
+  title: {
+    marginTop: 30,
+    width: '100%',
+    marginBottom: 20,
+    fontSize: 29,
+    fontWeight: 'bold',
+    alignItems: 'center',
+    textAlign: 'center',
+    /* fontFamily: 'Ubuntu-Bold', */
+    color: '#1E1E1E',
+  },
+  nextBtn: {
+    width: '100%',
+    backgroundColor: '#05D758',
+    alignItems: 'center',
+    fontWeight: 900,
+    borderRadius: 50,
+    marginTop: 0,
+  },
+  nextText: {
+    /* fontFamily: 'Ubuntu-Medium', */
+    fontSize: 25,
+    margin: 13,
+  },
+  boxBtn: {
+    width: '100%',
+    flex: 1,
+    borderTopLeftRadius: 35,
+    borderTopRightRadius: 35,
+    alignItems: 'center',
+    backgroundColor: '#FFFFFF',
+  },
+  subtitle: {
+    /* fontFamily: 'Ubuntu-Regular', */
+    fontSize: 23,
+    width: '100%',
+    color: '#666666',
+    alignItems: 'center',
+    textAlign: 'center',
+    paddingBottom: 25,
+  },
+  iconTop: {
+    marginTop: 60,
+    marginLeft: 20,
+    width: 55,
+    height: 55,
+  },
+  leftArrow: {
+    marginTop: normalize(70, scaleH),
+    marginLeft: 20,
+    width: 25,
+    height: 25,
+  },
+  imgFace: {},
+  waveTop: {
+    flex: 1,
+    width: '100%',
+    height: 400,
+  },
+  box: {
+    width: 60,
+    height: 60,
+    marginVertical: 20,
+  },
+});

package/src/utils/normalize.tsx

@@ -0,0 +1,10 @@
+import { Platform, PixelRatio } from 'react-native';
+
+export function normalize(size: any, scale: any) {
+  const newSize = size * scale;
+  if (Platform.OS === 'ios') {
+    return size;
+  } else {
+    return Math.round(PixelRatio.roundToNearestPixel(newSize)) - 10;
+  }
+}