@eohjsc/react-native-smart-city 0.7.35 → 0.7.37

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eohjsc/react-native-smart-city",
   "title": "React Native Smart Home",
-  "version": "0.7.35",
+  "version": "0.7.37",
   "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/commons/Device/ItemDevice.js

@@ -151,7 +151,7 @@ const styles = StyleSheet.create({
   androidStyle: {
     lineHeight: 22,
     includeFontPadding: false,
-    marginBottom: 8,
+    marginVertical: 8,
   },
   lineHeight20: {
     lineHeight: 20,

package/src/commons/Header/Styles/HeaderCustomStyles.js

@@ -10,7 +10,7 @@ export default StyleSheet.create({
     paddingLeft: 7,
     paddingRight: 10,
     paddingBottom: 6,
-    paddingTop: getStatusBarHeight() + 20,
+    paddingTop: getStatusBarHeight() + 30,
   },
   separator: {
     borderBottomWidth: 0.5,

package/src/commons/HeaderAni/index.js

@@ -10,7 +10,7 @@ import { AccessibilityLabel } from '../../configs/Constants';
 
 const screenHeight = Constants.height;
 const default_height = 45;
-const paddingIos = getStatusBarHeight() + 20;
+const paddingIos = getStatusBarHeight() + 30;
 export const title_height = 44;
 export const heightHeader = default_height + title_height + paddingIos;
 

package/src/commons/MenuActionAddnew/index.js

@@ -1,5 +1,5 @@
 import React, { memo, useCallback } from 'react';
-import { FlatList, StyleSheet, View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 
 import { Colors } from '../../configs';
@@ -8,7 +8,6 @@ import ImageButton from '../ImageButton';
 import { ModalCustom } from '../Modal';
 import packageJson from '../../../package.json';
 
-const keyExtractor = (item) => item.id.toString();
 const MenuActionAddnew = memo(
   ({ visible, hideModal, dataActions, onItemClick }) => {
     const t = useTranslations();
@@ -21,25 +20,6 @@ const MenuActionAddnew = memo(
       [onItemClick]
     );
 
-    const renderItem = useCallback(
-      ({ item }) => {
-        return (
-          <View
-            style={{
-              ...styles.action,
-              flexBasis: `${100 / numColumns}%`,
-            }}
-          >
-            <ImageButton onPress={() => onPress(item)} image={item.image} />
-            <View style={styles.actionTextWrap}>
-              <Text styles={styles.actionText}>{item.text}</Text>
-            </View>
-          </View>
-        );
-      },
-      [numColumns, onPress]
-    );
-
     return (
       <ModalCustom
         isVisible={visible}
@@ -53,15 +33,23 @@ const MenuActionAddnew = memo(
               <Text style={styles.modalHeaderText}>{t('add_new')}</Text>
             </View>
 
-            <FlatList
-              bounces={false}
-              numColumns={numColumns}
-              contentContainerStyle={styles.actionWrapper}
-              data={dataActions}
-              keyExtractor={keyExtractor}
-              renderItem={renderItem}
-              scrollIndicatorInsets={{ right: 1 }}
-            />
+            <View style={styles.actionWrapper}>
+              {dataActions.map((item) => (
+                <View
+                  key={item.id.toString()}
+                  style={[styles.action, { width: `${100 / numColumns}%` }]}
+                >
+                  <ImageButton
+                    onPress={() => onPress(item)}
+                    image={item.image}
+                  />
+                  <View style={styles.actionTextWrap}>
+                    <Text style={styles.actionText}>{item.text}</Text>
+                  </View>
+                </View>
+              ))}
+            </View>
+
             <View style={styles.modalHeader}>
               <Text
                 style={styles.modalHeaderText}
@@ -88,7 +76,6 @@ const styles = StyleSheet.create({
     borderRadius: 10,
   },
   modalWrapper: {
-    flex: 1,
     flexDirection: 'column',
     backgroundColor: Colors.White,
     borderRadius: 10,
@@ -110,7 +97,8 @@ const styles = StyleSheet.create({
   },
   actionWrapper: {
     padding: 16,
-    flex: 1,
+    flexDirection: 'row',
+    flexWrap: 'wrap',
   },
   action: {
     marginBottom: 25,

package/src/commons/Unit/HeaderUnit/index.js

@@ -106,8 +106,7 @@ const HeaderUnit = memo(({ transparent, unit }) => {
 
 export default HeaderUnit;
 
-const stickyHeaderHeight =
-  Device.TopbarHeight + (Device.isIOS ? 0 : StatusBar.currentHeight);
+const stickyHeaderHeight = Device.TopbarHeight + (Device.isIOS ? 0 : 30);
 
 const styles = StyleSheet.create({
   container: {

package/src/commons/WrapParallaxScrollView/index.js

@@ -10,8 +10,7 @@ import FImage from '../FImage';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 import ParallaxScrollView from '../../libs/react-native-parallax-scroll-view';
 
-const stickyHeaderHeight =
-  Device.TopbarHeight + (Device.isIOS ? 0 : StatusBar.currentHeight);
+const stickyHeaderHeight = Device.TopbarHeight + (Device.isIOS ? 0 : 30);
 
 const WrapParallaxScrollView = ({ children, unit, onRefresh }) => {
   const { name = '', background } = unit;

package/src/configs/Device.js

@@ -17,6 +17,6 @@ export default {
   isIOS: Platform.OS === 'ios',
   isIphoneX,
   ToolbarHeight: isIphoneX ? 44 : Platform.OS === 'ios' ? 20 : 0,
-  TopbarHeight: isIphoneX ? 88 : Platform.OS === 'ios' ? 64 : 44, //incule toolbar
+  TopbarHeight: isIphoneX ? 88 : Platform.OS === 'ios' ? 64 : 50, //incule toolbar
   androidSmallHeight: Platform.OS === 'android' && height < 600,
 };

package/src/screens/Automate/index.js

@@ -34,7 +34,6 @@ const Automate = () => {
   const isFocused = useIsFocused();
   const { setOptions, navigate } = useNavigation();
   const [automatesData, setAutomatesData] = useState([]);
-  const [isLoading, setIsLoading] = useState(false);
   const { name: currentRouteName } = useRoute();
   const starredScriptIds = useSCContextSelector(
     (state) => state.automate.starredScriptIds
@@ -55,8 +54,11 @@ const Automate = () => {
   }, [automatesData, starredScriptIds]);
 
   const getAutomates = useCallback(async () => {
-    setIsLoading(true);
-    const { success, data } = await axiosGet(API.AUTOMATE.GET_SMART());
+    const { success, data } = await axiosGet(
+      API.AUTOMATE.GET_SMART(),
+      {},
+      true
+    );
     if (success && data && data.length) {
       const multiUnit = data[0];
       const haveAutomates = data
@@ -67,7 +69,6 @@ const Automate = () => {
         .filter((unit) => !unit.automates.length);
       setAutomatesData([multiUnit, ...haveAutomates, ...notHaveAutomates]);
     }
-    setIsLoading(false);
   }, []);
 
   const onPressItem = useCallback(
@@ -224,7 +225,6 @@ const Automate = () => {
 
   return (
     <View style={styles.wrap}>
-      {isLoading && <Loading />}
       <FlatList
         keyExtractor={keyExtractor}
         data={sortedAutomateData}

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/Notification/index.js

@@ -51,7 +51,9 @@ const Notification = memo(() => {
 
   const fetchNotifications = useCallback(async (pageParam) => {
     const { success, data } = await axiosGet(
-      API.NOTIFICATION.LIST_EOH_NOTIFICATIONS(pageParam)
+      API.NOTIFICATION.LIST_EOH_NOTIFICATIONS(pageParam),
+      {},
+      true
     );
     if (success) {
       setNotifications((preState) => preState.concat(data.results));
@@ -69,7 +71,9 @@ const Notification = memo(() => {
   const onRefresh = useCallback(async () => {
     setPage(1);
     const { success, data } = await axiosGet(
-      API.NOTIFICATION.LIST_EOH_NOTIFICATIONS(1)
+      API.NOTIFICATION.LIST_EOH_NOTIFICATIONS(1),
+      {},
+      true
     );
     if (success) {
       setNotifications(data.results);

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',

package/src/screens/SharedUnit/index.js

@@ -51,7 +51,8 @@ const Shared = () => {
   const filterSharedUnits = useCallback(async (field, config) => {
     const { success, data } = await axiosGet(
       API.UNIT.FILTER_SHARED_UNITS(field),
-      config
+      config,
+      true
     );
     if (success) {
       setSharedUnits(data);

package/src/screens/SubUnit/AddSubUnitStyles.js

@@ -9,7 +9,7 @@ export default StyleSheet.create({
   wrap: {
     flex: 1,
     backgroundColor: Colors.Gray2,
-    paddingTop: getStatusBarHeight() + 10,
+    paddingTop: getStatusBarHeight() + 30,
   },
   padding: {
     paddingHorizontal: 16,