@eohjsc/react-native-smart-city 0.2.54 → 0.2.58

package/src/commons/ThreeButtonHistory/__test__/ThreeButtonHistory.test.js

@@ -214,18 +214,27 @@ describe('test ThreeButtonHistory', () => {
         await calendar.props.onDayPress({ dateString: date });
       });
     };
-    await selectDate('2021-09-20');
-    await selectDate('2021-09-02');
-    await selectDate('2021-09-09');
-    await selectDate('2021-09-10');
-    await selectDate('2021-09-05');
-    await selectDate('2021-09-05');
-    await selectDate('2021-09-20');
+    // 2 -> 9
+    await selectDate('2021-09-20'); // 2 -> 20
+    await selectDate('2021-09-01'); // 1 -> 20
+    await selectDate('2021-09-15'); // 1 -> 15
+    await selectDate('2021-09-05'); // 5 -> 15
+    await selectDate('2021-09-15'); // 5 -> null
+    await selectDate('2021-09-05'); // null -> null
+    await selectDate('2021-09-10'); // 10 -> null
+    await selectDate('2021-09-05'); // 5 -> 10
+    await selectDate('2021-09-10'); // 5 -> null
+    await selectDate('2021-09-20'); // 5 -> 20
+    await selectDate('2021-09-05'); // null -> 20
+    await selectDate('2021-09-25'); // 20 -> 25
+    await selectDate('2021-09-20'); // null -> 25
+    await selectDate('2021-09-10'); // 10 -> 25
+
     const viewButtonBottom = instance.findByType(ViewButtonBottom);
     await act(async () => {
       await viewButtonBottom.props.onRightClick();
     });
     expect(mockSetStartDate).toBeCalledWith(moment('2021-09-10').valueOf());
-    expect(mockSetEndDate).toBeCalledWith(moment('2021-09-20').valueOf());
+    expect(mockSetEndDate).toBeCalledWith(moment('2021-09-25').valueOf());
   });
 });

package/src/commons/ThreeButtonHistory/index.js

@@ -20,7 +20,7 @@ const ThreeButtonHistory = memo(
     const t = useTranslations();
     const calendarRef = useRef();
     const [selectedIndex, setSelectedIndex] = useState(2);
-    const [isShowDate, setIsShowDate] = useState(false);
+    const [showCalendar, setShowCalendar] = useState(false);
     const [selectedStart, setSelectedStart] = useState(
       moment(startDate).format('YYYY-MM-DD')
     );
@@ -57,15 +57,15 @@ const ThreeButtonHistory = memo(
       [selectedIndex]
     );
 
-    const onPressCancel = useCallback(() => {
+    const onCalendarCancel = useCallback(() => {
       if (showSelectMonth) {
         setShowSelectMonth(false);
         return;
       }
-      setIsShowDate(false);
+      setShowCalendar(false);
     }, [showSelectMonth, setShowSelectMonth]);
 
-    const onPressDone = useCallback(() => {
+    const onCalendarDone = useCallback(() => {
       if (showSelectMonth) {
         setShowSelectMonth(false);
         return;
@@ -73,7 +73,7 @@ const ThreeButtonHistory = memo(
       if (selectedStart === null || selectedEnd === null) {
         return;
       }
-      setIsShowDate(false);
+      setShowCalendar(false);
       setStartDate(moment(selectedStart).valueOf());
       setEndDate(moment(selectedEnd).valueOf());
     }, [
@@ -85,9 +85,12 @@ const ThreeButtonHistory = memo(
       setShowSelectMonth,
     ]);
 
-    const onDayPress = useCallback(
+    const onDateSelected = useCallback(
       (date) => {
         const selectedDate = date.dateString;
+        const mmSelectedDate = moment(selectedDate);
+        onMonthSelected(mmSelectedDate);
+
         if (selectedDate === selectedStart) {
           setSelectedStart(null);
           return;
@@ -96,25 +99,54 @@ const ThreeButtonHistory = memo(
           setSelectedEnd(null);
           return;
         }
-        if (selectedStart !== null && selectedEnd !== null) {
+
+        if (!!selectedStart && !!selectedEnd) {
+          if (mmSelectedDate.isAfter(selectedEnd, 'date')) {
+            setSelectedEnd(selectedDate);
+            return;
+          }
+          if (mmSelectedDate.isBefore(selectedStart, 'date')) {
+            setSelectedStart(selectedDate);
+            return;
+          }
+          if (
+            Math.abs(mmSelectedDate.diff(selectedStart, 'days')) <=
+            Math.abs(mmSelectedDate.diff(selectedEnd, 'days'))
+          ) {
+            setSelectedStart(selectedDate);
+          } else {
+            setSelectedEnd(selectedDate);
+          }
+          return;
+        }
+
+        if (selectedStart) {
+          if (mmSelectedDate.isBefore(selectedStart, 'date')) {
+            setSelectedStart(selectedDate);
+            setSelectedEnd(selectedStart);
+          } else {
+            setSelectedEnd(selectedDate);
+          }
           return;
         }
-        if (selectedEnd === null) {
-          setSelectedEnd(selectedDate);
-        } else {
-          if (moment(selectedDate).isAfter(selectedEnd, 'date')) {
+
+        if (selectedEnd) {
+          if (mmSelectedDate.isAfter(selectedEnd, 'date')) {
             setSelectedStart(selectedEnd);
             setSelectedEnd(selectedDate);
           } else {
             setSelectedStart(selectedDate);
           }
+          return;
         }
+
+        setSelectedStart(selectedDate);
       },
-      [selectedStart, selectedEnd]
+      [selectedStart, selectedEnd, onMonthSelected]
     );
 
     const onPressItemButton = useCallback(
-      (index) => {
+      (index) => () => {
         switch (index) {
           case 0:
             setGroupBy('week');
@@ -124,9 +156,7 @@ const ThreeButtonHistory = memo(
             break;
           case 2:
             setGroupBy('date');
-            if (selectedIndex === 2) {
-              setIsShowDate(true);
-            }
+            selectedIndex === 2 && setShowCalendar(true);
         }
         setSelectedIndex(index);
       },
@@ -212,7 +242,6 @@ const ThreeButtonHistory = memo(
             },
           },
           selected: true,
-          disableTouchEvent: true,
           color: Colors.Gray4,
         };
       }
@@ -228,15 +257,15 @@ const ThreeButtonHistory = memo(
                 <ItemButton
                   key={index}
                   dateTitle={item.dateTitle}
-                  onPress={() => onPressItemButton(index)}
+                  onPress={onPressItemButton(index)}
                   isSelected={selectedIndex === index}
                 />
               );
             })}
         </View>
         <BottomSheet
-          isVisible={isShowDate}
-          onBackdropPress={onPressCancel}
+          isVisible={showCalendar}
+          onBackdropPress={onCalendarCancel}
           style={styles.modal}
         >
           <View style={styles.calendar}>
@@ -257,7 +286,7 @@ const ThreeButtonHistory = memo(
               current={currentMonth.format('YYYY-MM-DD')}
               style={showSelectMonth && styles.displayNone}
               markingType={'custom'}
-              onDayPress={onDayPress}
+              onDayPress={onDateSelected}
               maxDate={moment().format('YYYY-MM-DD')}
               markedDates={markedDates}
               hideArrows={true}
@@ -267,9 +296,9 @@ const ThreeButtonHistory = memo(
             <View style={styles.separator} />
             <ViewButtonBottom
               leftTitle={t('cancel')}
-              onLeftClick={onPressCancel}
+              onLeftClick={onCalendarCancel}
               rightTitle={t('done')}
-              onRightClick={onPressDone}
+              onRightClick={onCalendarDone}
             />
           </View>
         </BottomSheet>

package/src/commons/UnitSummary/AirQuality/SegmentedRoundDisplay/index.js

@@ -163,7 +163,7 @@ const SegmentedRoundDisplay = ({
         <Text
           x={svgWidth / 2 + 50}
           fontWeight="normal"
-          fontSize={valueText.toString().length >= 6 ? 46 : 56}
+          fontSize={valueText.toString().length >= 6 ? 35 : 56}
           y={svgHeight / 2 + 30}
           fill={filledArcColor}
           textAnchor="middle"

package/src/configs/API.js

@@ -172,6 +172,11 @@ const API = {
         SCConfig.apiRoot +
         `/connection_manager/lg_thinq/device_status/${sensorId}/`,
     },
+    VCONNEX: {
+      AUTHORIZE: (client_id, redirect_uri, user_id, station_id) =>
+        // eslint-disable-next-line max-len
+        `https://partner-api-stg.vconnex.vn/oauth/authorize?client_id=${client_id}&redirect_uri=${redirect_uri}&response_type=code&scope=SYNCH&scope=CONTROL&scope=QUERY&state=${user_id}@${station_id}`,
+    },
   },
   NOTIFICATION: {
     LIST_ALL_NOTIFICATIONS: (page, type) =>

package/src/configs/Constants.js

@@ -1,6 +1,6 @@
 import { Platform, Dimensions, StatusBar } from 'react-native';
 import { RFValue } from 'react-native-responsive-fontsize';
-import OneTap from '../../assets/images/OneTap@1x.svg';
+import OneTap from '../../assets/images/OneTap.svg';
 import ValueChange from '../../assets/images/ValueChange.svg';
 import Schedule from '../../assets/images/Schedule.svg';
 
@@ -116,13 +116,13 @@ export const AUTOMATES = {
   value_change: {
     value: AUTOMATE_TYPE.VALUE_CHANGE,
     title: 'value_change',
-    explanation: 'short_explanation',
+    explanation: 'setup_the_conditions',
     icon: ValueChange,
   },
   schedule: {
     value: AUTOMATE_TYPE.SCHEDULE,
     title: 'schedule',
-    explanation: 'short_explanation',
+    explanation: 'setup_the_schedule',
     icon: Schedule,
   },
 };

package/src/configs/SCConfig.js

@@ -90,6 +90,8 @@ const SCDefaultConfig = {
   LG_CLIENT_ID: '2b85aee334f046848341547894bb7c4e',
   LG_REDIRECT_URI_APP: 'app://eoh/sync-lg-device',
   LG_URL: 'https://qt-vn.m.lgaccount.com/emp/v2',
+  VCONNEX_CLIENT_ID: '',
+  VCONNEX_REDIRECT_URI_APP: '',
   pusherAppKey: '9a591ae4a764acc08714',
   pusherAppCluster: 'ap1',
 };
@@ -100,6 +102,8 @@ export class SCConfig {
   static LG_CLIENT_ID = SCDefaultConfig.LG_CLIENT_ID;
   static LG_REDIRECT_URI_APP = SCDefaultConfig.LG_REDIRECT_URI_APP;
   static LG_URL = SCDefaultConfig.LG_URL;
+  static VCONNEX_CLIENT_ID = SCDefaultConfig.VCONNEX_CLIENT_ID;
+  static VCONNEX_REDIRECT_URI_APP = SCDefaultConfig.VCONNEX_REDIRECT_URI_APP;
   static pusherAppKey = SCDefaultConfig.pusherAppKey;
   static pusherAppCluste = SCDefaultConfig.pusherAppCluster;
 }
@@ -113,6 +117,10 @@ export const initSCConfig = (config) => {
   SCConfig.LG_REDIRECT_URI_APP =
     config.LG_REDIRECT_URI_APP ?? SCDefaultConfig.LG_REDIRECT_URI_APP;
   SCConfig.LG_URL = config.LG_URL ?? SCDefaultConfig.LG_URL;
+  SCConfig.VCONNEX_CLIENT_ID =
+    config.VCONNEX_CLIENT_ID ?? SCDefaultConfig.VCONNEX_CLIENT_ID;
+  SCConfig.VCONNEX_REDIRECT_URI_APP =
+    config.VCONNEX_REDIRECT_URI_APP ?? SCDefaultConfig.VCONNEX_REDIRECT_URI_APP;
   SCConfig.pusherAppKey = config.pusherAppKey ?? SCDefaultConfig.pusherAppKey;
   SCConfig.pusherAppCluster =
     config.pusherAppCluster ?? SCDefaultConfig.pusherAppCluster;

package/src/iot/RemoteControl/Bluetooth.js

@@ -5,6 +5,7 @@ import t from '../../hooks/Common/useTranslations';
 import base64 from 'react-native-base64';
 import { BleManager } from 'react-native-ble-plx';
 import { ToastBottomHelper } from '../../utils/Utils';
+import { useEffect, useState } from 'react';
 
 const bluetoothDevices = {};
 const needToScanDevices = [];
@@ -165,6 +166,19 @@ export const isBluetoothEnabled = async () => {
   return state === 'PoweredOn';
 };
 
+export const useIsBluetoothEnabled = () => {
+  const [isEnabled, setIsEnabled] = useState(null);
+
+  useEffect(() => {
+    const subscription = bleManager.onStateChange((state) => {
+      setIsEnabled(state === 'PoweredOn');
+    }, true);
+
+    return () => subscription.remove();
+  }, []);
+  return isEnabled;
+};
+
 export const enableBluetoothForAndroid = async () => {
   await bleManager.enable();
 };

package/src/iot/RemoteControl/index.js

@@ -16,7 +16,6 @@ export const sendRemoteCommand = async (sensor, action, data) => {
     );
     return;
   }
-
   if (action.command_prefer_over_bluetooth) {
     try {
       await sendCommandOverBluetooth(sensor, action, data);

package/src/screens/ActivityLog/ItemLog.js

@@ -39,6 +39,15 @@ const DetailLog = ({ item }) => {
           <Text style={styles.name}>{item.name || item.params?.username}</Text>
         </Text>
       );
+    default:
+      return (
+        <Text style={styles.text}>
+          {item.action_name
+            ? `${item.action_name} ${t('by')} `
+            : `${t('activated_by')} `}
+          <Text style={styles.name}>{item.name || item.params?.username}</Text>
+        </Text>
+      );
   }
 };
 

package/src/screens/ActivityLog/__test__/ItemLog.test.js

@@ -60,6 +60,49 @@ test('test ItemLog one tap', () => {
   expect(texts[2].props.children).toBe(props.item.params.username);
 });
 
+test('test ItemLog script update', () => {
+  let tree;
+  let props = {
+    item: {
+      content_code: 'SCRIPT_UPDATED_BY',
+      params: {
+        username: 'username',
+      },
+      created_at: '2021-07-02T15:48:24.917932Z',
+    },
+    type: 'automate',
+    length: 2,
+    index: 1,
+  };
+  act(() => {
+    tree = create(wrapComponent(props));
+  });
+  const instance = tree.root;
+  const texts = instance.findAllByType(Text);
+  expect(texts[2].props.children).toBe(props.item.params.username);
+});
+
+test('test ItemLog no content_code', () => {
+  let tree;
+  let props = {
+    item: {
+      params: {
+        username: 'username',
+      },
+      created_at: '2021-07-02T15:48:24.917932Z',
+    },
+    type: 'action',
+    length: 2,
+    index: 1,
+  };
+  act(() => {
+    tree = create(wrapComponent(props));
+  });
+  const instance = tree.root;
+  const texts = instance.findAllByType(Text);
+  expect(texts[2].props.children).toBe(props.item.params.username);
+});
+
 describe('test ItemLog emergency event', () => {
   let tree;
   let props;

package/src/screens/AddCommon/SelectSubUnit.js

@@ -11,6 +11,7 @@ import Routes from '../../utils/Route';
 import { TESTID } from '../../configs/Constants';
 import styles from './SelectSubUnitStyles';
 import Button from '../../commons/Button';
+import { SCConfig } from '../../configs/SCConfig';
 
 const AddCommonSelectSubUnit = ({ route }) => {
   const t = useTranslations();
@@ -31,6 +32,9 @@ const AddCommonSelectSubUnit = ({ route }) => {
       case 'AddHassiDevice':
         setTitle(t('select_a_sub_unit'));
         break;
+      case 'AddVconnexDevice':
+        setTitle(t('select_a_sub_unit'));
+        break;
       default:
         setTitle(t('add_new_gateway'));
         setSubTitle(t('select_a_sub_unit'));
@@ -70,10 +74,28 @@ const AddCommonSelectSubUnit = ({ route }) => {
           station: subUnits[selectedIndex]?.id,
         });
         break;
+      case 'AddVconnexDevice':
+        navigation.navigate(Routes.Browser, {
+          link: API.IOT.VCONNEX.AUTHORIZE(
+            SCConfig.VCONNEX_CLIENT_ID,
+            SCConfig.VCONNEX_REDIRECT_URI_APP,
+            unit.user_id,
+            subUnits[selectedIndex]?.id
+          ),
+        });
+        break;
       default:
         break;
     }
-  }, [addType, navigation, subUnits, selectedIndex, unit.name, route.params]);
+  }, [
+    addType,
+    navigation,
+    subUnits,
+    selectedIndex,
+    unit?.name,
+    unit.user_id,
+    route.params,
+  ]);
 
   const handleSelectIndex = (index) => {
     if (index !== selectedIndex) {
@@ -86,7 +108,7 @@ const AddCommonSelectSubUnit = ({ route }) => {
   const addSubUnit = useCallback(() => {
     navigation.navigate(Routes.AddSubUnitStack, {
       screen: Routes.AddSubUnit,
-      params: { unit, ...route.params },
+      params: { unit, ...route.params, addType: 'AddHassiDevice' },
     });
   }, [navigation, unit, route.params]);
 

package/src/screens/AddCommon/SelectUnit.js

@@ -48,6 +48,9 @@ const AddCommonSelectUnit = ({ route }) => {
       case 'AddHassioDevice':
         setTitle(t('text_select_a_unit'));
         break;
+      case 'AddVconnexDevice':
+        setTitle(t('text_select_a_unit'));
+        break;
       default:
         setTitle(t('add_new_sub_unit'));
         setSubTitle(t('add_new_subunit_select_unit'));
@@ -102,6 +105,15 @@ const AddCommonSelectUnit = ({ route }) => {
           unit_id: units[selectedIndex].id,
         });
         break;
+      case 'AddVconnexDevice':
+        navigation.navigate(Routes.AddDeviceStack, {
+          screen: Routes.AddCommonSelectSubUnit,
+          params: {
+            unit_id: units[selectedIndex].id,
+            addType: 'AddVconnexDevice',
+          },
+        });
+        break;
       default:
         break;
     }

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

@@ -239,11 +239,6 @@ describe('test DeviceDetail', () => {
     );
     expect(sensorDisplayItem.length).toEqual(2);
 
-    const itemMediaPlayer = instance.find(
-      (el) => el.props.testID === TESTID.DEVICE_DETAIL_MEDIA_PLAYER
-    );
-    expect(itemMediaPlayer).toBeDefined();
-
     const itemActionGroup = instance.find(
       (el) => el.props.testID === TESTID.DEVICE_DETAIL_ACTION_GROUP
     );

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

@@ -2,11 +2,8 @@ import React, { useCallback } from 'react';
 import { View } from 'react-native';
 import ActionGroup from '../../../commons/ActionGroup';
 import { Card } from '../../../commons/CardShadow';
-import MediaPlayer from '../../../commons/MediaPlayer';
-import { Device } from '../../../configs';
 import { TESTID } from '../../../configs/Constants';
 import { useTranslations } from '../../../hooks/Common/useTranslations';
-import { standardizeCameraScreenSize } from '../../../utils/Utils';
 import { DetailHistoryChart } from './DetailHistoryChart';
 import { sendRemoteCommand } from '../../../iot/RemoteControl';
 import CurrentRainSensor from '../../../commons/Device/RainningSensor/CurrentRainSensor';
@@ -20,8 +17,11 @@ import ListQualityIndicator from '../../../commons/Device/WaterQualitySensor/Lis
 import EmergencyDetail from '../../../commons/Device/Emergency/EmergencyDetail';
 import EmergencyButton from '../../../commons/Device/Emergency/EmergencyButton';
 import FooterInfo from '../../../commons/Device/FooterInfo';
+import MediaPlayerDetail from '../../../commons/MediaPlayerDetail';
+import { standardizeCameraScreenSize } from '../../../utils/Utils';
+import { Device } from '../../../configs';
 
-const { standardizeHeight, standardizeWidth } = standardizeCameraScreenSize(
+const { standardizeWidth, standardizeHeight } = standardizeCameraScreenSize(
   Device.screenWidth - 32
 );
 
@@ -51,15 +51,15 @@ export const SensorDisplayItem = ({
       return (
         <Card title={t('camera')}>
           <View style={styles.mediaContainer}>
-            <MediaPlayer
-              testID={TESTID.DEVICE_DETAIL_MEDIA_PLAYER}
+            <MediaPlayerDetail
               uri={item.configuration.uri}
-              style={{ height: standardizeHeight }}
-              ratioWidth={standardizeWidth - 32}
               thumbnail={{
-                uri: item.configuration.preview_uri,
+                uri: background,
               }}
-              background={{ uri: background }}
+              key={`camera-device-${item.configuration.id}`}
+              cameraName={item.configuration.name}
+              width={standardizeWidth - 32}
+              height={standardizeHeight - 16}
             />
           </View>
         </Card>

package/src/screens/Device/detail.js

@@ -79,7 +79,21 @@ const DeviceDetail = ({ route }) => {
     [sensor]
   );
 
-  useDisconnectedDevice(isConnected, sensorName);
+  const isDeviceHasBle = useMemo(() => {
+    const action = display.items.filter((item) => item.type === 'action');
+    if (action.length === 0) {
+      return false;
+    }
+
+    return action.some((item) => {
+      const { configuration } = item?.configuration;
+      return JSON.stringify(configuration).includes(
+        '"command_prefer_over_bluetooth":true'
+      );
+    });
+  }, [display]);
+
+  useDisconnectedDevice(sensorName, isDeviceHasBle);
 
   const netInfo = useNetInfo();
 

package/src/screens/Device/hooks/useDisconnectedDevice.js

@@ -4,10 +4,11 @@ import { Alert, Linking, Platform } from 'react-native';
 import { useTranslations } from '../../../hooks/Common/useTranslations';
 import {
   enableBluetoothForAndroid,
-  isBluetoothEnabled,
+  useIsBluetoothEnabled,
 } from '../../../iot/RemoteControl/Bluetooth';
+import { ToastBottomHelper } from '../../../utils/Utils';
 
-export const useDisconnectedDevice = (isConnected, sensorName) => {
+export const useDisconnectedDevice = (sensorName, isDeviceHasBle) => {
   const t = useTranslations();
   const openBluetoothIOS = () => {
     Linking.openURL('App-Prefs:Bluetooth');
@@ -32,32 +33,36 @@ export const useDisconnectedDevice = (isConnected, sensorName) => {
             onPress: () => enableBluetoothForAndroid(),
           },
         ];
-  const checkNetWorkConnect = useCallback(async () => {
-    const netState = await NetInfo.fetch();
-    if (!isConnected || !netState.isConnected) {
-      const isBtEnabled = await isBluetoothEnabled();
-      if (isBtEnabled) {
-        Alert.alert(
-          '',
-          t(
-            'your_internet_is_disconnected_change_to_control_via_bluetooth_connection',
-            { name: sensorName }
-          )
-        );
-      } else {
-        Alert.alert(
-          '',
-          t(
-            'your_connection_to_the_server_was_disconnected_please_open_the_bluetooth_to_continue'
-          ),
-          actions
-        );
+
+  const netState = NetInfo.useNetInfo();
+  const isBluetoothEnabled = useIsBluetoothEnabled();
+
+  const checkNetWorkConnect = useCallback(
+    async (isHavingInternet, isBtEnabled) => {
+      if (!isHavingInternet && isDeviceHasBle) {
+        if (isBtEnabled === true) {
+          ToastBottomHelper.info(
+            t('your_internet_is_disconnected', { name: sensorName }),
+            t('change_to_control_via_bluetooth_connection', {
+              name: sensorName,
+            })
+          );
+        } else if (isBtEnabled === false) {
+          Alert.alert(
+            '',
+            t(
+              'your_connection_to_the_server_was_disconnected_please_open_the_bluetooth_to_continue'
+            ),
+            actions
+          );
+        }
       }
-    }
+    },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isConnected]);
+    [isDeviceHasBle]
+  );
 
   useEffect(() => {
-    checkNetWorkConnect();
-  }, [checkNetWorkConnect]);
+    checkNetWorkConnect(netState.isConnected, isBluetoothEnabled);
+  }, [netState.isConnected, isBluetoothEnabled, checkNetWorkConnect]);
 };

package/src/screens/Sharing/MemberList.js

@@ -1,12 +1,7 @@
 import React, { useCallback } from 'react';
 import { IconOutline } from '@ant-design/icons-react-native';
 import { useNavigation } from '@react-navigation/native';
-import {
-  StyleSheet,
-  TouchableOpacity,
-  View,
-  ActivityIndicator,
-} from 'react-native';
+import { StyleSheet, TouchableOpacity, View } from 'react-native';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 
 import { Colors } from '../../configs';
@@ -91,9 +86,7 @@ const MemberList = ({ route }) => {
         loading={isRefresh}
         onRefresh={onRefresh}
       >
-        {loading ? (
-          <ActivityIndicator />
-        ) : (
+        {!loading && (
           <SharingMembers
             dataMember={dataMembers}
             ownerId={unit.user_id}