@eohjsc/react-native-smart-city 0.7.34 → 0.7.36

package/android/build.gradle

@@ -39,7 +39,7 @@ buildscript {
 }
 
 android {
-    namespace "com.eohjsc.smartcity"
+    namespace "com.eoh.smartcity"
     compileSdkVersion safeExtGet('compileSdkVersion', DEFAULT_COMPILE_SDK_VERSION)
     buildToolsVersion safeExtGet('buildToolsVersion', DEFAULT_BUILD_TOOLS_VERSION)
     defaultConfig {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eohjsc/react-native-smart-city",
   "title": "React Native Smart Home",
-  "version": "0.7.34",
+  "version": "0.7.36",
   "description": "TODO",
   "main": "index.js",
   "files": [
@@ -203,6 +203,11 @@
     "validator": "^13.1.1",
     "victory-native": "^41.0.1"
   },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-native": ">=0.73.0",
+    "react-native-vision-camera": ">=4.0.0"
+  },
   "bugs": {
     "url": "https://github.com/github_account/react-native-smart-city/issues"
   },

package/src/screens/HanetCamera/CaptureFaceID.js

@@ -1,7 +1,11 @@
-import React, { memo, useState, useRef } from 'react';
-import { View, ActivityIndicator, TouchableOpacity } from 'react-native';
+import React, { memo, useState, useRef, useEffect } from 'react';
+import { View, ActivityIndicator, TouchableOpacity, Image } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
-import { RNCamera } from 'react-native-camera';
+import {
+  Camera,
+  useCameraDevice,
+  useCameraPermission,
+} from 'react-native-vision-camera';
 import { HeaderCustom } from '../../commons/Header';
 import { FullLoading } from '../../commons';
 import Text from '../../commons/Text';
@@ -30,37 +34,44 @@ const CaptureFaceID = ({ route }) => {
   const [capturing, setCapturing] = useState(false);
   const [imageUri, setImageUri] = useState();
   const [loading, setLoading] = useState(false);
+  const [isCameraActive, setIsCameraActive] = useState(true);
 
-  const refCamera = useRef();
+  const refCamera = useRef(null);
+  const { hasPermission, requestPermission } = useCameraPermission();
+  const device = useCameraDevice('back');
+
+  useEffect(() => {
+    if (!hasPermission) {
+      requestPermission();
+    }
+  }, [hasPermission, requestPermission]);
 
   const beginCaptureFace = async () => {
     setCapturing(true);
     setOpenCamera(true);
+    setIsCameraActive(true);
   };
 
   const captureFace = async () => {
     if (refCamera.current) {
-      const options = {
-        quality: 0.7,
-        height: 1280,
-        width: 736,
-        imageType: 'jpg',
-        pauseAfterCapture: true,
-        forceUpOrientation: true,
-        fixOrientation: true,
-        orientation: 'portrait',
-      };
-      const data = await refCamera.current.takePictureAsync(options);
-      setImageUri(data.uri);
-      setCapturing(false);
+      try {
+        const photo = await refCamera.current.takePhoto({
+          qualityPrioritization: 'balanced',
+        });
+        const uri = `file://${photo.path}`;
+        setImageUri(uri);
+        setCapturing(false);
+        setIsCameraActive(false);
+      } catch (error) {
+        console.error('Failed to take photo:', error);
+      }
     }
   };
 
   const resumeCapture = () => {
-    if (refCamera.current) {
-      setCapturing(true);
-      refCamera.current.resumePreview();
-    }
+    setCapturing(true);
+    setImageUri(undefined);
+    setIsCameraActive(true);
   };
 
   const updateMemberFaceID = async () => {
@@ -109,30 +120,48 @@ const CaptureFaceID = ({ route }) => {
     }
   };
 
+  const renderCameraContent = () => {
+    if (!hasPermission || !device) {
+      return <LoadingCamera />;
+    }
+
+    return (
+      <>
+        <Camera
+          ref={refCamera}
+          style={{
+            height: Constants.height,
+            width: Constants.width,
+          }}
+          device={device}
+          isActive={isCameraActive}
+          photo={true}
+        />
+        {isCameraActive && (
+          <View style={styles.maskOuter}>
+            <FaceFrameSvg />
+          </View>
+        )}
+        {!isCameraActive && imageUri && (
+          <Image
+            source={{ uri: imageUri }}
+            style={{
+              position: 'absolute',
+              height: Constants.height,
+              width: Constants.width,
+            }}
+          />
+        )}
+      </>
+    );
+  };
+
   return (
     <View style={styles.container}>
       <HeaderCustom title={title} isShowSeparator />
       {openCamera && (
         <View style={styles.wrapCamera}>
-          <RNCamera
-            ref={refCamera}
-            style={{
-              height: Constants.height,
-              width: Constants.width,
-            }}
-            type={RNCamera.Constants.Type.back}
-          >
-            {({ camera, status, recordAudioPermissionStatus }) => {
-              if (status !== 'READY') {
-                return <LoadingCamera />;
-              }
-              return (
-                <View style={styles.maskOuter}>
-                  <FaceFrameSvg />
-                </View>
-              );
-            }}
-          </RNCamera>
+          {renderCameraContent()}
         </View>
       )}
       {!openCamera && (

package/src/screens/HanetCamera/__test__/CaptureFaceID.test.js

@@ -5,12 +5,40 @@ import MockAdapter from 'axios-mock-adapter';
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
 import HanetCaptureFaceID from '../CaptureFaceID';
-import { RNCamera } from 'react-native-camera';
+import { Camera } from 'react-native-vision-camera';
 import api from '../../../utils/Apis/axios';
 import { API } from '../../../configs';
 
 const mock = new MockAdapter(api.axiosInstance);
 
+const mockTakePhoto = jest.fn().mockResolvedValue({
+  path: '/mock/path/photo.jpg',
+  width: 1280,
+  height: 720,
+});
+
+jest.mock('react-native-vision-camera', () => {
+  const React = require('react');
+  const { View } = require('react-native');
+
+  return {
+    Camera: React.forwardRef((props, ref) => {
+      React.useImperativeHandle(ref, () => ({
+        takePhoto: mockTakePhoto,
+      }));
+      return <View testID="mock-camera" {...props} />;
+    }),
+    useCameraDevice: () => ({
+      id: 'mock-device',
+      position: 'back',
+    }),
+    useCameraPermission: () => ({
+      hasPermission: true,
+      requestPermission: jest.fn().mockResolvedValue(true),
+    }),
+  };
+});
+
 const wrapComponent = (route) => (
   <SCProvider initState={mockSCStore({})}>
     <HanetCaptureFaceID route={route} />
@@ -23,6 +51,7 @@ describe('Test HanetCaptureFaceID', () => {
 
   beforeEach(() => {
     mockSetAvatar.mockClear();
+    mockTakePhoto.mockClear();
     route = {
       params: {
         title: 'title',
@@ -46,7 +75,7 @@ describe('Test HanetCaptureFaceID', () => {
     await act(async () => {
       await touches[1].props.onPress();
     });
-    const camera = instance.findByType(RNCamera);
+    const camera = instance.findByType(Camera);
     expect(camera).toBeDefined();
 
     // capture

package/src/screens/ScanChipQR/components/QRScan/__test__/QRScan.test.js

@@ -1,14 +1,34 @@
 import React from 'react';
-import { RNCamera } from 'react-native-camera';
 import { act, create } from 'react-test-renderer';
 
 import { SCProvider } from '../../../../../context';
 import { mockSCStore } from '../../../../../context/mockStore';
 import QRScan from '../index';
+import { Camera } from 'react-native-vision-camera';
 
 const mockedOnScan = jest.fn();
 const mockedSetLoading = jest.fn();
 
+jest.mock('react-native-vision-camera', () => {
+  const React = require('react');
+  const { View } = require('react-native');
+
+  return {
+    Camera: React.forwardRef((props, ref) => (
+      <View testID="mock-camera" {...props} />
+    )),
+    useCameraDevice: () => ({
+      id: 'mock-device',
+      position: 'back',
+    }),
+    useCameraPermission: () => ({
+      hasPermission: true,
+      requestPermission: jest.fn().mockResolvedValue(true),
+    }),
+    useCodeScanner: (options) => options,
+  };
+});
+
 const wrapComponent = (data) => (
   <SCProvider initState={mockSCStore({})}>
     <QRScan {...data} />
@@ -20,6 +40,7 @@ describe('Test QRScan', () => {
 
   beforeEach(() => {
     Date.now = jest.fn(() => new Date('2021-01-24T12:00:00.000Z'));
+    mockedOnScan.mockClear();
     data = {
       onScan: mockedOnScan,
       loading: false,
@@ -33,21 +54,27 @@ describe('Test QRScan', () => {
       tree = await create(wrapComponent(data));
     });
     const instance = tree.root;
-    const RNCam = instance.findAllByType(RNCamera);
-    expect(RNCam).toHaveLength(1);
+    const cameras = instance.findAllByType(Camera);
+    expect(cameras).toHaveLength(1);
   });
 
-  it('onBarCodeRead', async () => {
+  it('onCodeScanned via codeScanner prop', async () => {
     await act(async () => {
       tree = await create(wrapComponent(data));
     });
     const instance = tree.root;
-    const RNCam = instance.findByType(RNCamera);
+    const camera = instance.findByType(Camera);
+
+    // Simulate code scanned by calling the codeScanner callback
+    const codeScanner = camera.props.codeScanner;
+    expect(codeScanner).toBeDefined();
 
-    const e = { data: JSON.stringify({ id: 1 }) };
     await act(async () => {
-      RNCam.props.onBarCodeRead(e);
+      codeScanner.onCodeScanned([{ value: JSON.stringify({ id: 1 }) }]);
     });
-    expect(mockedOnScan).toHaveBeenCalled();
+    expect(mockedOnScan).toHaveBeenCalledWith(
+      JSON.stringify({ id: 1 }),
+      expect.any(Function)
+    );
   });
 });

package/src/screens/ScanChipQR/components/QRScan/index.js

@@ -8,7 +8,12 @@ import {
   TouchableOpacity,
 } from 'react-native';
 import { IconOutline } from '@ant-design/icons-react-native';
-import { RNCamera } from 'react-native-camera';
+import {
+  Camera,
+  useCameraDevice,
+  useCameraPermission,
+  useCodeScanner,
+} from 'react-native-vision-camera';
 import { getStatusBarHeight } from 'react-native-iphone-x-helper';
 import { useTranslations } from '../../../../hooks/Common/useTranslations';
 
@@ -52,18 +57,24 @@ const QRScan = ({ isScanReady = true, onScan }) => {
   const isFocused = useIsFocused();
 
   const [loading, setLoading] = useState(false);
+  const { hasPermission, requestPermission } = useCameraPermission();
+  const device = useCameraDevice('back');
+
+  useEffect(() => {
+    if (!hasPermission) {
+      requestPermission();
+    }
+  }, [hasPermission, requestPermission]);
 
-  const onBarCodeRead = useCallback(
-    (e) => {
-      if (isScanReady) {
+  const codeScanner = useCodeScanner({
+    codeTypes: ['qr', 'ean-13', 'code-128'],
+    onCodeScanned: (codes) => {
+      if (isScanReady && codes.length > 0 && !loading) {
         setLoading(true);
-        if (!loading) {
-          onScan(e.data, setLoading);
-        }
+        onScan(codes[0].value, setLoading);
       }
     },
-    [isScanReady, loading, onScan]
-  );
+  });
 
   const onPressClose = useCallback(() => {
     navigation.pop();
@@ -73,63 +84,69 @@ const QRScan = ({ isScanReady = true, onScan }) => {
     isFocused && setLoading(false);
   }, [isFocused, setLoading]);
 
+  if (!hasPermission) {
+    return <LoadingCamera />;
+  }
+
+  if (!device) {
+    return <LoadingCamera />;
+  }
+
   return (
-    <RNCamera
-      style={styles.preview}
-      type={RNCamera.Constants.Type.back}
-      onBarCodeRead={onBarCodeRead}
-    >
-      {({ camera, status, recordAudioPermissionStatus }) => {
-        if (status !== 'READY') {
-          return <LoadingCamera />;
-        }
-        return (
-          <View style={styles.maskOuter}>
-            <View
-              style={[
-                { flex: maskRowHeight },
-                styles.maskRow,
-                styles.maskFrame,
-              ]}
-            />
-            <View style={styles.maskCenter}>
-              <View style={[{ width: maskColWidth }, styles.maskFrame]} />
-              <View style={styles.maskInner} />
-              <View style={[{ width: maskColWidth }, styles.maskFrame]} />
-            </View>
-            <View style={styles.scanningGuide}>
-              <Text style={styles.scanningGuideText}>
-                {t('qr_scan_guidelines')}
-              </Text>
-            </View>
-            <View
-              style={[
-                { flex: maskRowHeight },
-                styles.maskRow,
-                styles.maskFrame,
-              ]}
-            />
-            <CircleButton
-              onPress={onPressClose}
-              size={32}
-              backgroundColor={Colors.White}
-              borderWidth={1}
-              borderColor={Colors.Gray4}
-              style={styles.buttonClose}
-            >
-              <IconOutline name={'close'} size={24} co />
-            </CircleButton>
-            {loading && <VerifyingQRCode />}
-          </View>
-        );
-      }}
-    </RNCamera>
+    <View style={styles.container}>
+      <Camera
+        style={StyleSheet.absoluteFill}
+        device={device}
+        isActive={isFocused}
+        codeScanner={codeScanner}
+      />
+      <View style={styles.maskOuter}>
+        <View
+          style={[
+            { flex: maskRowHeight },
+            styles.maskRow,
+            styles.maskFrame,
+          ]}
+        />
+        <View style={styles.maskCenter}>
+          <View style={[{ width: maskColWidth }, styles.maskFrame]} />
+          <View style={styles.maskInner} />
+          <View style={[{ width: maskColWidth }, styles.maskFrame]} />
+        </View>
+        <View style={styles.scanningGuide}>
+          <Text style={styles.scanningGuideText}>
+            {t('qr_scan_guidelines')}
+          </Text>
+        </View>
+        <View
+          style={[
+            { flex: maskRowHeight },
+            styles.maskRow,
+            styles.maskFrame,
+          ]}
+        />
+        <CircleButton
+          onPress={onPressClose}
+          size={32}
+          backgroundColor={Colors.White}
+          borderWidth={1}
+          borderColor={Colors.Gray4}
+          style={styles.buttonClose}
+        >
+          <IconOutline name={'close'} size={24} />
+        </CircleButton>
+        {loading && <VerifyingQRCode />}
+      </View>
+    </View>
   );
 };
 
 export default QRScan;
 
 const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
   preview: {
     flex: 1,
     justifyContent: 'flex-end',