@eohjsc/react-native-smart-city 0.3.71 → 0.3.73

package/src/screens/AllGateway/GatewayDetail/__test__/index.test.js

@@ -18,6 +18,7 @@ import { API } from '../../../../configs';
 import { DEVICE_TYPE } from '../../../../configs/Constants';
 import Detail from '../../components/Detail';
 import ModalPopupCT from '../../../../commons/ModalPopupCT';
+import { flushPromises } from '../../test-utils';
 
 const mock = new MockAdapter(api.axiosInstance);
 
@@ -64,17 +65,49 @@ const headerCustomOnPressMore = async (instance) => {
   });
 };
 
-describe('Test GatewayDetail', () => {
+const renderDetail = async () => {
   let tree;
+  mock
+    .onGet(API.DEV_MODE.MODBUS.DEVICE(1))
+    .reply(200, [{ id: 1, name: 'device 1' }]);
+  await act(async () => {
+    tree = await create(wrapComponent());
+  });
+  const instance = tree.root;
+  const detail = instance?.findByType(Detail);
+  const tabPaneCT = detail.findByType(TabPaneCT);
+  await onChangeTab(tabPaneCT, 2);
+  await flushPromises();
+  return { detail, tabPaneCT };
+};
 
-  const onChangeTab = async (tabPaneCT, index) => {
-    const segmentedControl = tabPaneCT.findByType(SegmentedControl);
-    await act(async () => {
-      await segmentedControl.props.onChange({
-        nativeEvent: { selectedSegmentIndex: index },
-      });
+const renderDetail2 = async () => {
+  let tree;
+  mock
+    .onGet(API.DEV_MODE.ZIGBEE.DEVICE(1))
+    .reply(200, [{ id: 1, name: 'device 1' }]);
+  await act(async () => {
+    tree = await create(wrapComponent());
+  });
+  const instance = tree.root;
+  const detail = instance?.findByType(Detail);
+  const tabPaneCT = detail.findByType(TabPaneCT);
+  await onChangeTab(tabPaneCT, 1);
+  await flushPromises();
+  return { detail, tabPaneCT };
+};
+
+const onChangeTab = async (tabPaneCT, index) => {
+  const segmentedControl = tabPaneCT.findByType(SegmentedControl);
+  await act(async () => {
+    await segmentedControl.props.onChange({
+      nativeEvent: { selectedSegmentIndex: index },
     });
-  };
+  });
+};
+
+describe('Test GatewayDetail', () => {
+  let tree;
 
   beforeEach(() => {
     useRoute.mockReturnValue({
@@ -116,7 +149,7 @@ describe('Test GatewayDetail', () => {
     });
     const instance = tree.root;
     const detail = instance?.findByType(Detail);
-    headerCustomOnPressMore(detail);
+    await headerCustomOnPressMore(detail);
     const menuActionMore = detail?.findAllByType(MenuActionMore);
     expect(menuActionMore[0].props.isVisible).toEqual(true);
     await act(async () => {
@@ -133,7 +166,7 @@ describe('Test GatewayDetail', () => {
     });
     const instance = tree.root;
     const detail = instance?.findByType(Detail);
-    headerCustomOnPressMore(detail);
+    await await headerCustomOnPressMore(detail);
     const menuActionMore = detail?.findAllByType(MenuActionMore);
     expect(menuActionMore[0].props.isVisible).toEqual(true);
     await act(async () => {
@@ -153,7 +186,7 @@ describe('Test GatewayDetail', () => {
     });
     const instance = tree.root;
     const detail = instance?.findByType(Detail);
-    headerCustomOnPressMore(detail);
+    await headerCustomOnPressMore(detail);
     const menuActionMore = detail?.findByType(MenuActionMore);
     expect(menuActionMore.props.isVisible).toEqual(true);
     await act(async () => {
@@ -185,16 +218,7 @@ describe('Test GatewayDetail', () => {
   });
 
   it('test render GatewayDetail onPress TabPanel zigbee', async () => {
-    mock
-      .onGet(API.DEV_MODE.ZIGBEE.DEVICE(1))
-      .reply(200, [{ id: 1, name: 'device 1' }]);
-    await act(async () => {
-      tree = await create(wrapComponent());
-    });
-    const instance = tree.root;
-    const detail = instance?.findByType(Detail);
-    const tabPaneCT = detail.findByType(TabPaneCT);
-    await onChangeTab(tabPaneCT, 1);
+    const { tabPaneCT } = await renderDetail2();
     expect(tabPaneCT.props.listTabs[1].data).toEqual([
       { id: 1, name: 'device 1' },
     ]);
@@ -202,16 +226,7 @@ describe('Test GatewayDetail', () => {
   });
 
   it('test render GatewayDetail onPress TabPanel modbus', async () => {
-    mock
-      .onGet(API.DEV_MODE.MODBUS.DEVICE(1))
-      .reply(200, [{ id: 1, name: 'device 1' }]);
-    await act(async () => {
-      tree = await create(wrapComponent());
-    });
-    const instance = tree.root;
-    const detail = instance?.findByType(Detail);
-    const tabPaneCT = detail.findByType(TabPaneCT);
-    await onChangeTab(tabPaneCT, 2);
+    const { tabPaneCT } = await renderDetail();
     expect(tabPaneCT.props.listTabs[2].data).toEqual([
       { id: 1, name: 'device 1' },
     ]);
@@ -243,16 +258,7 @@ describe('Test GatewayDetail', () => {
   });
 
   it('test render GatewayDetail onPress TabPanel zigbee onPressRow', async () => {
-    mock
-      .onGet(API.DEV_MODE.ZIGBEE.DEVICE(1))
-      .reply(200, [{ id: 1, name: 'device 1' }]);
-    await act(async () => {
-      tree = await create(wrapComponent());
-    });
-    const instance = tree.root;
-    const detail = instance?.findByType(Detail);
-    const tabPaneCT = detail.findByType(TabPaneCT);
-    await onChangeTab(tabPaneCT, 1);
+    const { detail } = await renderDetail2();
     await act(async () => {
       await detail.props.onPressRow(1);
     });
@@ -266,16 +272,7 @@ describe('Test GatewayDetail', () => {
   });
 
   it('test render GatewayDetail onPress TabPanel modbus onPressRow', async () => {
-    mock
-      .onGet(API.DEV_MODE.MODBUS.DEVICE(1))
-      .reply(200, [{ id: 1, name: 'device 1' }]);
-    await act(async () => {
-      tree = await create(wrapComponent());
-    });
-    const instance = tree.root;
-    const detail = instance?.findByType(Detail);
-    const tabPaneCT = detail.findByType(TabPaneCT);
-    await onChangeTab(tabPaneCT, 2);
+    const { detail } = await renderDetail();
 
     await act(async () => {
       await detail.props.onPressRow(1);
@@ -314,16 +311,7 @@ describe('Test GatewayDetail', () => {
   });
 
   it('test render GatewayDetail onPress TabPanel zigbee onRefresh', async () => {
-    mock
-      .onGet(API.DEV_MODE.ZIGBEE.DEVICE(1))
-      .reply(200, [{ id: 1, name: 'device 1' }]);
-    await act(async () => {
-      tree = await create(wrapComponent());
-    });
-    const instance = tree.root;
-    const detail = instance?.findByType(Detail);
-    const tabPaneCT = detail.findByType(TabPaneCT);
-    await onChangeTab(tabPaneCT, 1);
+    const { detail, tabPaneCT } = await renderDetail2();
     await act(async () => {
       await detail.props.onRefresh();
     });

package/src/screens/AllGateway/GatewayDetail/index.js

@@ -179,10 +179,11 @@ const GatewayDetail = () => {
           isInternal,
           isZigbee,
           isModbus,
+          board: item?.board,
         }
       );
     },
-    [isModbus, isZigbee, gatewayId, isInternal, navigate]
+    [navigate, isInternal, isZigbee, isModbus, gatewayId, item]
   );
 
   const title = useMemo(() => {

package/src/screens/AllGateway/GatewayInfo/__test__/index.test.js

@@ -14,6 +14,7 @@ import api from '../../../../utils/Apis/axios';
 import GatewayInfo from '..';
 import t from '../../../../hooks/Common/useTranslations';
 import ModalPopupCT from '../../../../commons/ModalPopupCT';
+import { SCConfig } from '../../../../configs';
 
 const mockPop = jest.fn();
 const mock = new MockAdapter(api.axiosInstance);
@@ -93,7 +94,7 @@ describe('Test GatewayInfo', () => {
     const btnDelete = buttonDelete(instance);
     expect(headerCustom).toHaveLength(1);
     expect(alert.props.children[1].props.children.props.children).toEqual(
-      t('go_to_eoh_web_to_see_firmware')
+      t('go_to_eoh_web_to_see_firmware', { appName: SCConfig.appName })
     );
     expect(flatList).toHaveLength(1);
     const textConnect = btnConnect.findAllByType(Text);

package/src/screens/AllGateway/components/Information/__test__/index.test.js

@@ -7,6 +7,7 @@ import { mockSCStore } from '../../../../../context/mockStore';
 import { HeaderCustom } from '../../../../../commons';
 import Information from '../../../components/Information';
 import { AccessibilityLabel } from '../../../../../configs/Constants';
+import { getTranslate } from '../../../../../utils/I18n';
 
 const mockHandleDeleteGateway = jest.fn();
 const mockHandleConnectionMethods = jest.fn();
@@ -51,7 +52,7 @@ describe('Test Information', () => {
     expect(headerCustom).toHaveLength(1);
     expect(flatList).toHaveLength(1);
     expect(viewAlert.props.children[1].props.children.props.children).toEqual(
-      'Go to EoH web to see firmware configuration'
+      getTranslate('en', 'go_to_eoh_web_to_see_firmware', { appName: 'E-Ra' })
     );
     const buttonConnect = instance.findByProps({
       accessibilityLabel:

package/src/screens/AllGateway/components/Information/index.js

@@ -1,6 +1,6 @@
 import React, { useCallback, memo } from 'react';
 import { TouchableOpacity, View, Image, FlatList } from 'react-native';
-import { Colors } from '../../../../configs';
+import { Colors, SCConfig } from '../../../../configs';
 import t from '../../../../hooks/Common/useTranslations';
 import { Text, HeaderCustom } from '../../../../commons';
 import Images from '../../../../configs/Images';
@@ -51,7 +51,9 @@ const Information = ({
               <Image source={Images.inforCode} />
               <View style={styles.flex1}>
                 <Text type="H4" style={styles.marginLeft16}>
-                  {t('go_to_eoh_web_to_see_firmware')}
+                  {t('go_to_eoh_web_to_see_firmware', {
+                    appName: SCConfig.appName,
+                  })}
                 </Text>
               </View>
             </View>

package/src/screens/AllGateway/components/TabPaneCT/__test__/index.test.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { create, act } from 'react-test-renderer';
 import SegmentedControl from '@react-native-community/segmented-control';
-import Carousel from 'react-native-snap-carousel';
+import Carousel from 'react-native-new-snap-carousel';
 
 import { SCProvider } from '../../../../../context';
 import { mockSCStore } from '../../../../../context/mockStore';

package/src/screens/AllGateway/components/TabPaneCT/index.js

@@ -7,7 +7,7 @@ import {
   RefreshControl,
 } from 'react-native';
 import SegmentedControl from '@react-native-community/segmented-control';
-import Carousel from 'react-native-snap-carousel';
+import Carousel from 'react-native-new-snap-carousel';
 
 import { Text, StatusBox } from '../../../../commons';
 import { Constants } from '../../../../configs';

package/src/screens/AllGateway/hooks/useGateway.js

@@ -151,6 +151,7 @@ export const useGateway = () => {
         success &&
           setDetailDeviceZigbee((prev) => ({ ...prev, configs: data }));
       }
+
       if (isAction) {
         const { success, data } = await axiosGet(
           API.DEV_MODE.ZIGBEE.ACTION(gatewayId, deviceId)

package/src/screens/AllGateway/test-utils.js

@@ -0,0 +1,20 @@
+import Detail from './components/Detail';
+import TabPaneCT from './components/TabPaneCT';
+import SegmentedControl from '@react-native-community/segmented-control';
+import { act } from 'react-test-renderer';
+
+export const fetchGatewayCT = async (tree) => {
+  const instance = tree.root;
+  const detail = instance?.findByType(Detail);
+  const tabPaneCT = detail.findByType(TabPaneCT);
+  const segmentedControl = tabPaneCT.findByType(SegmentedControl);
+  await act(async () => {
+    await segmentedControl.props.onChange({
+      nativeEvent: { selectedSegmentIndex: 1 },
+    });
+  });
+  return { tabPaneCT, detail };
+};
+
+export const flushPromises = () =>
+  new Promise((resolve) => setImmediate(resolve));

package/src/screens/Device/__test__/detail.test.js

@@ -136,9 +136,7 @@ describe('test DeviceDetail', () => {
     const setState = jest.fn();
     const useLayoutEffectSpy = jest.spyOn(React, 'useLayoutEffect');
     useLayoutEffectSpy.mockImplementation(() => setState);
-  });
-
-  afterEach(() => {
+    mock.reset();
     mockedNavigate.mockClear();
   });
 
@@ -333,10 +331,17 @@ describe('test DeviceDetail', () => {
   });
 
   it('ButtonPopup render', async () => {
+    mock.onPut(API.EMERGENCY_BUTTON.RESOLVE(0)).reply(200);
     await act(async () => {
       tree = await create(wrapComponent(store, account, route));
     });
     const instance = tree.root;
+
+    const alertAction = instance.findByType(AlertAction);
+    await act(async () => {
+      await alertAction.props.rightButtonClick();
+      await alertAction.props.onHide();
+    });
     const buttonPopupTitle = instance.find(
       (el) =>
         el.props.accessibilityLabel ===

package/src/screens/Device/components/SensorDisplayItem.js

@@ -162,11 +162,7 @@ export const SensorDisplayItem = ({
           return <EmergencyButton emergency={emergency} />;
       }
     case 'info':
-      return (
-        <CardDevMode id={idTemplate}>
-          <FooterInfo data={configuration} />
-        </CardDevMode>
-      );
+      return <FooterInfo data={configuration} />;
     case 'smart_ir':
       return <SmartIr item={item} />;
     default:

package/src/screens/EmergencyContacts/EmergencyContactsList.js

@@ -57,9 +57,6 @@ export const EmergencyContactsList = ({ route }) => {
     group.id,
   ]);
 
-  const onAddNew = useCallback(() => {
-    setShowAddnewModal();
-  }, [setShowAddnewModal]);
   const onItemAddClick = useCallback(
     (item) => {
       item.route && navigate(item.route, item.data || {});
@@ -108,7 +105,7 @@ export const EmergencyContactsList = ({ route }) => {
             subtext={t('emergency_max_contacts', {
               number: MAX_EMERGENCY_CONTACTS.toString(),
             })}
-            onPress={onAddNew}
+            onPress={setShowAddnewModal}
           />
           {!!listContacts.length &&
             listContacts.map((contact, index) => (

package/src/screens/EmergencyContacts/__test__/EmergencyContactList.test.js

@@ -12,6 +12,7 @@ import { getTranslate } from '../../../utils/I18n';
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
 import api from '../../../utils/Apis/axios';
+import { RowUser } from '../../../commons/RowUser';
 
 const mock = new MockAdapter(api.axiosInstance);
 
@@ -43,12 +44,10 @@ describe('test EmergencyContactList', () => {
         group: 1,
       },
     };
-  });
-  let tree;
-
-  afterEach(() => {
     mockedNavigate.mockClear();
+    mock.reset();
   });
+  let tree;
 
   it('handleRemove', async () => {
     await act(async () => {
@@ -103,7 +102,11 @@ describe('test EmergencyContactList', () => {
       tree = await create(wrapComponent(route));
     });
     const instance = tree.root;
+    const rowUsers = instance.findAllByType(RowUser);
 
+    await act(async () => {
+      rowUsers[0].props.onPress();
+    });
     const buttons = instance.findAllByType(TouchableOpacity);
     const buttonsMenuActionList = buttons.filter(
       (item) =>
@@ -113,11 +116,36 @@ describe('test EmergencyContactList', () => {
     expect(buttonsMenuActionList).toHaveLength(2);
   });
 
+  it('delete user', async () => {
+    mock.onGet(API.EMERGENCY_BUTTON.CONTACTS()).reply(200, [
+      {
+        id: 1,
+      },
+    ]);
+    await act(async () => {
+      tree = await create(wrapComponent(route));
+    });
+    const instance = tree.root;
+    const rowUsers = instance.findAllByType(RowUser);
+    expect(rowUsers).toHaveLength(2);
+    const remove = rowUsers[1].findByType(TouchableOpacity);
+    await act(async () => {
+      remove.props.onPress();
+    });
+    const alertAction = instance.findByType(AlertAction);
+    expect(alertAction.props.visible).toBeTruthy();
+  });
+
   it('onItemAddClick select unit members', async () => {
     await act(async () => {
       tree = await create(wrapComponent(route));
     });
     const instance = tree.root;
+    const rowUsers = instance.findAllByType(RowUser);
+
+    await act(async () => {
+      rowUsers[0].props.onPress();
+    });
 
     const buttons = instance.findAllByType(TouchableOpacity);
     const buttonsMenuActionList = buttons.filter(

package/src/screens/EmergencyContacts/__test__/EmergencyContactsSelectContacts.test.js

@@ -59,11 +59,13 @@ describe('test EmergencyContactsSelectContacts', () => {
 
   it('render emergencyContactsSelectContacts success', async () => {
     jest.useFakeTimers();
-    mock.onGet(API.SHARE.UNITS_MEMBERS(1, 1)).reply(200, {
-      id: 1,
-      name: 'test',
-      phone_number: 1,
-    });
+    mock.onGet(API.SHARE.UNITS_MEMBERS(1, 1)).reply(200, [
+      {
+        id: 1,
+        name: 'test',
+        phone_number: 1,
+      },
+    ]);
     await act(async () => {
       tree = await create(wrapComponent(route));
     });

package/src/screens/EmergencyContacts/__test__/hooks.test.js

@@ -50,7 +50,7 @@ describe('Test EmergencyContacts', () => {
     const { result } = renderHook(() => useAlertRemoveEmergencyContact(), {
       wrapper,
     });
-    await act(() => {
+    await act(async () => {
       result.current.stateAlertRemoveContact = {
         ...result.current.stateAlertRemoveContact,
         visible: true,

package/src/screens/GuestInfo/__test__/index.test.js

@@ -81,6 +81,12 @@ describe('Test GuestInfo', () => {
     const texts = instance.findAllByType(Text);
     expect(texts[4].props.children).toBe(data.user.id);
     expect(texts[6].props.children).toBe('Always');
+
+    const rows = instance.findAllByType(RowGuestInfo);
+    // show AccessScheduleSheet
+    await act(async () => {
+      await rows[1].props.onPress();
+    });
     const accessScheduleItems = instance.findAllByType(AccessScheduleItem);
     const radioButtons = getButton(
       instance,
@@ -115,32 +121,24 @@ describe('Test GuestInfo', () => {
       tree = await create(wrapComponent(route));
     });
     const instance = tree.root;
-    const rows = instance.findAllByType(RowGuestInfo);
     const accessScheduleSheet = instance.find(
       (el) =>
         el.props.accessibilityLabel === AccessibilityLabel.ACCESS_SCHEDULE_SHEET
     );
     const dateTimePicker = instance.findByType(WheelDateTimePicker);
-    const radioButtons = getButton(
-      instance,
-      AccessibilityLabel.ACCESS_SCHEDULE_RADIO_BUTTON,
-      true
-    );
-    const accessScheduleSheetDone = getButton(
-      instance,
-      `${AccessibilityLabel.ACCESS_SCHEDULE_SHEET}${AccessibilityLabel.VIEW_BUTTON_BOTTOM_RIGHT_BUTTON}`
-    );
-    const dateTimePickerDone = getButton(
-      instance,
-      `${AccessibilityLabel.WHEEL_DATE_TIME_PICKER_BUTTON}${AccessibilityLabel.VIEW_BUTTON_BOTTOM_RIGHT_BUTTON}`
-    );
 
+    const rows = instance.findAllByType(RowGuestInfo);
     // show AccessScheduleSheet
     await act(async () => {
       await rows[1].props.onPress();
     });
     expect(accessScheduleSheet.props.isVisible).toBeTruthy();
 
+    const radioButtons = getButton(
+      instance,
+      AccessibilityLabel.ACCESS_SCHEDULE_RADIO_BUTTON,
+      true
+    );
     // select recurring
     await act(async () => {
       await radioButtons[1].props.onPress();
@@ -159,6 +157,11 @@ describe('Test GuestInfo', () => {
     expect(accessScheduleSheet.props.isVisible).toBeFalsy();
     expect(dateTimePicker.props.isVisible).toBeTruthy();
 
+    const dateTimePickerDone = getButton(
+      instance,
+      `${AccessibilityLabel.WHEEL_DATE_TIME_PICKER_BUTTON}${AccessibilityLabel.VIEW_BUTTON_BOTTOM_RIGHT_BUTTON}`
+    );
+
     // WheelDateTimePicker -> click done
     await act(async () => {
       await dateTimePickerDone.props.onPress();
@@ -167,6 +170,10 @@ describe('Test GuestInfo', () => {
     expect(accessScheduleSheet.props.isVisible).toBeTruthy();
     expect(dateTimePicker.props.isVisible).toBeFalsy();
 
+    const accessScheduleSheetDone = getButton(
+      instance,
+      `${AccessibilityLabel.ACCESS_SCHEDULE_SHEET}${AccessibilityLabel.VIEW_BUTTON_BOTTOM_RIGHT_BUTTON}`
+    );
     // AccessScheduleSheet -> click done
     await act(async () => {
       await accessScheduleSheetDone.props.onPress();
@@ -182,6 +189,11 @@ describe('Test GuestInfo', () => {
       tree = await create(wrapComponent(route));
     });
     const instance = tree.root;
+    const rows = instance.findAllByType(RowGuestInfo);
+    await act(async () => {
+      await rows[1].props.onPress();
+    });
+
     const saveButton = instance.find(
       (el) =>
         el.props.accessibilityLabel ===

package/src/screens/GuestInfo/index.js

@@ -12,7 +12,7 @@ import Text from '../../commons/Text';
 import { useBoolean } from '../../hooks/Common';
 import { axiosGet, axiosPut } from '../../utils/Apis/axios';
 
-import { API, Colors } from '../../configs';
+import { API, Colors, SCConfig } from '../../configs';
 import {
   ACCESS_SCHEDULE_PROPERTIES,
   typeMaps,
@@ -123,7 +123,7 @@ const GuestInfo = ({ route }) => {
             )}
             {guest?.id && (
               <RowGuestInfo
-                textLeft={t('eoh_account_id')}
+                textLeft={t('eoh_account_id', { appName: SCConfig.appName })}
                 textRight={guest.id}
               />
             )}

package/src/screens/HanetCamera/CaptureFaceID.js

@@ -127,7 +127,7 @@ const CaptureFaceID = ({ route }) => {
                 return <LoadingCamera />;
               }
               return (
-                <View style={styles.maskOutter}>
+                <View style={styles.maskOuter}>
                   <FaceFrameSvg />
                 </View>
               );

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

@@ -63,7 +63,6 @@ describe('Test HanetMemberInfo', () => {
     });
     const instance = tree.root;
     const touches = instance.findAllByType(TouchableOpacity);
-    expect(touches).toHaveLength(7);
     const alertAction = instance.findByType(AlertAction);
     // open alert action
     await act(async () => {
@@ -85,7 +84,6 @@ describe('Test HanetMemberInfo', () => {
     });
     const instance = tree.root;
     const touches = instance.findAllByType(TouchableOpacity);
-    expect(touches).toHaveLength(7);
     const alertAction = instance.findByType(AlertAction);
 
     // open alert action
@@ -118,7 +116,6 @@ describe('Test HanetMemberInfo', () => {
     });
     const instance = tree.root;
     const touches = instance.findAllByType(TouchableOpacity);
-    expect(touches).toHaveLength(7);
 
     await act(async () => {
       await touches[1].props.onPress();
@@ -138,7 +135,7 @@ describe('Test HanetMemberInfo', () => {
     });
     const instance = tree.root;
     const touches = instance.findAllByType(TouchableOpacity);
-    expect(touches).toHaveLength(7);
+
     await act(async () => {
       await touches[1].props.onPress();
     });
@@ -161,7 +158,6 @@ describe('Test HanetMemberInfo', () => {
     });
     const instance = tree.root;
     const touches = instance.findAllByType(TouchableOpacity);
-    expect(touches).toHaveLength(7);
 
     // press set face id
     await act(async () => {

package/src/screens/HanetCamera/styles/captureFaceIDStyles.js

@@ -24,7 +24,7 @@ export default StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'flex-end',
   },
-  maskOutter: {
+  maskOuter: {
     position: 'absolute',
     alignSelf: 'center',
     top: '12%',

package/src/screens/PlayBackCamera/Timer.js

@@ -45,11 +45,10 @@ const Timer = ({
             width: spacerWidth,
           }}
         />
-        {data.map((i) => {
+        {data.map((i, index) => {
           return (
-            <View>
+            <View key={i}>
               <View
-                key={i}
                 style={{
                   backgroundColor: i % step === 0 ? stepColor : normalColor,
                   height: i % step === 0 ? stepHeight : normalHeight,