@eohjsc/react-native-smart-city 0.3.44 → 0.3.46

package/src/commons/AlertAction/index.js

@@ -22,7 +22,7 @@ const AlertAction = ({
   accessibilityLabelPrefix = '',
   boxLeftButtonStyle,
   boxRightButtonStyle,
-  transY,
+  transY = 0,
 }) => {
   const [keyboardAnim] = useState(new Animated.Value(0));
 

package/src/commons/Auth/AccountItem.js

@@ -4,6 +4,7 @@ import { View, StyleSheet, Text } from 'react-native';
 import { Colors } from '../../configs';
 import { shortEmailName } from '../../utils/Utils';
 import Avatar from '../../../assets/images/avatar.svg';
+import AccessibilityLabel from '../../configs/AccessibilityLabel';
 
 const AccountItem = ({ account }) => {
   return (
@@ -20,7 +21,12 @@ const AccountItem = ({ account }) => {
         )}
 
         {account?.phone_number && (
-          <Text style={{ color: Colors.Gray8 }}>{account?.phone_number}</Text>
+          <Text
+            style={{ color: Colors.Gray8 }}
+            accessibilityLabel={AccessibilityLabel.TEXT_PHONE_NUMBER_ITEM}
+          >
+            {account?.phone_number}
+          </Text>
         )}
       </View>
     </View>

package/src/commons/Dashboard/MyUnit/__test__/MyUnit.test.js

@@ -78,7 +78,7 @@ describe('Test MyUnit', () => {
     const goToDetail = instance.findAll(
       (item) =>
         item.props.accessibilityLabel ===
-        AccessibilityLabel.MY_UNIT_GO_TO_DETAIL
+        `${AccessibilityLabel.MY_UNIT_GO_TO_DETAIL}-${item?.id}`
     );
     const textNoUnit = instance.findAll(
       (item) =>

package/src/commons/Dashboard/MyUnit/index.js

@@ -107,7 +107,7 @@ const MyUnit = () => {
             onPress={() => goToDetail(item)}
             style={styles.btnItem}
             activeOpacity={0.75}
-            accessibilityLabel={AccessibilityLabel.MY_UNIT_GO_TO_DETAIL}
+            accessibilityLabel={`${AccessibilityLabel.MY_UNIT_GO_TO_DETAIL}-${index}`}
           >
             <View style={styles.overlay} />
             <Image

package/src/commons/Sharing/RowMember.js

@@ -1,11 +1,12 @@
 import React, { memo, useMemo } from 'react';
 import { StyleSheet, View, TouchableOpacity, Image } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 import { Colors } from '../../configs';
 import Text from '../../commons/Text';
 import { shortEmailName } from '../../utils/Utils';
 import { CircleView } from '../CircleView';
-import { useNavigation } from '@react-navigation/native';
+import AccessibilityLabel from '../../configs/AccessibilityLabel';
 import Routes from '../../utils/Route';
 
 const arrColor = [
@@ -65,7 +66,11 @@ const RowMember = memo(
     };
     return (
       <View style={styles.rowContainer}>
-        <TouchableOpacity onPress={onPressInfo} disabled={type === 'disable'}>
+        <TouchableOpacity
+          onPress={onPressInfo}
+          disabled={type === 'disable'}
+          accessibilityLabel={`${AccessibilityLabel.SELECT_MEMBER_UNIT}-${member?.id}`}
+        >
           <View style={styles.Border}>
             {!!leftIcon && (
               <View style={styles.paddingLeft16}>
@@ -86,7 +91,14 @@ const RowMember = memo(
                 {member?.name || shortEmailName(member?.email) || ''}
               </Text>
               {member?.phone_number && (
-                <Text style={styles.status}> {member?.phone_number}</Text>
+                <Text
+                  style={styles.status}
+                  accessibilityLabel={
+                    AccessibilityLabel.TEXT_PHONE_NUMBER_UNIT_MEMBER
+                  }
+                >
+                  {member?.phone_number}
+                </Text>
               )}
             </View>
             {!!rightComponent && (

package/src/commons/Sharing/WrapHeaderScrollable.js

@@ -4,11 +4,10 @@ import {
   StyleSheet,
   Animated,
   View,
-  SafeAreaView,
   Platform,
 } from 'react-native';
 import { ActivityIndicator } from '@ant-design/react-native';
-import { isIphoneX } from 'react-native-iphone-x-helper';
+import { getStatusBarHeight, isIphoneX } from 'react-native-iphone-x-helper';
 
 import { Colors, Theme } from '../../configs';
 import HeaderAni, { heightHeader } from '../../commons/HeaderAni';
@@ -50,7 +49,7 @@ const WrapHeaderScrollable = ({
   );
 
   return (
-    <SafeAreaView style={[styles.container, headerAniStyle]}>
+    <View style={[styles.container, headerAniStyle]}>
       <HeaderAni
         scrollY={animatedScrollYValue}
         contentHeight={contentHeight}
@@ -104,7 +103,7 @@ const WrapHeaderScrollable = ({
           </View>
         )}
       </Animated.ScrollView>
-    </SafeAreaView>
+    </View>
   );
 };
 
@@ -113,6 +112,7 @@ export default memo(WrapHeaderScrollable);
 const styles = StyleSheet.create({
   container: {
     flex: 1,
+    paddingTop: getStatusBarHeight() + 10,
   },
   scrollView: {
     flex: 1,

package/src/configs/AccessibilityLabel.js

@@ -49,6 +49,9 @@ export default {
   //member list
   SHARING_MEMBER: 'SHARING_MEMBER',
   REMOVE_MEMBER: 'REMOVE_MEMBER',
+  CHECK_BOX_CUSTOM: 'CHECK_BOX_CUSTOM',
+  TEXT_PHONE_NUMBER_ITEM: 'TEXT_PHONE_NUMBER_ITEM',
+  TEXT_PHONE_NUMBER_UNIT_MEMBER: 'TEXT_PHONE_NUMBER_UNIT_MEMBER',
 
   // SmartTiviTemplate
   SMART_TIVI_TEMPLATE: {
@@ -417,6 +420,7 @@ export default {
   SELECT_UNIT_NAME: 'SELECT_UNIT_NAME',
   SELECT_UNIT_RADIO_BUTTON: 'SELECT_UNIT_RADIO_BUTTON',
   SELECT_UNIT_SELECT: 'SELECT_UNIT_SELECT',
+  SELECT_MEMBER_UNIT: 'SELECT_MEMBER_UNIT',
 
   // select wifi
   SELECT_WIFI: 'SELECT_WIFI',
@@ -434,6 +438,8 @@ export default {
     BUTTON_ADD_AUTO_SMART: 'BUTTON_ADD_AUTO_SMART',
     BUTTON_CONNECT_WIFI: 'BUTTON_CONNECT_WIFI',
     BUTTON_BOTTOM_SMART_ACCOUNT: 'BUTTON_BOTTOM_SMART_ACCOUNT',
+    BUTTON_ADD_MEMBER: 'BUTTON_ADD_MEMBER',
+    BUTTON_REMOVE_MEMBER: 'BUTTON_REMOVE_MEMBER',
   },
 
   TERM_AND_POLICY_TITLE: 'TERM_AND_POLICY_TITLE',
@@ -456,6 +462,8 @@ export default {
   // Select User
   SELECT_USER_ADD_USER_TITLE: 'SELECT_USER_ADD_USER_TITLE',
   SELECT_USER_ADD_USER_SUB_TITLE: 'SELECT_USER_ADD_USER_SUB_TITLE',
+  INPUT_PHONE_NUMBER_OR_EMAIL: 'INPUT_PHONE_NUMBER_OR_EMAIL',
+  INVITE_PHONE_NUMBER: 'INVITE_PHONE_NUMBER',
   // Connected device
   CONNECTED_DEVICE_SUCCESS: 'CONNECTED_DEVICE_SUCCESS',
   CONNECTED_DEVICE_UNIT_NAME: 'CONNECTED_DEVICE_UNIT_NAME',

package/src/configs/Constants.js

@@ -269,6 +269,7 @@ export const PROBLEM_CODE = {
   NETWORK_ERROR: 'NETWORK_ERROR',
   UNKNOWN_ERROR: 'UNKNOWN_ERROR',
   CANCEL_ERROR: 'CANCEL_ERROR',
+  ADDRESS_CHANGING: 'Please wait 30s for changing address.',
 };
 
 export const DATE_TIME_FORMAT = {

package/src/iot/RemoteControl/Bluetooth.js

@@ -4,11 +4,23 @@ 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 { PermissionsAndroid } from 'react-native';
 
 const bluetoothDevices = {};
 const needToScanDevices = [];
 const bleManager = new BleManager();
 
+export const requestBluetoothPermissions = async () => {
+  const results = await PermissionsAndroid.requestMultiple([
+    'android.permission.BLUETOOTH_CONNECT',
+    'android.permission.BLUETOOTH_SCAN',
+    'android.permission.BLUETOOTH_ADVERTISE',
+  ]);
+  return Object.values(results).every(
+    (result) => result === PermissionsAndroid.RESULTS.GRANTED
+  );
+};
+
 export const SEND_COMMAND_OVER_BLUETOOTH_FAIL =
   'SEND_COMMAND_OVER_BLUETOOTH_FAIL';
 
@@ -22,17 +34,21 @@ export const clearFoundDevices = () => {
   }
 };
 
-export const scanBluetoothDevices = (names, onDeviceFound) => {
+export const scanBluetoothDevices = async (names, onDeviceFound) => {
   names.map((name) => {
     if (bluetoothDevices[name]) {
       return;
     }
     needToScanDevices.push(name);
   });
-  realScanBluetoothDevices(onDeviceFound);
+  await realScanBluetoothDevices(onDeviceFound);
 };
 
-export const realScanBluetoothDevices = (onDeviceFound) => {
+export const realScanBluetoothDevices = async (onDeviceFound) => {
+  const permissionsGranted = await requestBluetoothPermissions();
+  if (!permissionsGranted) {
+    return;
+  }
   if (!needToScanDevices.length) {
     return;
   }

package/src/iot/RemoteControl/__test__/Bluetooth.test.js

@@ -12,6 +12,20 @@ const bleManager = new BleManager();
 
 const mockOnDeviceFound = jest.fn();
 
+const mockRequestMultiplePerms = jest.fn();
+
+jest.mock(
+  'react-native/Libraries/PermissionsAndroid/PermissionsAndroid',
+  () => {
+    return {
+      ...jest.requireActual(
+        'react-native/Libraries/PermissionsAndroid/PermissionsAndroid'
+      ),
+      requestMultiple: mockRequestMultiplePerms,
+    };
+  }
+);
+
 describe('Test IOT Bluetooth', () => {
   beforeEach(() => {
     mockOnDeviceFound.mockClear();
@@ -19,6 +33,9 @@ describe('Test IOT Bluetooth', () => {
     bleManager.stopDeviceScan.mockClear();
     clearNeedToScanDevices();
     clearFoundDevices();
+    mockRequestMultiplePerms.mockImplementation(async (perms) =>
+      perms.map(() => 'granted')
+    );
   });
 
   afterEach(() => {
@@ -27,13 +44,21 @@ describe('Test IOT Bluetooth', () => {
   });
 
   test('Scan bluetooth device will init hardware scan', async () => {
-    scanBluetoothDevices(['123456'], mockOnDeviceFound);
+    await scanBluetoothDevices(['123456'], mockOnDeviceFound);
     expect(bleManager.startDeviceScan).toBeCalled();
   });
 
+  test('Scan bluetooth device not scan without permissions', async () => {
+    mockRequestMultiplePerms.mockImplementation(async (perms) =>
+      perms.map(() => 'denied')
+    );
+    await scanBluetoothDevices(['123456'], mockOnDeviceFound);
+    expect(bleManager.startDeviceScan).not.toBeCalled();
+  });
+
   test('When look for bluetooth name, hardware will auto stop after period of time', async () => {
     jest.useFakeTimers();
-    scanBluetoothDevices(['123456'], mockOnDeviceFound);
+    await scanBluetoothDevices(['123456'], mockOnDeviceFound);
     jest.runAllTimers();
     expect(bleManager.stopDeviceScan).toBeCalled();
   });
@@ -48,7 +73,7 @@ describe('Test IOT Bluetooth', () => {
       }
     );
 
-    scanBluetoothDevices([device.localName], mockOnDeviceFound);
+    await scanBluetoothDevices([device.localName], mockOnDeviceFound);
     expect(mockOnDeviceFound).toBeCalledWith(device.localName, device);
   });
 
@@ -63,7 +88,7 @@ describe('Test IOT Bluetooth', () => {
       }
     );
 
-    scanBluetoothDevices([device.name], mockOnDeviceFound);
+    await scanBluetoothDevices([device.name], mockOnDeviceFound);
     expect(mockOnDeviceFound).not.toBeCalled();
   });
 
@@ -78,7 +103,7 @@ describe('Test IOT Bluetooth', () => {
       }
     );
 
-    scanBluetoothDevices([device.name + 'x'], mockOnDeviceFound);
+    await scanBluetoothDevices([device.name + 'x'], mockOnDeviceFound);
     expect(mockOnDeviceFound).not.toBeCalled();
   });
 
@@ -91,7 +116,10 @@ describe('Test IOT Bluetooth', () => {
         listener(null, device);
       }
     );
-    scanBluetoothDevices([device.name, device.name + 'x'], mockOnDeviceFound);
+    await scanBluetoothDevices(
+      [device.name, device.name + 'x'],
+      mockOnDeviceFound
+    );
     expect(bleManager.stopDeviceScan).not.toBeCalled();
   });
 
@@ -104,7 +132,7 @@ describe('Test IOT Bluetooth', () => {
         listener(null, device);
       }
     );
-    scanBluetoothDevices([device.name], mockOnDeviceFound);
+    await scanBluetoothDevices([device.name], mockOnDeviceFound);
     expect(bleManager.stopDeviceScan).toBeCalled();
   });
 
@@ -117,12 +145,12 @@ describe('Test IOT Bluetooth', () => {
         listener(null, device);
       }
     );
-    scanBluetoothDevices([device.name], mockOnDeviceFound);
+    await scanBluetoothDevices([device.name], mockOnDeviceFound);
     expect(bleManager.startDeviceScan).toBeCalled();
 
     bleManager.startDeviceScan.mockClear();
 
-    scanBluetoothDevices([device.name], mockOnDeviceFound);
+    await scanBluetoothDevices([device.name], mockOnDeviceFound);
     expect(bleManager.startDeviceScan).not.toBeCalled();
   });
 
@@ -159,7 +187,7 @@ describe('Test IOT Bluetooth', () => {
         listener(null, device);
       }
     );
-    scanBluetoothDevices([device.name], mockOnDeviceFound);
+    await scanBluetoothDevices([device.name], mockOnDeviceFound);
 
     await sendCommandBluetoothFail({
       remote_control_options: {
@@ -186,7 +214,7 @@ describe('Test IOT Bluetooth', () => {
         listener(null, device);
       }
     );
-    scanBluetoothDevices([device.name], mockOnDeviceFound);
+    await scanBluetoothDevices([device.name], mockOnDeviceFound);
 
     await sendCommandOverBluetooth(
       {

package/src/navigations/UnitStack.js

@@ -71,7 +71,8 @@ export const UnitStack = memo((props) => {
   const t = useTranslations();
   const { setAction } = useContext(SCContext);
   const { route } = props;
-  const { unitId, unitData, isSuccessfullyConnected } = route?.params?.params;
+  const { unitId, unitData, isSuccessfullyConnected } =
+    route?.params?.params || {};
 
   useEffect(() => {
     const unsubscribe = NetInfo.addEventListener((state) => {

package/src/screens/AQIGuide/index.js

@@ -1,17 +1,11 @@
 import React, { memo, useMemo } from 'react';
-import {
-  View,
-  ScrollView,
-  StyleSheet,
-  TouchableOpacity,
-  SafeAreaView,
-} from 'react-native';
-import { useTranslations } from '../../hooks/Common/useTranslations';
+import { View, ScrollView, StyleSheet, TouchableOpacity } from 'react-native';
+import { getStatusBarHeight } from 'react-native-iphone-x-helper';
 
+import { useTranslations } from '../../hooks/Common/useTranslations';
 import { Colors, Theme } from '../../configs';
 import useTitleHeader from '../../hooks/Common/useTitleHeader';
 import { AccessibilityLabel } from '../../configs/Constants';
-
 import Text from '../../commons/Text';
 import SvgSmile from '../../../assets/images/Feeling/smile.svg';
 import SvgMeh from '../../../assets/images/Feeling/meh.svg';
@@ -82,7 +76,7 @@ const AQIGuide = memo(() => {
   const { titles, uvIndex } = data;
 
   return (
-    <SafeAreaView style={styles.container}>
+    <View style={styles.container}>
       <ScrollView style={styles.container} scrollIndicatorInsets={{ right: 1 }}>
         {titles.map((item, index) => {
           const { title, des } = item;
@@ -142,7 +136,7 @@ const AQIGuide = memo(() => {
           );
         })}
       </ScrollView>
-    </SafeAreaView>
+    </View>
   );
 });
 
@@ -152,6 +146,7 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
     backgroundColor: Theme.color.backgroundColor,
+    paddingTop: getStatusBarHeight() + 10,
   },
   titles: {
     marginHorizontal: 16,

package/src/screens/AddNewDevice/index.js

@@ -1,14 +1,9 @@
 import React, { memo, useCallback, useEffect, useState } from 'react';
-import {
-  ScrollView,
-  StyleSheet,
-  SafeAreaView,
-  StatusBar,
-  Platform,
-} from 'react-native';
+import { ScrollView, StyleSheet, View } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
-import { useTranslations } from '../../hooks/Common/useTranslations';
+import { getStatusBarHeight } from 'react-native-iphone-x-helper';
 
+import { useTranslations } from '../../hooks/Common/useTranslations';
 import { API, Colors } from '../../configs';
 import { Section, ViewButtonBottom } from '../../commons'; //components/Common
 import Text from '../../commons/Text';
@@ -62,13 +57,7 @@ const AddNewDevice = memo(({ route }) => {
   };
 
   return (
-    <SafeAreaView
-      style={
-        Platform.OS === 'android'
-          ? styles.containerAndroid
-          : styles.containerIOS
-      }
-    >
+    <View style={styles.wrap}>
       <Text
         accessibilityLabel={AccessibilityLabel.ADD_NEW_DEVICE_ADD}
         semibold
@@ -103,22 +92,17 @@ const AddNewDevice = memo(({ route }) => {
         rightDisabled={stationId === -1}
         onRightClick={onRight}
       />
-    </SafeAreaView>
+    </View>
   );
 });
 
 export default AddNewDevice;
 
 const styles = StyleSheet.create({
-  containerAndroid: {
-    flex: 1,
-    backgroundColor: Colors.Gray2,
-    paddingTop: StatusBar.currentHeight,
-  },
-  containerIOS: {
+  wrap: {
     flex: 1,
     backgroundColor: Colors.Gray2,
-    paddingTop: 0,
+    paddingTop: getStatusBarHeight() + 10,
   },
   txtHeader: {
     marginTop: 16,

package/src/screens/AddNewGateway/AddNewGatewayStyles.js

@@ -1,15 +1,12 @@
-import { StyleSheet, StatusBar, Platform } from 'react-native';
+import { StyleSheet } from 'react-native';
+import { getStatusBarHeight } from 'react-native-iphone-x-helper';
 import { Colors } from '../../configs';
 
 export default StyleSheet.create({
   wrap: {
     flex: 1,
     backgroundColor: Colors.Gray2,
-    ...Platform.select({
-      android: {
-        paddingTop: StatusBar.currentHeight,
-      },
-    }),
+    paddingTop: getStatusBarHeight() + 10,
   },
   textHeader: {
     marginTop: 16,

package/src/screens/AddNewGateway/ConnectingWifiDevice.js

@@ -1,18 +1,24 @@
-import { useNavigation } from '@react-navigation/native';
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { Alert } from 'react-native';
+import NetInfo from '@react-native-community/netinfo';
+import { useNavigation } from '@react-navigation/native';
+
 import API from '../../configs/API';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 import { axiosPost } from '../../utils/Apis/axios';
 import ConnectingDevice from './ConnectingDevice';
 
+let isCallingAPI = false;
+
 const ConnectingWifiDevice = ({ route }) => {
   const t = useTranslations();
   const { unitId, subUnit, gateway, selectedWifi, qrData, addDeviceType } =
     route?.params || {};
-  const [chipId, setChipId] = useState(null);
   const { goBack } = useNavigation();
 
+  const [chipId, setChipId] = useState(null);
+  const [channelName, setChannelName] = useState();
+
   const addingWifiDeviceFail = useCallback(
     (message) => {
       Alert.alert(t('fail_add_wifi_device'), message, [
@@ -26,27 +32,32 @@ const ConnectingWifiDevice = ({ route }) => {
   );
 
   const onReady = useCallback(
+    // eslint-disable-next-line no-shadow
     (channelName) => {
-      const timeout = setTimeout(async () => {
-        const { success, problem, data } = await axiosPost(
-          API.UNIT.CHIP_SCAN(unitId),
-          {
-            imei: gateway?.imei,
-            secret: qrData?.secret,
-            name: gateway?.model,
-            station: subUnit?.id,
-            wifi_ssid: selectedWifi.ssid, // for storing
-            wifi_pass: selectedWifi.password, // for storing
-            channel_name: channelName,
+      if (!isCallingAPI) {
+        isCallingAPI = true;
+        const timeout = setTimeout(async () => {
+          const { success, problem, data } = await axiosPost(
+            API.UNIT.CHIP_SCAN(unitId),
+            {
+              imei: gateway?.imei,
+              secret: qrData?.secret,
+              name: gateway?.model,
+              station: subUnit?.id,
+              wifi_ssid: selectedWifi.ssid, // for storing
+              wifi_pass: selectedWifi.password, // for storing
+              channel_name: channelName,
+            }
+          );
+          if (!success) {
+            addingWifiDeviceFail(JSON.stringify(problem || data));
+          } else {
+            setChipId(data.id);
           }
-        );
-        if (!success) {
-          addingWifiDeviceFail(JSON.stringify(problem || data));
-          return;
-        }
-        setChipId(data.id);
-        clearTimeout(timeout);
-      }, 2000);
+          clearTimeout(timeout);
+          isCallingAPI = false;
+        }, 2000);
+      }
     },
     [
       gateway,
@@ -58,12 +69,26 @@ const ConnectingWifiDevice = ({ route }) => {
     ]
   );
 
+  useEffect(() => {
+    const unsubscribe = NetInfo.addEventListener((state) => {
+      if (
+        state.isConnected &&
+        state.details?.ssid === selectedWifi.ssid &&
+        channelName
+      ) {
+        onReady(channelName);
+      }
+    });
+    return () => unsubscribe && unsubscribe();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedWifi.ssid, channelName]);
+
   return (
     <ConnectingDevice
       title={t('connect_device')}
       fail={addingWifiDeviceFail}
       initState={t('connecting_to_device')}
-      onReady={onReady}
+      onReady={setChannelName}
       unitId={unitId}
       subUnit={subUnit}
       chipId={chipId}

package/src/screens/AddNewGateway/ConnectingWifiGuide.js

@@ -1,12 +1,6 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import WifiManager from 'react-native-wifi-reborn';
-import {
-  ActivityIndicator,
-  Alert,
-  Platform,
-  SafeAreaView,
-  View,
-} from 'react-native';
+import { ActivityIndicator, Alert, Platform, View } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import _ from 'lodash';
 import dgram from 'react-native-udp';
@@ -21,6 +15,9 @@ import styles from './ConnectingWifiGuideStyles';
 import BottomButtonView from '../../commons/BottomButtonView';
 import AccessibilityLabel from '../../configs/AccessibilityLabel';
 
+let intervalSend = null;
+let socket;
+
 const ConnectingWifiGuide = ({ route }) => {
   const t = useTranslations();
   const { qrData, unitId, subUnit, addDeviceType } = route?.params || {};
@@ -91,9 +88,10 @@ const ConnectingWifiGuide = ({ route }) => {
       }
     }
 
-    let intervalSend = null;
-    const socket = dgram.createSocket({ type: 'udp4' });
-    socket.bind(54321);
+    if (!socket) {
+      socket = dgram.createSocket({ type: 'udp4' });
+      socket.bind(54321);
+    }
 
     socket.on('message', (msg, rinfo) => {
       const data = JSON.parse(msg.toString());
@@ -102,6 +100,7 @@ const ConnectingWifiGuide = ({ route }) => {
         setCurrentState(0);
         clearInterval(intervalSend);
         socket.close();
+        socket = null;
       }
     });
 
@@ -109,6 +108,10 @@ const ConnectingWifiGuide = ({ route }) => {
       ToastBottomHelper.error(t('fail_trigger_scan_wifi_on_device'));
     });
 
+    if (intervalSend) {
+      clearInterval(intervalSend);
+    }
+
     intervalSend = setInterval(() => {
       socket.send(
         JSON.stringify({ type: 'scan', data: { wifi: '' } }),
@@ -134,7 +137,7 @@ const ConnectingWifiGuide = ({ route }) => {
   }, [addDeviceType, navigate, qrData, subUnit, unitId, wifiList]);
 
   return (
-    <SafeAreaView style={styles.container}>
+    <View style={styles.container}>
       <HeaderCustom title={t('scan_qr_code')} isShowSeparator />
       <View
         style={{
@@ -162,7 +165,7 @@ const ConnectingWifiGuide = ({ route }) => {
           <ActivityIndicator size="large" />
         )}
       </View>
-    </SafeAreaView>
+    </View>
   );
 };