@eohjsc/react-native-smart-city 0.2.59 → 0.2.63

package/README.md

@@ -1,101 +1,148 @@
-# react-native-smart-city
+## react-native-smart-city
 
 ## Getting started
+1. Install package dependencies:
+  - Using [Yarn](https://yarnpkg.com/): `yarn add react-native-reanimated@^1.10.1`
 
-`$ npm install @eohjsc/react-native-smart-city --save`
+2. Install:
+  - Using [npm](https://www.npmjs.com/#getting-started): `npm install @eohjsc/react-native-smart-city --save`
+  - Using [Yarn](https://yarnpkg.com/): `yarn add @eohjsc/react-native-smart-city`
 
+3. Compile application using react-native run-android
 ### Mostly automatic installation
-
 `$ react-native link @eohjsc/react-native-smart-city`
 
 ## Usage
-
-Make sure that SmartCity
-Example:
-
+1. StackNavigator
 ```javascript
-import SmartCity, {
-  AddSubUnitStack,
-  EmergencyContactsStack,
+import {
+  UnitStack,
   AddMemberStack,
-  AddGatewayStack,
+  AddSubUnitStack,
   AddDeviceStack,
-  UnitStack,
-  AddUnitStack,
-  SharedStack,
-  Explore,
-  SCProvider,
+  AddGatewayStack,
   SCContext,
   AddLGDeviceStack,
   initSCConfig,
+  AddUnitStack,
   AutomateStack,
   NotificationStack,
-  MyPinnedSharedUnit,
-  SharedUnit,
-  MyUnit,
 } from '@eohjsc/react-native-smart-city';
 import { createStackNavigator } from '@react-navigation/stack';
 
 // TODO: What to do with the module?   
-const Stack = creatStackNavigation();
+const Stack = createStackNavigator();
 
 const YourStack = () => {
   // Declare yourAuthObject and params
   return (
-    <SmartCity auth={yourAuthObject}>
-      <NavigationContainer>
-        <Stack.Navigator>
-          <Stack.Screen
-            name={'MainTab'}
-            component={MainTab}
-            options={{
-              headerShown: false,
-            }}
-          />
-          <Stack.Screen
-            name={'UnitStack'}
-            component={UnitStack}
-            initialParams={params}
-            options={{
-              headerShown: false,
-            }}
-          />
-          <Stack.Screen
-            name={'AddGatewayStack'}
-            component={AddGatewayStack}
-            options={{ headerShown: false }}
-          />
-          <Stack.Screen
-            name={'AddDeviceStack'}
-            component={AddDeviceStack}
-            options={{ headerShown: false }}
-          />
-          <Stack.Screen
-            name={'AddMemberStack'}
-            component={AddMemberStack}
-            options={{ headerShown: false }}
-          />
-          <Stack.Screen
-            name={'AddSubUnitStack'}
-            component={AddSubUnitStack}
-            options={{ headerShown: false }}
-          />
-          <Stack.Screen
-            name={'EmergencyContactsStack'}
-            component={EmergencyContactsStack}
-            options={{ headerShown: false }}
-          />
-        </Stack.Navigator>
-      </NavigationContainer>
-    </SmartCity>
+    <Stack.Navigator>
+      <Stack.Screen
+        name={'MainTab'}
+        component={MainTab}
+        options={{
+          headerShown: false,
+        }}
+      />
+      <Stack.Screen
+        name={'UnitStack'}
+        component={UnitStack}
+        initialParams={params}
+        options={{
+          headerShown: false,
+        }}
+      />
+      <Stack.Screen
+        name={'AddGatewayStack'}
+        component={AddGatewayStack}
+        options={{ headerShown: false }}
+      />
+      <Stack.Screen
+        name={'AddDeviceStack'}
+        component={AddDeviceStack}
+        options={{ headerShown: false }}
+      />
+      <Stack.Screen
+        name={'AddMemberStack'}
+        component={AddMemberStack}
+        options={{ headerShown: false }}
+      />
+      <Stack.Screen
+        name={'AddSubUnitStack'}
+        component={AddSubUnitStack}
+        options={{ headerShown: false }}
+      />
+    </Stack.Navigator>
   );
 };
 const MainTab = () => {
   return (
     <Tab.Navigator>
-      <Tab.Screen name={'SharedStack'} component={SharedStack} />
-      <Tab.Screen name={'Search'} component={Explore} />
+      <Tab.Screen name={'AutomateStack'} component={AutomateStack} />
+      <Tab.Screen name={'NotificationStack'} component={NotificationStack} />
     </Tab.Navigator>
   );
 };
 ```
+2. Use components
+```javascript
+import React from 'react';
+import { View } from 'react-native';
+import { MyPinnedSharedUnit, MyUnit } from '@eohjsc/react-native-smart-city';
+
+const MyScreen = () => {
+  return (
+    <View>
+        <MyUnit />
+        <MyPinnedSharedUnit />
+    </View>
+  );
+};
+```
+3. Trigger quick action
+```javascript
+import React from 'react';
+import { View, Button } from 'react-native';
+import { sendRemoteCommand } from '@eohjsc/react-native-smart-city/src/iot/RemoteControl';
+
+export const MyFunctionalComponent = () => {
+  const sensor = {
+    id: 1,
+    remote_control_options: {
+      internet: {},
+      bluetooth: {},
+    },
+  };
+  const action = {
+    color: '#00979D',
+    command_prefer_over_bluetooth: true,
+    command_prefer_over_googlehome: false,
+    command_prefer_over_internet: false,
+    googlehome_actions: [],
+    icon: 'caret-up',
+    icon_kit: null,
+    id: 1,
+    key: '24240de0-5c8e-11ec-bf63-0242ac130002',
+    lg_actions: [],
+    name: 'Garage Up',
+  };
+  const handleQuickAction = async() => {
+    const result = await sendRemoteCommand(sensor, action); // Action Garage Up
+    if (result){
+      console.log('Successful control')
+    }else {
+      console.log('Control failed')
+    }
+  };
+  return (
+    <View>
+      <Button onPress={handleQuickAction} title="Example trigger quick action control Garage Up" />
+    </View>
+  );
+};
+```
+- sendRemoteCommand user needs to `have permission to control the device`, you pass in the `sensor and action` to it and it will run after calling render.  
+- `sensor` is a device in your Unit and action is the `action` key of the device.. 
+- You can take out the sensor and action from your Unit when calling the `API.UNIT.UNIT_DETAIL(unitId)` it will return all devices in 1 unit.
+- Or get sensor from `API.SENSOR.DISPLAY(sensor.id)` returns all actions of 1 device.
+- Refer YourProjectPath /node_modules/@eohjsc/react-native-smart-city/src/screens/Unit/Detail.js

package/assets/images/Map/MarkerGeolocation.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="39" viewBox="0 0 24 39" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 8.21875C11.0656 8.21875 10.1875 8.58125 9.525 9.24375C9.19945 9.56837 8.94129 9.95415 8.76538 10.3789C8.58947 10.8037 8.49928 11.259 8.5 11.7188C8.5 12.6531 8.86562 13.5312 9.525 14.1938C9.84962 14.5193 10.2354 14.7775 10.6602 14.9534C11.0849 15.1293 11.5403 15.2195 12 15.2188C12.9344 15.2188 13.8125 14.8531 14.475 14.1938C15.1375 13.5312 15.5 12.6531 15.5 11.7188C15.5 10.7844 15.1375 9.90625 14.475 9.24375C13.8125 8.58125 12.9344 8.21875 12 8.21875ZM22.7062 7.03438C22.1179 5.67775 21.2697 4.44944 20.2094 3.41875C19.1456 2.37875 17.8915 1.55331 16.5156 0.9875C15.0844 0.39375 13.5656 0.09375 12 0.09375C10.4344 0.09375 8.91562 0.39375 7.48438 0.984375C6.1 1.55625 4.85938 2.375 3.79063 3.41563C2.73101 4.44689 1.88286 5.67506 1.29375 7.03125C0.684375 8.4375 0.375 9.93125 0.375 11.4688C0.375 13.675 0.903125 15.8719 1.94063 17.9906C2.775 19.6938 3.94063 21.3531 5.40938 22.9312C7.91875 25.625 10.55 27.2719 11.2969 27.7125C11.5089 27.8377 11.7507 27.9036 11.9969 27.9031C12.2406 27.9031 12.4812 27.8406 12.6969 27.7125C13.4437 27.2719 16.075 25.625 18.5844 22.9312C20.0531 21.3562 21.2188 19.6938 22.0531 17.9906C23.0969 15.875 23.625 13.6812 23.625 11.4719C23.625 9.93437 23.3156 8.44063 22.7062 7.03438ZM12 17.2188C8.9625 17.2188 6.5 14.7563 6.5 11.7188C6.5 8.68125 8.9625 6.21875 12 6.21875C15.0375 6.21875 17.5 8.68125 17.5 11.7188C17.5 14.7563 15.0375 17.2188 12 17.2188Z" fill="#1890FF"/>
+<path d="M16.6666 30.2735L15.7266 29.3335L12 33.0602L8.27331 29.3335L7.33331 30.2735L11.06 34.0002L7.33331 37.7268L8.27331 38.6668L12 34.9402L15.7266 38.6668L16.6666 37.7268L12.94 34.0002L16.6666 30.2735Z" fill="#262626"/>
+</svg>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eohjsc/react-native-smart-city",
   "title": "React Native Smart Home",
-  "version": "0.2.59",
+  "version": "0.2.63",
   "description": "TODO",
   "main": "index.js",
   "files": [
@@ -106,7 +106,7 @@
     "@react-native-community/async-storage": "^1.12.1",
     "@react-native-community/cameraroll": "^4.0.0",
     "@react-native-community/checkbox": "^0.5.5",
-    "@react-native-community/datetimepicker": "^3.0.2",
+    "@react-native-community/datetimepicker": "https://github.com/hinh-eoh/datepicker",
     "@react-native-community/geolocation": "^2.0.2",
     "@react-native-community/masked-view": "^0.1.10",
     "@react-native-community/netinfo": "^6.0.0",
@@ -157,7 +157,7 @@
     "react-native-geocoder": "^0.5.0",
     "react-native-gesture-handler": "^1.7.0",
     "react-native-get-location": "^2.0.0",
-    "react-native-image-picker": "^3.1.4",
+    "react-native-image-crop-picker": "^0.37.2",
     "react-native-image-resizer": "^1.4.5",
     "react-native-input-credit-card": "^0.5.5",
     "react-native-iphone-x-helper": "^1.2.1",

package/src/commons/ActionGroup/CurtainButtonTemplate.js

@@ -8,11 +8,14 @@ import { TESTID } from '../../configs/Constants';
 import { Colors, Images } from '../../configs';
 import { Section } from '../../commons/Section';
 import { IconOutline } from '@ant-design/icons-react-native';
+import MenuActionAddSchedule from './hooks/MenuActionAddSchedule';
+import { useBoolean } from '../../hooks/Common';
 
 const CurtainButtonTemplate = memo(({ actionGroup, doAction }) => {
   const t = useTranslations();
   const { configuration } = actionGroup;
   const [lock, setLock] = useState(false);
+  const [isShowModal, setShowModal, setHideModal] = useBoolean(false);
 
   const onButtonOpenPress = useCallback(
     () => doAction(configuration.open_action_data),
@@ -120,17 +123,22 @@ const CurtainButtonTemplate = memo(({ actionGroup, doAction }) => {
           <Text type="H4" color={Colors.Gray8}>
             {t('schedule')}
           </Text>
-          <TouchableOpacity>
+          <TouchableOpacity onPress={setShowModal}>
             <IconOutline name="plus" size={20} />
           </TouchableOpacity>
         </View>
         <View>
-          <TouchableOpacity style={styles.tapToAddSchedule}>
+          <TouchableOpacity
+            onPress={setShowModal}
+            style={styles.tapToAddSchedule}
+          >
             <Text type="Body" color={Colors.Gray6} center>
               {t('tap_to_add_new_schedule')}
             </Text>
           </TouchableOpacity>
         </View>
+
+        <MenuActionAddSchedule visible={isShowModal} hideModal={setHideModal} />
       </Section>
     </>
   );

package/src/commons/ActionGroup/__test__/CurtainButtonTemplate.test.js

@@ -67,6 +67,6 @@ describe('Test CurtainButtonTemplate', () => {
     });
     const instance = wrapper.root;
     const touchableOpacities = instance.findAllByType(TouchableOpacity);
-    expect(touchableOpacities.length).toEqual(5);
+    expect(touchableOpacities.length).toEqual(18);
   });
 });

package/src/commons/ActionGroup/__test__/MenuActionAddSchedule.test.js

@@ -0,0 +1,71 @@
+import React from 'react';
+import renderer, { act } from 'react-test-renderer';
+
+import MenuActionAddSchedule from '../hooks/MenuActionAddSchedule';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+import RecurringDetail from '../hooks/RecurringDetail';
+import WheelDateTimePicker from '../../WheelDateTimePicker';
+
+const mockSetState = jest.fn();
+jest.mock('react', () => {
+  return {
+    ...jest.requireActual('react'),
+    memo: (x) => x,
+    useState: jest.fn((init) => [init, mockSetState]),
+  };
+});
+
+const wrapComponent = (actionGroup) => (
+  <SCProvider initState={mockSCStore({})}>
+    <MenuActionAddSchedule />
+  </SCProvider>
+);
+
+const mockedNavigate = jest.fn();
+
+jest.mock('@react-navigation/native', () => {
+  return {
+    ...jest.requireActual('@react-navigation/native'),
+    useNavigation: () => ({
+      goBack: mockedNavigate,
+    }),
+  };
+});
+
+jest.mock('react', () => {
+  return {
+    ...jest.requireActual('react'),
+    memo: (x) => x,
+  };
+});
+
+jest.mock('axios');
+
+describe('Test MenuActionAddSchedule', () => {
+  let tree;
+
+  test('test render MenuActionAddSchedule', async () => {
+    await act(async () => {
+      tree = await renderer.create(wrapComponent());
+    });
+    const instance = tree.root;
+
+    const recurringDetail = instance.findByType(RecurringDetail);
+    await act(async () => {
+      recurringDetail.props.onShowSetDateTime();
+    });
+
+    const wheelDateTimePicker = instance.findByType(WheelDateTimePicker);
+
+    await act(async () => {
+      wheelDateTimePicker.props.onPicked();
+    });
+
+    await act(async () => {
+      wheelDateTimePicker.props.onCancel();
+    });
+
+    expect(wheelDateTimePicker.props.isVisible).toEqual(false);
+  });
+});

package/src/commons/ActionGroup/hooks/AccessScheduleDetailStyles.js

@@ -0,0 +1,41 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../../../configs';
+
+export default StyleSheet.create({
+  title: {
+    marginTop: 16,
+  },
+  value: {
+    marginTop: 8,
+    marginBottom: 12,
+  },
+  repeatWrap: {
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    marginTop: 16,
+  },
+  repeatItem: {
+    width: 24,
+    height: 24,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 12,
+    borderWidth: 0,
+    borderColor: Colors.Orange,
+  },
+  repeatItemSelected: {
+    borderWidth: 1,
+  },
+  repeatText: {
+    lineHeight: 16,
+  },
+  curtainText: {
+    fontSize: 17,
+    marginTop: 12,
+    color: Colors.Gray9,
+  },
+  boder: {
+    borderBottomWidth: 1,
+    borderColor: Colors.Gray4,
+  },
+});

package/src/commons/ActionGroup/hooks/MenuActionAddSchedule.js

@@ -0,0 +1,110 @@
+import React, { memo, useCallback, useState } from 'react';
+import { View } from 'react-native';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
+
+import Text from '../../Text';
+import { ModalCustom } from '../../Modal';
+import ViewButtonBottom from '../../ViewButtonBottom';
+import WheelDateTimePicker from '../../WheelDateTimePicker';
+import moment from 'moment';
+import { useBoolean } from '../../../hooks/Common';
+import RecurringDetail from './RecurringDetail';
+import _TextInput from '../../../commons/Form/TextInput';
+import styles from './MenuActionAddScheduleStyle';
+
+const MenuActionAddSchedule = memo(({ visible, hideModal, onItemClick }) => {
+  const t = useTranslations();
+
+  const [stateDateTimePicker, setStateDateTimePicker] = useState({
+    isVisible: false,
+    mode: 'time',
+    defaultValue: moment().valueOf(),
+    setter: null,
+  });
+
+  const [lockShowing, releaseLockShowing, acquireLockShowing] =
+    useBoolean(true);
+  const [recurringTimeStart, setRecurringTimeStart] = useState('');
+  const [recurringTimeEnd, setRecurringTimeEnd] = useState('');
+  const [recurringTimeRepeat, setRecurringTimeRepeat] = useState('');
+
+  const onShowSetDateTime = useCallback(
+    (currentValue, setter, mode) => {
+      acquireLockShowing();
+      setStateDateTimePicker((state) => ({
+        ...state,
+        isVisible: true,
+        mode: mode,
+        defaultValue: currentValue,
+        setter: setter,
+      }));
+    },
+    [setStateDateTimePicker, acquireLockShowing]
+  );
+
+  const onDateTimePicked = useCallback(
+    (timeData) => {
+      const setter = stateDateTimePicker.setter;
+      setter && setter(moment(timeData));
+    },
+    [stateDateTimePicker]
+  );
+
+  const onHideSetDateTime = useCallback(() => {
+    acquireLockShowing();
+    setStateDateTimePicker((state) => ({
+      ...state,
+      isVisible: false,
+    }));
+  }, [setStateDateTimePicker, acquireLockShowing]);
+
+  return (
+    <ModalCustom
+      isVisible={visible}
+      onBackButtonPress={hideModal}
+      onBackdropPress={hideModal}
+      style={styles.container}
+    >
+      <View style={styles.popoverStyle}>
+        <View style={styles.modalWrapper}>
+          <View style={styles.modalHeader}>
+            <Text style={styles.modalHeaderText}>{t('add_schedule')}</Text>
+            <View style={styles.boder} />
+            <RecurringDetail
+              onShowSetDateTime={onShowSetDateTime}
+              recurringTimeStart={recurringTimeStart}
+              recurringTimeEnd={recurringTimeEnd}
+              recurringTimeRepeat={recurringTimeRepeat}
+              setRecurringTimeStart={setRecurringTimeStart}
+              setRecurringTimeEnd={setRecurringTimeEnd}
+              setRecurringTimeRepeat={setRecurringTimeRepeat}
+            />
+
+            <Text style={styles.subName}>{t('schedule_name')}</Text>
+            <_TextInput
+              placeholder={t('enter_name')}
+              wrapStyle={styles.noMarginTop}
+              textInputStyle={styles.textInput}
+            />
+            <View style={styles.ViewButtonBottom}>
+              <ViewButtonBottom
+                leftTitle={t('cancel')}
+                onLeftClick={hideModal}
+                rightTitle={t('done')}
+              />
+            </View>
+            <WheelDateTimePicker
+              mode={stateDateTimePicker.mode}
+              isVisible={stateDateTimePicker.isVisible && lockShowing}
+              defaultValue={stateDateTimePicker.defaultValue}
+              onPicked={onDateTimePicked}
+              onCancel={onHideSetDateTime}
+              onHide={releaseLockShowing}
+            />
+          </View>
+        </View>
+      </View>
+    </ModalCustom>
+  );
+});
+export default MenuActionAddSchedule;

package/src/commons/ActionGroup/hooks/MenuActionAddScheduleStyle.js

@@ -0,0 +1,69 @@
+import { Colors } from '../../../configs';
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  container: {
+    flex: 1,
+    margin: 0,
+  },
+  popoverStyle: {
+    width: '100%',
+    backgroundColor: Colors.White,
+    bottom: 0,
+    left: 0,
+    position: 'absolute',
+    borderRadius: 10,
+  },
+  modalWrapper: {
+    flex: 1,
+    flexDirection: 'column',
+    backgroundColor: Colors.White,
+    borderRadius: 10,
+  },
+  modalHeader: {
+    padding: 16,
+    backgroundColor: Colors.White,
+    justifyContent: 'flex-start',
+  },
+  modalHeaderText: {
+    fontSize: 17,
+    lineHeight: 24,
+    color: Colors.Gray9,
+    fontWeight: 'bold',
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
+    marginVertical: 20,
+  },
+  boder: {
+    borderBottomWidth: 1,
+    borderColor: Colors.Gray4,
+  },
+  subName: {
+    color: Colors.Gray8,
+    marginTop: 12,
+  },
+  ViewButtonBottom: {
+    borderTopWidth: 1,
+    borderTopColor: Colors.Gray4,
+  },
+  scheduleName: {
+    fontSize: 17,
+    marginTop: 12,
+    color: Colors.Gray9,
+    marginBottom: 12,
+  },
+  noMarginTop: {
+    marginTop: 0,
+    backgroundColor: Colors.White,
+  },
+  textInput: {
+    marginTop: 0,
+    borderWidth: 0,
+    borderBottomWidth: 1,
+    borderBottomColor: Colors.Gray4,
+    paddingLeft: 0,
+    backgroundColor: Colors.White,
+    fontSize: 17,
+    color: Colors.Gray9,
+  },
+});

package/src/commons/ActionGroup/hooks/RecurringDetail.js

@@ -0,0 +1,97 @@
+import React, { useCallback } from 'react';
+import { View, TouchableOpacity } from 'react-native';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
+
+import Text from '../../../commons/Text';
+import { Colors } from '../../../configs';
+import { REPEAT_ITEMS } from '../../../screens/GuestInfo/constant';
+import styles from './AccessScheduleDetailStyles';
+
+const RecurringDetail = ({
+  onShowSetDateTime,
+  recurringTimeStart,
+  recurringTimeEnd,
+  recurringTimeRepeat,
+  setRecurringTimeStart,
+  setRecurringTimeEnd,
+  setRecurringTimeRepeat,
+}) => {
+  const t = useTranslations();
+  const onSetTimeStart = useCallback(() => {
+    onShowSetDateTime();
+  }, [onShowSetDateTime]);
+
+  const onSetTimeEnd = useCallback(() => {
+    onShowSetDateTime();
+  }, [onShowSetDateTime]);
+
+  const onSetRepeat = useCallback(
+    (item) => {
+      const index = recurringTimeRepeat.indexOf(item.value);
+      if (index !== -1) {
+        setRecurringTimeRepeat([
+          ...recurringTimeRepeat.slice(0, index),
+          ...recurringTimeRepeat.slice(index + 1),
+        ]);
+      } else {
+        setRecurringTimeRepeat([...recurringTimeRepeat, item.value]);
+      }
+    },
+    [recurringTimeRepeat, setRecurringTimeRepeat]
+  );
+
+  const renderRepeatItem = useCallback(
+    (item, index, isSelected) => {
+      return (
+        <TouchableOpacity
+          key={index}
+          style={[styles.repeatItem, isSelected && styles.repeatItemSelected]}
+          onPress={() => onSetRepeat(item)}
+        >
+          <Text
+            type="Body"
+            lineHeight={16}
+            color={isSelected ? Colors.Orange : item.color}
+            style={styles.repeatText}
+          >
+            {item.text}
+          </Text>
+        </TouchableOpacity>
+      );
+    },
+    [onSetRepeat]
+  );
+
+  return (
+    <View>
+      <Text style={styles.curtainText}>{t('curtain_opens')}</Text>
+      <TouchableOpacity onPress={onSetTimeStart}>
+        <Text type="Body" color={Colors.Orange} style={styles.value}>
+          07:00 AM
+        </Text>
+      </TouchableOpacity>
+      <View style={styles.boder} />
+      <Text style={styles.curtainText}>{t('curtain_closes')}</Text>
+      <TouchableOpacity onPress={onSetTimeEnd}>
+        <Text type="Body" color={Colors.Orange} style={styles.value}>
+          12:00 AM
+        </Text>
+      </TouchableOpacity>
+      <View style={styles.boder} />
+      <Text type="Body" color={Colors.Gray8} style={styles.title}>
+        {t('repeat')}
+      </Text>
+      <View style={styles.repeatWrap}>
+        {REPEAT_ITEMS.map((item, index) =>
+          renderRepeatItem(
+            item,
+            index,
+            recurringTimeRepeat.includes(item.value)
+          )
+        )}
+      </View>
+    </View>
+  );
+};
+
+export default RecurringDetail;