@eohjsc/react-native-smart-city 0.2.19 → 0.2.23

package/src/screens/SubUnit/Detail.js

@@ -1,25 +1,21 @@
 import React, { useCallback, useMemo } from 'react';
-import { View, StyleSheet } from 'react-native';
+import { View } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import { get } from 'lodash';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 
-import { Device, Colors, Theme } from '../../configs';
-import { standardizeCameraScreenSize } from '../../utils/Utils';
 import Routes from '../../utils/Route';
-import { useAndroidTranslucentStatusBar, usePopover } from '../../hooks/Common';
+import { usePopover } from '../../hooks/Common';
 import Text from '../../commons/Text';
 import ItemDevice from '../../commons/Device/ItemDevice';
 import WrapParallaxScrollView from '../../commons/WrapParallaxScrollView';
 import MediaPlayer from '../../commons/MediaPlayer';
 import { MenuActionMore } from '../../commons';
 import { useSCContextSelector } from '../../context';
-
-const { standardizeWidth, standardizeHeight } = standardizeCameraScreenSize(
-  Device.screenWidth - 32
-);
+import styles from './DetailStyles';
 
 const SubUnitDetail = ({ route }) => {
+  const t = useTranslations();
   const { unit, station, isGGHomeConnected } = route.params;
   const language = useSCContextSelector((state) => state.language);
   const navigation = useNavigation();
@@ -33,21 +29,6 @@ const SubUnitDetail = ({ route }) => {
   const canManageSubUnit = useCallback(() => {
     return currentUserId === unit.user_id;
   }, [currentUserId, unit]);
-
-  useAndroidTranslucentStatusBar();
-
-  // TODO remove redux
-  // const arrStation = useSelector((state) => state.unit.unitDetail.stations);
-
-  // const checkID = useCallback(() => {
-  //   const result = arrStation.find((x) => x.id === station.id)
-  //     ? 'true'
-  //     : 'false';
-  //   return result;
-  // }, [arrStation, station]);
-  // const idExists = checkID();
-  // const stationState =
-  //   idExists === 'true' ? arrStation.find((x) => x.id === station.id) : station;
   const stationState = station;
 
   const devices = stationState.sensors;
@@ -168,43 +149,4 @@ const SubUnitDetail = ({ route }) => {
   );
 };
 
-const styles = StyleSheet.create({
-  wrap: {
-    flex: 1,
-  },
-  boxCamera: {
-    height: standardizeHeight,
-    width: standardizeWidth,
-    alignSelf: 'center',
-    borderRadius: 10,
-    ...Theme.shadow,
-  },
-  subUnitTitle: {
-    fontSize: 20,
-    lineHeight: 28,
-    color: Colors.Gray8,
-    marginLeft: 16,
-    marginTop: 24,
-    marginBottom: 8,
-  },
-  emptyDevice: {
-    fontStyle: 'normal',
-    fontWeight: 'normal',
-    fontSize: 18,
-    lineHeight: 28,
-    color: Colors.Border,
-  },
-  boxDevices: {
-    flexWrap: 'wrap',
-    flexDirection: 'row',
-    paddingHorizontal: 16,
-    justifyContent: 'space-between',
-  },
-  boxEmptyDevices: {
-    flexDirection: 'row',
-    justifyContent: 'center',
-    paddingTop: 16,
-  },
-});
-
 export default SubUnitDetail;

package/src/screens/SubUnit/DetailStyles.js

@@ -0,0 +1,46 @@
+import { StyleSheet } from 'react-native';
+import { Device, Colors, Theme } from '../../configs';
+import { standardizeCameraScreenSize } from '../../utils/Utils';
+
+const { standardizeWidth, standardizeHeight } = standardizeCameraScreenSize(
+  Device.screenWidth - 32
+);
+
+export default StyleSheet.create({
+  wrap: {
+    flex: 1,
+  },
+  boxCamera: {
+    height: standardizeHeight,
+    width: standardizeWidth,
+    alignSelf: 'center',
+    borderRadius: 10,
+    ...Theme.shadow,
+  },
+  subUnitTitle: {
+    fontSize: 20,
+    lineHeight: 28,
+    color: Colors.Gray8,
+    marginLeft: 16,
+    marginTop: 24,
+    marginBottom: 8,
+  },
+  emptyDevice: {
+    fontStyle: 'normal',
+    fontWeight: 'normal',
+    fontSize: 18,
+    lineHeight: 28,
+    color: Colors.Border,
+  },
+  boxDevices: {
+    flexWrap: 'wrap',
+    flexDirection: 'row',
+    paddingHorizontal: 16,
+    justifyContent: 'space-between',
+  },
+  boxEmptyDevices: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    paddingTop: 16,
+  },
+});

package/src/screens/SubUnit/ManageSubUnit.js

@@ -4,7 +4,7 @@ import Modal from 'react-native-modal';
 import { connect } from 'react-redux';
 import { useIsFocused, useNavigation } from '@react-navigation/native';
 import { SafeAreaView } from 'react-native-safe-area-context';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 
 import { Colors, API, Device } from '../../configs';
 import { ToastBottomHelper } from '../../utils/Utils';
@@ -26,6 +26,7 @@ import { IconOutline } from '@ant-design/icons-react-native';
 import { useEmeragencyContacts } from './hooks/useEmergencyContacts';
 
 const ManageSubUnit = (props) => {
+  const t = useTranslations();
   const { station } = props.route.params;
   //TODO remove redux
   // const unit = useSelector((state) => state.unit.unitDetail);
@@ -82,7 +83,7 @@ const ManageSubUnit = (props) => {
         ToastBottomHelper.success(t('text_rename_sub_unit_success'));
       }
     },
-    [unit, station]
+    [unit.id, station.id, t]
   );
   const updateBackground = useCallback(
     async (headers) => {
@@ -97,7 +98,7 @@ const ManageSubUnit = (props) => {
         ToastBottomHelper.success(t('text_change_background_sub_unit_success'));
       }
     },
-    [unit, station, imageUrl]
+    [imageUrl, unit.id, station.id, t]
   );
 
   const onPressRemove = useCallback(() => {
@@ -120,7 +121,7 @@ const ManageSubUnit = (props) => {
     } else {
       ToastBottomHelper.error(t('text_remove_sub_unit_fail'));
     }
-  }, [unit, station, onBack, setHideModalRemoveSubUnit]);
+  }, [setHideModalRemoveSubUnit, unit.id, station.id, t, onBack]);
 
   const goRename = useCallback(() => {
     updateSubUnit({ name: inputName }, {});

package/src/screens/SubUnit/__test__/AddSubUnit.test.js

@@ -5,7 +5,7 @@ import { ImagePicker, ViewButtonBottom } from '../../../commons';
 import { act, create } from 'react-test-renderer';
 import Toast from 'react-native-toast-message';
 import Routes from '../../../utils/Route';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
 import { createSubUnit } from '../../../redux/Actions/unit';
 import { TESTID } from '../../../configs/Constants';
 import _TextInput from '../../../commons/Form/TextInput';
@@ -36,6 +36,7 @@ jest.mock('@react-navigation/native', () => {
 });
 
 describe('Test AddSubUnit', () => {
+  const t = useTranslations();
   let route;
 
   beforeEach(() => {

package/src/screens/SubUnit/__test__/ManageSubUnit.test.js

@@ -10,7 +10,7 @@ import Toast from 'react-native-toast-message';
 
 import Routes from '../../../utils/Route';
 import ManageSubUnit from '../ManageSubUnit';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
 import { removeSubUnit, manageSubUnit } from '../../../redux/Actions/unit';
 import { TESTID } from '../../../configs/Constants';
 import Text from '../../../commons/Text';
@@ -49,6 +49,7 @@ jest.mock('@react-navigation/native', () => {
 });
 
 describe('Test ManageSubUnit', () => {
+  const t = useTranslations();
   let route;
 
   beforeEach(() => {

package/src/screens/SyncLGDevice/AddLGDevice.js

@@ -1,7 +1,7 @@
 import React, { memo, useCallback, useEffect, useState } from 'react';
 import { ScrollView, SafeAreaView } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 
 import styles from './AddLGDeviceStyles';
 import { API, Colors } from '../../configs';
@@ -15,6 +15,7 @@ import { ToastBottomHelper } from '../../utils/Utils';
 import { SCConfig } from '../../configs';
 
 const AddLGDevice = memo(({ route }) => {
+  const t = useTranslations();
   const { unit_id, code, backend_url } = route.params;
   const { navigate, goBack } = useNavigation();
   const [unit, setUnit] = useState({ stations: [] });
@@ -68,7 +69,7 @@ const AddLGDevice = memo(({ route }) => {
 
     ToastBottomHelper.success(t('lg_sync_success'));
     navigate(Routes.Dashboard);
-  }, [backend_url, code, navigate, stationId]);
+  }, [backend_url, code, navigate, stationId, t]);
 
   const stations = unit.stations.map((item) => ({
     ...item,

package/src/screens/SyncLGDevice/__test__/AddLGDevice.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { act, create } from 'react-test-renderer';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
 import axios from 'axios';
 
 import AddLGDevice from '../AddLGDevice';
@@ -27,6 +27,7 @@ jest.mock('@react-navigation/native', () => {
 });
 
 describe('Test Add LG Device', () => {
+  const t = useTranslations();
   let tree;
   let route;
 

package/src/screens/TDSGuide/index.js

@@ -1,6 +1,6 @@
 import React, { memo } from 'react';
 import { StyleSheet, SafeAreaView } from 'react-native';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 import i18n from 'i18n-js';
 import { TESTID } from '../../configs/Constants';
 
@@ -9,6 +9,7 @@ import Text from '../../commons/Text';
 import useTitleHeader from '../../hooks/Common/useTitleHeader';
 
 const TDSGuide = memo(() => {
+  const t = useTranslations();
   useTitleHeader(t('tds_infomation'));
   const currentLanguage = i18n.currentLocale();
 

package/src/screens/UVIndexGuide/index.js

@@ -6,7 +6,7 @@ import {
   TouchableOpacity,
   SafeAreaView,
 } from 'react-native';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 
 import { Colors, Theme } from '../../configs';
 import Text from '../../commons/Text';
@@ -15,6 +15,7 @@ import { TESTID } from '../../configs/Constants';
 import { useSCContextSelector } from '../../context';
 
 const UVIndexGuide = memo(() => {
+  const t = useTranslations();
   useTitleHeader(t('UV Index Guide'));
   const language = useSCContextSelector((state) => state.language);
 

package/src/screens/Unit/AddMenu.js

@@ -1,6 +1,6 @@
 import MenuActionAddnew from '../../commons/MenuActionAddnew';
 import React, { memo, useCallback, useMemo } from 'react';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 import Routes from '../../utils/Route';
 import AddSubUnitIcon from '../../../assets/images/Popover/Dashboard/AddSubUnit.svg';
 import AddDeviceIcon from '../../../assets/images/Popover/Dashboard/AddDevice.svg';
@@ -8,6 +8,7 @@ import AddMemberIcon from '../../../assets/images/Popover/Dashboard/AddMember.sv
 import { useNavigation } from '@react-navigation/native';
 
 const AddMenu = memo(({ unit, afterItemClick, showAdd, setHideAdd }) => {
+  const t = useTranslations();
   const navigation = useNavigation();
 
   const onItemClick = useCallback(
@@ -50,7 +51,7 @@ const AddMenu = memo(({ unit, afterItemClick, showAdd, setHideAdd }) => {
         data: { screen: Routes.SetupGatewayWifi, params: { unit_id: unit.id } },
       },
     ];
-  }, [unit]);
+  }, [t, unit]);
 
   const hideAddModal = useCallback(() => {
     setHideAdd(false);

package/src/screens/Unit/Detail.js

@@ -1,7 +1,7 @@
 import React, { useCallback, useContext, useEffect, useState } from 'react';
 import { AppState, RefreshControl, View } from 'react-native';
 import { useIsFocused } from '@react-navigation/native';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 
 import styles from './styles';
 import AddMenu from './AddMenu';
@@ -21,44 +21,70 @@ import WrapParallaxScrollView from '../../commons/WrapParallaxScrollView';
 import { SCContext } from '../../context';
 import { Action } from '../../context/actionType';
 import CameraDevice from '../../commons/CameraDevice';
+import { ModalFullVideo } from '../../commons/Modal';
+import { useNavigation } from '@react-navigation/native';
+import Routes from '../../utils/Route';
+import SubUnitOneTap from '../../commons/SubUnit/OneTap';
 
 const UnitDetail = ({ route }) => {
+  const t = useTranslations();
   const { unitId, unitData } = route.params;
   const isFocused = useIsFocused();
   const { stateData, setAction } = useContext(SCContext);
+  const { navigate } = useNavigation();
 
   const [unit, setUnit] = useState(unitData || { id: unitId });
   const [appState, setAppState] = useState(AppState.currentState);
   const [listMenuItem, setListMenuItem] = useState([]);
   const [listStation, setListStation] = useState([]);
+  const [automates, setAutomates] = useState([]);
   const [isGGHomeConnected, setIsGGHomeConnected] = useState(false);
   const [station, setStation] = useState([]);
   const [indexStation, setIndexStation] = useState(0);
   const [showAdd, setShowAdd, setHideAdd] = useBoolean();
+  const [isFullScreen, setIsFullScreen] = useState(false);
+  const [dataFullScreen, setDataFullScreen] = useState();
 
   const { childRef, showingPopover, showPopoverWithRef, hidePopover } =
     usePopover();
 
   const { isOwner } = useIsOwnerOfUnit(unit.user_id);
 
-  const prepareData = useCallback((rawUnitData) => {
-    const favorites = {
-      isFakeStation: true,
-      isFavorites: true,
-      name: t('favorites'),
-      sensors: [],
-    };
-    rawUnitData.stations.unshift(favorites);
-    rawUnitData.stations.forEach((stationItem) => {
-      if (stationItem.sensors) {
-        const favoriteDevices = stationItem.sensors.filter(
-          (sensorItem) => sensorItem.is_favourite
-        );
-        favorites.sensors = favorites.sensors.concat(favoriteDevices);
-      }
-    });
+  const handleFullScreen = (data) => {
+    setIsFullScreen(!isFullScreen);
+    setDataFullScreen(data);
+  };
+
+  const onClose = useCallback(() => {
+    setIsFullScreen(false);
   }, []);
 
+  const prepareData = useCallback(
+    (rawUnitData) => {
+      const oneTap = {
+        isOneTap: true,
+        name: 'One-Tap',
+      };
+      rawUnitData.stations.unshift(oneTap);
+      const favorites = {
+        isFakeStation: true,
+        isFavorites: true,
+        name: t('favorites'),
+        sensors: [],
+      };
+      rawUnitData.stations.unshift(favorites);
+      rawUnitData.stations.forEach((stationItem) => {
+        if (stationItem.sensors) {
+          const favoriteDevices = stationItem.sensors.filter(
+            (sensorItem) => sensorItem.is_favourite
+          );
+          favorites.sensors = favorites.sensors.concat(favoriteDevices);
+        }
+      });
+    },
+    [t]
+  );
+
   const fetchDetails = useCallback(async () => {
     await fetchWithCache(API.UNIT.UNIT_DETAIL(unitId), {}, (response) => {
       const { success, data } = response;
@@ -69,6 +95,15 @@ const UnitDetail = ({ route }) => {
     });
   }, [setUnit, unitId, prepareData]);
 
+  const getScriptOneTap = useCallback(async () => {
+    await fetchWithCache(API.UNIT.AUTOMATE(unitId), {}, (response) => {
+      const { success, data } = response;
+      if (success) {
+        setAutomates(data);
+      }
+    });
+  }, [unitId]);
+
   const onRefresh = useCallback(() => {
     fetchDetails();
   }, [fetchDetails]);
@@ -150,8 +185,9 @@ const UnitDetail = ({ route }) => {
   useEffect(() => {
     if (isFocused) {
       fetchDetails();
+      getScriptOneTap();
     }
-  }, [fetchDetails, isFocused]);
+  }, [fetchDetails, getScriptOneTap, isFocused]);
 
   useEffect(() => {
     if (unit.stations) {
@@ -174,9 +210,22 @@ const UnitDetail = ({ route }) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [unit, indexStation]
   );
+
+  const goToPlayBack = (item, thumbnail) => () => {
+    navigate(Routes.PlaybackCamera, { item, thumbnail });
+  };
+
   const renderDetailSubUnit = () => {
     if (station.camera_devices) {
-      return <CameraDevice station={station} />;
+      return (
+        <CameraDevice
+          station={station}
+          handleFullScreen={handleFullScreen}
+          goToPlayBack={goToPlayBack}
+        />
+      );
+    } else if (station.isOneTap) {
+      return <SubUnitOneTap automates={automates} />;
     } else if (station) {
       return (
         <ShortDetailSubUnit
@@ -190,7 +239,7 @@ const UnitDetail = ({ route }) => {
   return (
     <WrapParallaxScrollView
       uriImg={unit.background}
-      title={t('Welcome %{name}', {
+      title={t('Welcome {name}', {
         name: unit.name ? unit.name : '',
       })}
       refreshControl={
@@ -229,6 +278,12 @@ const UnitDetail = ({ route }) => {
         childRef={childRef}
         showingPopover={showingPopover}
       />
+      <ModalFullVideo
+        isVisible={isFullScreen}
+        data={dataFullScreen}
+        modalStyles={styles.modal}
+        onClose={onClose}
+      />
     </WrapParallaxScrollView>
   );
 };

package/src/screens/Unit/ManageUnit/index.js

@@ -8,7 +8,7 @@ import {
 } from 'react-native';
 import Modal from 'react-native-modal';
 import Animated from 'react-native-reanimated';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
 
 import { Colors, API, Device } from '../../../configs';
 import Routes from '../../../utils/Route';
@@ -37,6 +37,7 @@ import { useIsOwnerOfUnit } from '../../../hooks/Common';
 import { TESTID } from '../../../configs/Constants';
 
 const ManageUnit = ({ route }) => {
+  const t = useTranslations();
   const { unit } = route.params;
   const { isOwner } = useIsOwnerOfUnit(unit.user_id);
   const [showEdit, setshowEdit, setHideEdit] = useBoolean();
@@ -57,7 +58,7 @@ const ManageUnit = ({ route }) => {
         ToastBottomHelper.success(t('unit_updated_successfully'));
       }
     },
-    [unit.id, imageUrl]
+    [imageUrl, unit.id, t]
   );
 
   const goRename = useCallback(async () => {
@@ -85,7 +86,7 @@ const ManageUnit = ({ route }) => {
       ToastBottomHelper.success(t('unit_deleted_successfully'));
       navigate(Routes.Dashboard);
     }
-  }, [unit.id, setHideEdit]);
+  }, [unit.id, setHideEdit, t]);
 
   const [transY] = useKeyboardAnimated(-16);
   const animatedStyle = Platform.select({

package/src/screens/Unit/ManageUnit.js

@@ -2,7 +2,7 @@ import React, { useState, useCallback, useEffect } from 'react';
 import { View, TouchableOpacity, Image, Platform } from 'react-native';
 import Modal from 'react-native-modal';
 import Animated from 'react-native-reanimated';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 
 import { Colors, API, Device, Images } from '../../configs';
 import Routes from '../../utils/Route';
@@ -62,6 +62,7 @@ const ButtonWrapper = ({
 };
 
 const ManageUnit = ({ route }) => {
+  const t = useTranslations();
   const { unit } = route.params;
   const navigation = useNavigation();
   const { isOwner } = useIsOwnerOfUnit(unit.user_id);
@@ -90,7 +91,7 @@ const ManageUnit = ({ route }) => {
         ToastBottomHelper.success(t('unit_updated_successfully'));
       }
     },
-    [unit.id, setUnitData]
+    [unit.id, t]
   );
 
   const updateLocation = useCallback(
@@ -137,7 +138,7 @@ const ManageUnit = ({ route }) => {
       ToastBottomHelper.success(t('unit_deleted_successfully'));
       navigate(Routes.Dashboard);
     }
-  }, [unit.id, setHideEdit]);
+  }, [unit.id, setHideEdit, t]);
 
   const [transY] = useKeyboardAnimated(-16);
   const animatedStyle = Platform.select({

package/src/screens/Unit/MoreMenu.js

@@ -1,11 +1,12 @@
 import React, { memo, useCallback, useMemo } from 'react';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 import Routes from '../../utils/Route';
 import { useNavigation } from '@react-navigation/native';
 import { MenuActionMore } from '../../commons';
 
 const MoreMenu = memo(
   ({ unit, isOwner, hidePopover, childRef, showingPopover }) => {
+    const t = useTranslations();
     const navigation = useNavigation();
 
     const onItemClick = useCallback(
@@ -30,7 +31,7 @@ const MoreMenu = memo(
       return isOwner
         ? [RouteManageUnit, RouteUnitMemberList]
         : [RouteUnitMemberList];
-    }, [unit, isOwner]);
+    }, [t, unit, isOwner]);
 
     return (
       <MenuActionMore

package/src/screens/Unit/SelectLocation.js

@@ -5,7 +5,7 @@ import { View } from 'react-native';
 import MapView, { Marker, PROVIDER_GOOGLE } from 'react-native-maps';
 import BottomButtonView from '../../commons/BottomButtonView';
 
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 import { API } from '../../configs';
 import styles from './SelectLocationStyles';
 import SearchBarLocation from './components/SearchLocation';
@@ -14,6 +14,7 @@ import { axiosGet } from '../../utils/Apis/axios';
 import { ScrollView } from 'react-native-gesture-handler';
 import { useNavigation } from '@react-navigation/native';
 import { SCConfig } from '../../configs';
+import Point from '../../../assets/images/AddLocationMaps/Point.svg';
 
 const initialRegion = {
   latitudeDelta: 0.0922,
@@ -24,6 +25,7 @@ const DEFAULT_LATITUDE = 10.7974046; // EoH center
 const DEFAULT_LONGITUDE = 106.7035663;
 
 const SelectLocation = memo(({ route }) => {
+  const t = useTranslations();
   const { updateLocation } = route.params;
   const { goBack } = useNavigation();
   const [input, setInput] = useState('');
@@ -75,6 +77,8 @@ const SelectLocation = memo(({ route }) => {
   }, []);
 
   const onPressRowLocation = useCallback(async (item) => {
+    setInput(item.description);
+    setSearchData([]);
     const body = {
       params: {
         place_id: item.place_id,
@@ -134,7 +138,11 @@ const SelectLocation = memo(({ route }) => {
               longitude: searchedLocation.longitude,
             }}
             tracksViewChanges={false}
-          />
+          >
+            <View style={styles.pointCircle}>
+              <Point />
+            </View>
+          </Marker>
         )}
       </MapView>
       <BottomButtonView

package/src/screens/Unit/SelectLocationStyles.js

@@ -15,6 +15,17 @@ export default StyleSheet.create({
   bottomButton: {
     backgroundColor: Colors.White,
   },
+  pointCircle: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: 109,
+    height: 109,
+    borderRadius: 50,
+    backgroundColor: Colors.BlueTransparent5,
+    borderWidth: 1,
+    borderColor: Colors.Blue10,
+  },
   searchLocation: {
     paddingVertical: 8,
     position: 'absolute',

package/src/screens/Unit/components/Header/index.js

@@ -3,7 +3,7 @@ import { Dimensions, View, TouchableOpacity, StyleSheet } from 'react-native';
 import Popover from 'react-native-popover-view';
 import Modal from 'react-native-modal';
 import { IconOutline } from '@ant-design/icons-react-native';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../../../hooks/Common/useTranslations';
 
 import { Colors } from '../../../../configs';
 import Text from '../../../../commons/Text';
@@ -30,6 +30,7 @@ const HeaderComponent = ({
   fixedHeight, // when height of header is fixed
   style,
 }) => {
+  const t = useTranslations();
   const popoverRef = useRef();
   const [menu, setMenu] = useState(false);
   const [showModal, setShowModal] = useState(false);