mirror of
https://github.com/mosip/inji-wallet.git
synced 2026-01-09 13:38:01 -05:00
[INJIMOB-2381] fix compile and target SDK 34 is causing app crash in debug build (#1877)
* [INJIMOB-2381] update package.json and resolve dependencies for react 0.73.0 Signed-off-by: Abhishek Paul <paul.apaul.abhishek.ap@gmail.com> * [INJIMOB-2381] setup for 0.73.6 Signed-off-by: Abhishek Paul <paul.apaul.abhishek.ap@gmail.com> * [INJIMOB-2381] fix font & image not loading issue changes include - move common image assets to android & iOS folders - update gradle version to 8.2 - add expo-font asset for Inter regular - replace useFont with expo-font - remove flipper (reason: 0.74 react native decoupled flipper) - npm package updates - close icon changed to close text in QRScanner.tsx Signed-off-by: KiruthikaJeyashankar <kiruthikavjshankar@gmail.com> Signed-off-by: Abhishek Paul <paul.apaul.abhishek.ap@gmail.com> * [INJIMOB-2381] update android:mosip script as per updated react native version Signed-off-by: KiruthikaJeyashankar <kiruthikavjshankar@gmail.com> * [INJIMOB-2381] fix android build failure issue Changes include: - rename android assets folder as per convention - remove unused biometrics dependency - use env from react-native-dotenv as per module registered in babel config - revert conversion of close icon to image in QRScanner component Signed-off-by: KiruthikaJeyashankar <kiruthikavjshankar@gmail.com> * [INJIMOB-2381] fix iOS build issue Signed-off-by: KiruthikaJeyashankar <kiruthikavjshankar@gmail.com> * [INJIMOB-2381] rm unused local images linking in adnroid Signed-off-by: KiruthikaJeyashankar <kiruthikavjshankar@gmail.com> * [INJIMOB-2381] fix splash screen not rendering issue in android Issue: Local assets were not loaded via React Native Image component in android, to fix this @react-native/assets-registry has been added Reference: https://github.com/expo/expo/issues/31240#issuecomment-2459049911 Other changes: - remove usage of expo-image as we dont have any explicit usecase for expo-image and its unused Signed-off-by: KiruthikaJeyashankar <kiruthikavjshankar@gmail.com> * [INJIMOB-2381] rm unused intro slider image assets Signed-off-by: KiruthikaJeyashankar <kiruthikavjshankar@gmail.com> * [INJIMOB-2381] revert back using local font assets in android Reason: Previously expo-font was used for fonts, to bring back the same compatiblity it is bought back Signed-off-by: KiruthikaJeyashankar <kiruthikavjshankar@gmail.com> * [INJIMOB-2381] use GestureHandlerRootView in root level to handle gestures ref - https://docs.swmansion.com/react-native-gesture-handler/docs/1.x/#js Signed-off-by: KiruthikaJeyashankar <kiruthikavjshankar@gmail.com> * [INJIMOB-2381] remove custom assets and linking for images in iOS Signed-off-by: KiruthikaJeyashankar <kiruthikavjshankar@gmail.com> * [INJIMOB-2381] use default parameters instead of defaultProps Reason: React 18 has marked defaultProps as deprecated and it is removed in React 19 version. To avoid the issue of deprated usage, its modified. Signed-off-by: KiruthikaJeyashankar <kiruthikavjshankar@gmail.com> * [INJIMOB-2381] remove unused terminal option in android build script Signed-off-by: KiruthikaJeyashankar <kiruthikavjshankar@gmail.com> * [INJIMOB-2381] remove font assets in android Signed-off-by: KiruthikaJeyashankar <kiruthikavjshankar@gmail.com> * [INJIMOB-2381] optimize import Signed-off-by: KiruthikaJeyashankar <kiruthikavjshankar@gmail.com> * [INJIMOB-2381] fix failing test Signed-off-by: KiruthikaJeyashankar <kiruthikavjshankar@gmail.com> * [INJIMOB-2381] set package.resolved version to 2 Signed-off-by: KiruthikaJeyashankar <kiruthikavjshankar@gmail.com> * [INJIMOB-2381] fix setting of camera view in face scanner Signed-off-by: KiruthikaJeyashankar <kiruthikavjshankar@gmail.com> * [INJIMOB-2381] fix setting of camera view in face compare Signed-off-by: KiruthikaJeyashankar <kiruthikavjshankar@gmail.com> * [INJIMOB-2381] remove flipper config file Signed-off-by: KiruthikaJeyashankar <kiruthikavjshankar@gmail.com> * [INJIMOB-2381] remove unused debug logs Signed-off-by: KiruthikaJeyashankar <kiruthikavjshankar@gmail.com> * [INJIMOB-2381] refactor use component instead of type Signed-off-by: KiruthikaJeyashankar <kiruthikavjshankar@gmail.com> * [INJIMOB-2381] refactor use GestureHandlerRootView only on root level Signed-off-by: KiruthikaJeyashankar <kiruthikavjshankar@gmail.com> * [INJIMOB-2381] refactor remove unused config linking of font assets Signed-off-by: KiruthikaJeyashankar <kiruthikavjshankar@gmail.com> * [INJIMOB-2381] refactor remove unused image assets Signed-off-by: KiruthikaJeyashankar <kiruthikavjshankar@gmail.com> * [INJIMOB-2381] fix camera persmission issue in QRScanner use expo-camera to request and getstatus of camera permission instead of expo-barcode-scanner to avoid multiple re-renders of scan screen in flow of camera permission denial Signed-off-by: KiruthikaJeyashankar <kiruthikavjshankar@gmail.com> * [INJIMOB-2381] remove package expo-barcode-scanner expo-barcode-scanner is deprecated and its suggested to use expo-camera to handle the scanning flows. The existing bar-code-scanner implementations have been replaced with expo-camera. Signed-off-by: KiruthikaJeyashankar <kiruthikavjshankar@gmail.com> * [INJIMOB-2381] use extracted enums instead of legacy expo-camera Signed-off-by: KiruthikaJeyashankar <kiruthikavjshankar@gmail.com> * [INJIMOB-2381] remove patch for react-native-0.71.8 Signed-off-by: KiruthikaJeyashankar <kiruthikavjshankar@gmail.com> * [INJIMOB-2381] revert date-fs version to 2.28.0 date-fns is not supporting filipino langauge, so we are maintaining patch for that. The patch created is for version 2.28.0 and updating the version of date-fns is causing conflicts in patch application if updated as well. To avoid this issue, version is kept as 2.28.0 Signed-off-by: KiruthikaJeyashankar <kiruthikavjshankar@gmail.com> * [INJIMOB-2381] update readme Signed-off-by: KiruthikaJeyashankar <kiruthikavjshankar@gmail.com> * [INJIMOB-2381] remove usage of legacy expo-camera in getting image type Other changes - remove resolutions block from package.json - sync pbxproj Signed-off-by: KiruthikaJeyashankar <kiruthikavjshankar@gmail.com> * [INJIMOB-2381] add active prop to expo-camera as per suggestions expo-camera suggests "Only one Camera preview can be active at any given time. If you have multiple screens in your app, you should unmount Camera components whenever a screen is unfocused.". To handle this active prop is used which is set to false on unMount of the component whenever rendering Camera from expo-camera Signed-off-by: KiruthikaJeyashankar <kiruthikavjshankar@gmail.com> --------- Signed-off-by: Abhishek Paul <paul.apaul.abhishek.ap@gmail.com> Signed-off-by: KiruthikaJeyashankar <kiruthikavjshankar@gmail.com> Signed-off-by: adityankannan-tw <109274996+adityankannan-tw@users.noreply.github.com> Co-authored-by: Abhishek Paul <paul.apaul.abhishek.ap@gmail.com> Co-authored-by: adityankannan-tw <109274996+adityankannan-tw@users.noreply.github.com>
This commit is contained in:
KiruthikaJeyashankar
committed by
GitHub
GitHub
parent
affeb5cff8
commit
68488f3f0c
@@ -1,5 +1,5 @@
|
||||
import React from 'react';
|
||||
import {Camera, CameraType} from 'expo-camera';
|
||||
import React, {useEffect, useState} from 'react';
|
||||
import {CameraType, CameraView} from 'expo-camera';
|
||||
import {View, TouchableOpacity} from 'react-native';
|
||||
import {SvgImage} from '../ui/svg';
|
||||
import {Text, Column, Row, Centered} from '../ui';
|
||||
@@ -16,16 +16,25 @@ const FaceCompare: React.FC<FaceCompareProps> = ({
|
||||
service,
|
||||
t,
|
||||
}) => {
|
||||
const [isCameraActive, setIsCameraActive] = useState<boolean>(true);
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
setIsCameraActive(false);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Column fill align="space-between" style={{backgroundColor: '#ffffff'}}>
|
||||
<View style={{flex: 2, marginTop: 15}}>
|
||||
<View style={Theme.CameraEnabledStyles.scannerContainer}>
|
||||
<View>
|
||||
<Camera
|
||||
<CameraView
|
||||
{...testIDProps('camera')}
|
||||
style={Theme.CameraEnabledStyles.scanner}
|
||||
type={whichCamera}
|
||||
facing={whichCamera}
|
||||
ref={setCameraRef}
|
||||
active={isCameraActive}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
@@ -74,7 +83,7 @@ export default FaceCompare;
|
||||
|
||||
interface FaceCompareProps {
|
||||
whichCamera: CameraType;
|
||||
setCameraRef: (node: Camera) => void;
|
||||
setCameraRef: (node: CameraView) => void;
|
||||
isCapturing: boolean;
|
||||
isVerifying: boolean;
|
||||
flipCamera: () => void;
|
||||
|
||||
@@ -1,40 +1,28 @@
|
||||
import React, {
|
||||
useCallback,
|
||||
useContext,
|
||||
useEffect,
|
||||
useRef,
|
||||
useState,
|
||||
} from 'react';
|
||||
import {Camera} from 'expo-camera';
|
||||
import {Column, Text, Button} from '.././ui';
|
||||
import React, {useCallback, useContext, useEffect, useRef, useState,} from 'react';
|
||||
import {CameraType, CameraView} from 'expo-camera';
|
||||
import {Button, Column, Text} from '.././ui';
|
||||
import {useInterpret, useSelector} from '@xstate/react';
|
||||
import {useTranslation} from 'react-i18next';
|
||||
import {
|
||||
FaceScannerEvents,
|
||||
selectIsCheckingPermission,
|
||||
selectIsValid,
|
||||
selectIsPermissionDenied,
|
||||
selectIsScanning,
|
||||
createFaceScannerMachine,
|
||||
selectIsInvalid,
|
||||
selectIsCapturing,
|
||||
selectIsVerifying,
|
||||
FaceScannerEvents,
|
||||
selectCameraRef,
|
||||
selectIsCapturing,
|
||||
selectIsCheckingPermission,
|
||||
selectIsInvalid,
|
||||
selectIsPermissionDenied, selectIsScanning,
|
||||
selectIsValid,
|
||||
selectIsVerifying,
|
||||
} from '../../machines/faceScanner';
|
||||
import {GlobalContext} from '../../shared/GlobalContext';
|
||||
import {selectIsActive} from '../../machines/app';
|
||||
import {Theme} from '.././ui/styleUtils';
|
||||
import {getRandomInt} from '../../shared/commonUtil';
|
||||
import {
|
||||
checkBlink,
|
||||
cropEyeAreaFromFace,
|
||||
faceDetectorConfig,
|
||||
getFaceBounds,
|
||||
imageCaptureConfig,
|
||||
} from './FaceScannerHelper';
|
||||
import {cropEyeAreaFromFace, faceDetectorConfig, getFaceBounds, imageCaptureConfig,} from './FaceScannerHelper';
|
||||
import LivenessDetection from './LivenessDetection';
|
||||
import FaceCompare from './FaceCompare';
|
||||
import {LIVENESS_CHECK} from '../../shared/constants';
|
||||
import {CameraPosition} from "../../shared/Utils";
|
||||
|
||||
export const FaceScanner: React.FC<FaceScannerProps> = props => {
|
||||
const {t} = useTranslation('FaceScanner');
|
||||
@@ -44,7 +32,7 @@ export const FaceScanner: React.FC<FaceScannerProps> = props => {
|
||||
const machine = useRef(createFaceScannerMachine(props.vcImages));
|
||||
const service = useInterpret(machine.current);
|
||||
|
||||
const [cameraType, setCameraType] = useState(Camera.Constants.Type.front);
|
||||
const [cameraType, setCameraType] = useState<CameraType>(CameraPosition.FRONT);
|
||||
const cameraRef = useSelector(service, selectCameraRef);
|
||||
|
||||
const isPermissionDenied = useSelector(service, selectIsPermissionDenied);
|
||||
@@ -68,35 +56,34 @@ export const FaceScanner: React.FC<FaceScannerProps> = props => {
|
||||
const [infoText, setInfoText] = useState<string>(t('livenessCaptureGuide'));
|
||||
|
||||
const setCameraRef = useCallback(
|
||||
(node: Camera) => {
|
||||
(node: CameraView) => {
|
||||
if (node != null && !isScanning) {
|
||||
service.send(FaceScannerEvents.READY(node));
|
||||
}
|
||||
},
|
||||
[isScanning],
|
||||
[isScanning, service],
|
||||
);
|
||||
|
||||
const flipCamera = () => {
|
||||
setCameraType(prevType =>
|
||||
prevType === Camera.Constants.Type.front
|
||||
? Camera.Constants.Type.back
|
||||
: Camera.Constants.Type.front,
|
||||
prevType === CameraPosition.FRONT ? CameraPosition.BACK : CameraPosition.FRONT,
|
||||
);
|
||||
};
|
||||
|
||||
function handleOnCancel() {
|
||||
const handleOnCancel = () => {
|
||||
props.onCancel();
|
||||
}
|
||||
};
|
||||
|
||||
async function captureImage(screenColor) {
|
||||
const captureImage = async (screenColor: string) => {
|
||||
try {
|
||||
if (cameraRef) {
|
||||
const capturedImage = await cameraRef.takePictureAsync(
|
||||
imageCaptureConfig,
|
||||
);
|
||||
|
||||
setPicArray([...picArray, {color: screenColor, image: capturedImage}]);
|
||||
|
||||
setPicArray(prevArray => [
|
||||
...prevArray,
|
||||
{color: screenColor, image: capturedImage},
|
||||
]);
|
||||
if (counter === randomNumToFaceCompare) {
|
||||
setFaceToCompare(capturedImage);
|
||||
}
|
||||
@@ -104,14 +91,14 @@ export const FaceScanner: React.FC<FaceScannerProps> = props => {
|
||||
} catch (error) {
|
||||
console.error('Error capturing image:', error);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
async function handleFacesDetected({faces}) {
|
||||
checkBlink(faces[0]);
|
||||
const handleFacesDetected = async ({faces}: {faces: any[]}) => {
|
||||
if (!faces || faces.length === 0) return;
|
||||
|
||||
if (counter == MAX_COUNTER) {
|
||||
setCounter(counter + 1);
|
||||
cameraRef.pausePreview();
|
||||
if (counter === MAX_COUNTER) {
|
||||
setCounter(prev => prev + 1);
|
||||
cameraRef?.pausePreview();
|
||||
|
||||
setScreenColor('#ffffff');
|
||||
setInfoText(t('faceProcessingInfo'));
|
||||
@@ -122,46 +109,38 @@ export const FaceScanner: React.FC<FaceScannerProps> = props => {
|
||||
faceToCompare,
|
||||
);
|
||||
return result ? props.onValid() : props.onInvalid();
|
||||
} else if (faces.length > 0) {
|
||||
const [withinXBounds, withinYBounds, withinYawAngle, withinRollAngle] =
|
||||
getFaceBounds(faces[0]);
|
||||
|
||||
setInfoText(t('faceOutGuide'));
|
||||
|
||||
if (
|
||||
withinXBounds &&
|
||||
withinYBounds &&
|
||||
withinRollAngle &&
|
||||
withinYawAngle &&
|
||||
counter < MAX_COUNTER
|
||||
) {
|
||||
const randomNum = getRandomInt(0, 2);
|
||||
const randomColor = screenFlashColors[randomNum];
|
||||
setScreenColor(randomColor);
|
||||
setCounter(counter + 1);
|
||||
setInfoText(t('faceInGuide'));
|
||||
await captureImage(screenColor);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const face = faces[0];
|
||||
const [withinXBounds, withinYBounds, withinYawAngle, withinRollAngle] =
|
||||
getFaceBounds(face);
|
||||
|
||||
if (withinXBounds && withinYBounds && withinRollAngle && withinYawAngle) {
|
||||
setScreenColor(screenFlashColors[getRandomInt(0, 2)]);
|
||||
setCounter(prev => prev + 1);
|
||||
setInfoText(t('faceInGuide'));
|
||||
await captureImage(screenColor);
|
||||
} else {
|
||||
setInfoText(t('faceOutGuide'));
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (isValid) {
|
||||
props.onValid();
|
||||
} else if (isInvalid) {
|
||||
props.onInvalid();
|
||||
}
|
||||
}, [isValid, isInvalid]);
|
||||
if (isValid) props.onValid();
|
||||
if (isInvalid) props.onInvalid();
|
||||
}, [isValid, isInvalid, props]);
|
||||
|
||||
useEffect(() => {
|
||||
if (isActive) {
|
||||
service.send(FaceScannerEvents.APP_FOCUSED());
|
||||
}
|
||||
}, [isActive]);
|
||||
}, [isActive, service]);
|
||||
|
||||
if (isCheckingPermission) {
|
||||
return <Column></Column>;
|
||||
} else if (isPermissionDenied) {
|
||||
return <Column children={undefined} />;
|
||||
}
|
||||
|
||||
if (isPermissionDenied) {
|
||||
return (
|
||||
<Column padding="24" fill align="space-between">
|
||||
<Text
|
||||
@@ -194,24 +173,24 @@ export const FaceScanner: React.FC<FaceScannerProps> = props => {
|
||||
t={t}
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<FaceCompare
|
||||
whichCamera={cameraType}
|
||||
setCameraRef={setCameraRef}
|
||||
flipCamera={flipCamera}
|
||||
isCapturing={isCapturing}
|
||||
isVerifying={isVerifying}
|
||||
service={service}
|
||||
t={t}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<FaceCompare
|
||||
whichCamera={cameraType}
|
||||
setCameraRef={setCameraRef}
|
||||
flipCamera={flipCamera}
|
||||
isCapturing={isCapturing}
|
||||
isVerifying={isVerifying}
|
||||
service={service}
|
||||
t={t}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
interface FaceScannerProps {
|
||||
vcImages: string[];
|
||||
onValid: () => void;
|
||||
onInvalid: () => void;
|
||||
isLiveness: boolean;
|
||||
onCancel: () => void;
|
||||
}
|
||||
|
||||
@@ -3,7 +3,6 @@ import {LIVENESS_THRESHOLD, isAndroid} from '../../shared/constants';
|
||||
import {closest} from 'color-diff';
|
||||
import * as FaceDetector from 'expo-face-detector';
|
||||
import ImageEditor from '@react-native-community/image-editor';
|
||||
import {ImageType} from 'expo-camera';
|
||||
import {getColors} from 'react-native-image-colors';
|
||||
import {faceCompare} from '@iriscan/biometric-sdk-react-native';
|
||||
|
||||
@@ -39,6 +38,10 @@ const colorComparePalette = [
|
||||
{R: 0, G: 0, B: 255},
|
||||
];
|
||||
|
||||
export enum ImageType {
|
||||
jpg = 'jpg',
|
||||
}
|
||||
|
||||
export const imageCaptureConfig = {
|
||||
base64: true,
|
||||
quality: 1,
|
||||
|
||||
Reference in New Issue
Block a user