@eohjsc/react-native-smart-city 0.3.27 → 0.3.30

package/src/commons/Form/TextInput.js

@@ -27,6 +27,8 @@ const _TextInput = ({
   selectionColor,
   borderBottomOnly,
   testID,
+  selection,
+  onSelectionChange,
 }) => {
   const errorStyle = !!errorText && styles.errorWrap;
   return (
@@ -64,6 +66,8 @@ const _TextInput = ({
         multiline={multiline}
         selectionColor={selectionColor}
         {...(value ? { value } : {})}
+        selection={selection}
+        onSelectionChange={onSelectionChange}
       />
       {extraText && extraText}
       {!!errorText && <Text style={styles.errorText}>{errorText}</Text>}

package/src/commons/HeaderAni/index.js

@@ -94,6 +94,7 @@ const HeaderAni = memo(
             style={styles.btnBack}
             onPress={onPressLeft}
             testID={TESTID.ICON_BACK}
+            accessibilityLabel={TESTID.ICON_BACK}
           >
             <Icon name={'left'} size={27} color={Colors.Gray9} />
           </TouchableOpacity>

package/src/commons/MediaPlayerDetail/index.js

@@ -7,7 +7,6 @@ import React, {
   useMemo,
 } from 'react';
 import {
-  Image,
   View,
   StyleSheet,
   Text,
@@ -34,10 +33,8 @@ const MediaPlayerDetail = ({
   style,
   wrapStyles,
   amount,
-  handleFullScreen,
   isPaused = true,
   goToPlayBack,
-  isShowFullScreenIcon = false,
   width,
   height,
 }) => {
@@ -61,11 +58,6 @@ const MediaPlayerDetail = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [paused]);
 
-  const onFullScreen = useCallback(() => {
-    handleFullScreen && handleFullScreen({ uri, cameraName, thumbnail });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
   const getWidthHeight = useCallback(() => {
     let newWidth = 0,
       newHeight = 0;
@@ -207,18 +199,6 @@ const MediaPlayerDetail = ({
           {cameraName}
         </Text>
       )}
-      {isShowFullScreenIcon && (
-        <TouchableOpacity
-          onPress={onFullScreen}
-          style={[
-            styles.iconFullScreen,
-            (amount === 4 || amount === 6) && styles.iconFullScreen2,
-          ]}
-          testID={TESTID.SUB_UNIT_FULL_CAMERA}
-        >
-          <Image source={Images.fullscreen} />
-        </TouchableOpacity>
-      )}
     </View>
   );
 };

package/src/commons/MenuActionMore/index.js

@@ -17,6 +17,9 @@ const MenuActionMore = memo(
     onItemClick,
     wrapStyle,
     isTextCenter = true,
+    idLabelPopover,
+    idLabelScrollView,
+    idLabelItem = TESTID.SUB_UNIT_NAME,
   }) => {
     const [isDisable, setIsDisable] = useState(false);
     const onPress = useCallback(
@@ -47,8 +50,12 @@ const MenuActionMore = memo(
         onRequestClose={hideMore}
         isVisible={isVisible}
         arrowStyle={styles.wrap}
+        accessibilityLabel={idLabelPopover}
       >
-        <ScrollView scrollIndicatorInsets={{ right: 1 }}>
+        <ScrollView
+          scrollIndicatorInsets={{ right: 1 }}
+          accessibilityLabel={idLabelScrollView}
+        >
           {listMenuItem.map((item, index) => {
             return (
               <TouchableOpacity
@@ -59,6 +66,9 @@ const MenuActionMore = memo(
                 onPress={onPress(item, index)}
                 key={index}
                 testID={TESTID.TOUCHABLE_ACTION_ADD_MORE}
+                accessibilityLabel={`${idLabelItem}-${
+                  (item?.route ? item?.id : item?.station?.id) || index
+                }`}
                 disabled={isDisable}
               >
                 <Text style={styles.modalHeaderText}>{item.text}</Text>

package/src/commons/Modal/index.js

@@ -1,5 +1,4 @@
 import ModalCustom from './ModalCustom';
-import ModalFullVideo from './ModalFullVideo';
 import ModalBottom from './ModalBottom';
 
-export { ModalCustom, ModalFullVideo, ModalBottom };
+export { ModalCustom, ModalBottom };

package/src/commons/NavBar/index.js

@@ -10,7 +10,16 @@ import Station from '../../screens/Unit/Station';
 import MenuActionMore from '../MenuActionMore';
 
 const NavBar = memo(
-  ({ listMenuItem, listStation, onSnapToItem, indexStation, style }) => {
+  ({
+    listMenuItem,
+    listStation,
+    onSnapToItem,
+    indexStation,
+    style,
+    idLabelScrollView,
+    idLabelItem,
+    idLabelIconBars,
+  }) => {
     const { childRef, showingPopover, showPopoverWithRef, hidePopover } =
       usePopover();
     const refMenuAction = useRef();
@@ -31,6 +40,7 @@ const NavBar = memo(
             onPress={handleShowMenuAction}
             ref={refMenuAction}
             testID={TESTID.NAVBAR_ICON_BARS}
+            accessibilityLabel={idLabelIconBars}
           >
             <Icon name={'bars'} size={19} color={Colors.Black} />
           </TouchableOpacity>
@@ -44,6 +54,8 @@ const NavBar = memo(
           isTextCenter={false}
           testID={TESTID.NAVBAR_MENU_ACTION_MORE}
           wrapStyle={styles.wrapStyle}
+          idLabelScrollView={idLabelScrollView}
+          idLabelItem={idLabelItem}
         />
       </>
     );

package/src/commons/Popover/index.js

@@ -3,22 +3,23 @@ import Popover from 'react-native-popover-view';
 import { SCContext } from '../../context';
 import { Action } from '../../context/actionType';
 
-const PopoverComponent = (props) => {
+const PopoverComponent = ({ onRequestClose, ...restProps }) => {
   const { setAction } = useContext(SCContext);
 
-  const onCloseStart = () => {
+  const _onRequestClose = () => {
     setAction(Action.SET_POPOVER_ANIMATING, true);
+    onRequestClose && onRequestClose();
   };
 
-  const onCloseComplete = () => {
+  const _onCloseComplete = () => {
     setAction(Action.SET_POPOVER_ANIMATING, false);
   };
 
   return (
     <Popover
-      onCloseStart={onCloseStart}
-      onCloseComplete={onCloseComplete}
-      {...props}
+      onRequestClose={_onRequestClose}
+      onCloseComplete={_onCloseComplete}
+      {...restProps}
     />
   );
 };

package/src/commons/SubUnit/OneTap/ItemOneTap.js

@@ -103,7 +103,10 @@ const ItemOneTap = memo(
       ? timeDifference(new Date(), moment(activate_at), true)
       : null;
     return (
-      <TouchableWithoutFeedback onPress={onPressItem || goToDetail}>
+      <TouchableWithoutFeedback
+        onPress={onPressItem || goToDetail}
+        accessibilityLabel={`${TESTID.AUTOMATE_SCRIPT_NAME}-${id}`}
+      >
         <View style={[styles.container, wrapSyles]}>
           <View style={styles.boxIcon}>
             {displayIcon()}

package/src/commons/SubUnit/ShortDetail.js

@@ -71,6 +71,7 @@ const ShortDetailSubUnit = ({ unit, station }) => {
             },
           ]}
           testID={TESTID.SUB_UNIT_CAMERA_VIEW}
+          accessibilityLabel={`${TESTID.SUB_UNIT_CAMERA_VIEW}-${station?.id}`}
         >
           <MediaPlayerDetail
             uri={station.camera.uri}

package/src/commons/SummaryItem/index.js

@@ -9,6 +9,7 @@ import Temperature from '../../../assets/images/Temperature.svg';
 import UVIndex from '../../../assets/images/UVIndex.svg';
 import WaterQuality from '../../../assets/images/WaterQuality.svg';
 import Device from '../../../assets/images/Device.svg';
+import { TESTID } from '../../configs/Constants';
 
 const SummaryItem = memo(({ item, goToSummary }) => {
   const Icon = (() => {
@@ -29,11 +30,11 @@ const SummaryItem = memo(({ item, goToSummary }) => {
         return Device; /* istanbul ignore next */
     }
   })();
-
   return (
     <TouchableOpacity
       onPress={() => goToSummary(item)}
       style={styles.wrapSummaryItem}
+      accessibilityLabel={`${TESTID.UNIT_DETAIL_UNIT_SUMMARY_ITEM}-${item?.id}`}
     >
       <View style={styles.summaryItem}>
         <Icon />

package/src/commons/Tabbar/Styles/indexStyles.js

@@ -0,0 +1,51 @@
+import { StyleSheet } from 'react-native';
+import { isIphoneX } from 'react-native-iphone-x-helper';
+import { Colors } from '../../../configs';
+
+const widthBadge = 20;
+export default StyleSheet.create({
+  wrap: {
+    flexDirection: 'row',
+    height: 70,
+    backgroundColor: Colors.White,
+    paddingHorizontal: 10,
+    borderTopWidth: 1,
+    borderColor: Colors.Gray4,
+  },
+  label: {
+    textAlign: 'center',
+    fontSize: 12,
+    marginTop: 10,
+    marginBottom: isIphoneX() ? 10 : 0,
+  },
+  wrapTab: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  icon: {
+    marginBottom: -8,
+  },
+  wrapIcon: {
+    position: 'relative',
+  },
+  badgeCount: {
+    width: widthBadge,
+    height: 20,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: Colors.Red,
+    borderRadius: widthBadge / 2,
+    position: 'absolute',
+    top: -8,
+    right: -8,
+  },
+  txtBadge: {
+    color: Colors.White,
+    fontSize: 12,
+  },
+  iconActive: {
+    tintColor: Colors.Primary,
+  },
+});

package/src/commons/Tabbar/index.js

@@ -0,0 +1,110 @@
+import React, { memo, useEffect } from 'react';
+import { Animated, View, Text, TouchableOpacity, Image } from 'react-native';
+import Routes from '../../utils/Route';
+import { Colors } from '../../configs/Colors';
+import { Constants } from '../../configs/Constants';
+import styles from './Styles/indexStyles';
+import { Images } from '../../configs';
+
+export const getTabBarIcon = (routeName) => {
+  switch (routeName) {
+    case Routes.TemplateStack:
+      return Images.template;
+    case Routes.GatewayStack:
+      return Images.gateway;
+    case Routes.SmartStack:
+      return Images.smart;
+  }
+};
+
+const getWidth = () => (Constants.width - 12) / 3;
+
+const TabBarItem = ({
+  descriptor,
+  route,
+  index,
+  isFocused,
+  navigation,
+  notificationNumber,
+  updateLastSeen,
+}) => {
+  const { options } = descriptor;
+  const label =
+    options.tabBarLabel !== undefined
+      ? options.tabBarLabel
+      : options.title !== undefined
+      ? options.title
+      : route.name;
+  const color = isFocused ? Colors.Primary : Colors.Black;
+
+  const onPress = () => {
+    const event = navigation.emit({
+      type: 'tabPress',
+      target: route.key,
+      canPreventDefault: true,
+    });
+    if (!isFocused && !event.defaultPrevented) {
+      navigation.navigate({
+        name: route.name,
+        merge: true,
+        params: { isMainSource: options.isMainSource },
+      });
+    }
+  };
+
+  useEffect(() => {
+    if (isFocused) {
+      Animated.spring(options.tabOffSetValue, {
+        toValue: getWidth() * index,
+        useNativeDriver: true,
+      }).start();
+    }
+  }, [isFocused, index, options.tabOffSetValue]);
+
+  useEffect(() => {
+    if (isFocused) {
+      if (route.name === Routes.NotificationStack) {
+        updateLastSeen && updateLastSeen();
+      }
+    }
+  }, [isFocused, route.name, updateLastSeen]);
+
+  return (
+    <TouchableOpacity onPress={onPress} style={styles.wrapTab}>
+      <View style={styles.wrapIcon}>
+        <Image
+          style={[styles.icon, isFocused && styles.iconActive]}
+          source={getTabBarIcon(route.name)}
+        />
+        {route.name === Routes.NotificationStack && notificationNumber > 0 && (
+          <View style={styles.badgeCount}>
+            <Text style={styles.txtBadge}>
+              {notificationNumber < 9 ? notificationNumber : '9+'}
+            </Text>
+          </View>
+        )}
+      </View>
+
+      <Text style={[styles.label, { color }]}>{label}</Text>
+    </TouchableOpacity>
+  );
+};
+
+const TabBar = ({ state, descriptors, navigation }) => {
+  return (
+    <View style={styles.wrap}>
+      {state.routes.map((route, index) => (
+        <TabBarItem
+          key={index}
+          descriptor={descriptors[route.key]}
+          route={route}
+          index={index}
+          isFocused={state.index === index}
+          navigation={navigation}
+        />
+      ))}
+    </View>
+  );
+};
+
+export default memo(TabBar);

package/src/commons/Unit/HeaderUnit/index.js

@@ -19,6 +19,7 @@ const HeaderUnit = memo(
     hideRightPlus,
     styleBoxTitle,
     bottomBorder,
+    idButtonMore,
   }) => {
     const { goBack } = useNavigation();
     const buttonMoreRef = useRef(null);
@@ -80,6 +81,7 @@ const HeaderUnit = memo(
               style={styles.btnMore}
               onPress={onPressMore}
               ref={buttonMoreRef}
+              accessibilityLabel={idButtonMore}
             >
               <Icon
                 name={'more'}

package/src/commons/Unit/SharedUnit.js

@@ -68,6 +68,7 @@ const SharedUnit = ({
       key={item.id.toString()}
       onPress={goToDetail}
       testID={`${TESTID.TOUCH_SHARED_UNIT}-${item.id}`}
+      accessibilityLabel={`${TESTID.TOUCH_SHARED_UNIT}-${item.id}`}
     >
       <Image
         source={{ uri: unit.icon }}

package/src/commons/WrapParallaxScrollView/index.js

@@ -21,6 +21,8 @@ const WrapParallaxScrollView = ({
   hideRight,
   hideRightPlus,
   contentBackground,
+  accessibilityLabel,
+  idButtonMore,
 }) => {
   const renderForeground = useCallback(
     () => (
@@ -32,6 +34,7 @@ const WrapParallaxScrollView = ({
           onMore={onMore}
           hideRight={hideRight}
           hideRightPlus={hideRightPlus}
+          idButtonMore={idButtonMore}
         />
         <Text semibold style={styles.nameUnit}>
           {title}
@@ -39,7 +42,16 @@ const WrapParallaxScrollView = ({
         {contentBackground}
       </View>
     ),
-    [onBack, onAdd, onMore, title, hideRight, hideRightPlus, contentBackground]
+    [
+      onBack,
+      onAdd,
+      onMore,
+      hideRight,
+      hideRightPlus,
+      idButtonMore,
+      title,
+      contentBackground,
+    ]
   );
   const renderBackground = useCallback(
     () => (
@@ -68,10 +80,11 @@ const WrapParallaxScrollView = ({
           onMore={onMore}
           hideRight={hideRight}
           hideRightPlus={hideRightPlus}
+          idButtonMore={idButtonMore}
         />
       </View>
     ),
-    [title, onBack, onAdd, onMore, hideRight, hideRightPlus]
+    [title, onBack, onAdd, onMore, hideRight, hideRightPlus, idButtonMore]
   );
   return (
     <ParallaxScrollView
@@ -83,6 +96,7 @@ const WrapParallaxScrollView = ({
       backgroundColor={Colors.White}
       refreshControl={refreshControl}
       showsVerticalScrollIndicator={false}
+      accessibilityLabel={accessibilityLabel}
     >
       {children}
     </ParallaxScrollView>

package/src/configs/Colors.js

@@ -133,4 +133,8 @@ export const Colors = {
   BlackTransparent16: 'rgba(0, 0, 0, 0.16)',
   WhiteTransparent8: 'rgba(255, 255, 255, 0.8)',
   BlueTransparent5: 'rgba(230, 247, 255, 0.5)',
+  Neutral: {
+    Neutral3: '#E6E6E6',
+    Neutral5: '#595959',
+  },
 };

package/src/configs/Constants.js

@@ -313,11 +313,13 @@ export const TESTID = {
   SUB_UNIT_GO_DETAIL: 'SUB_UNIT_GO_DETAIL',
   VIEW_SUB_UNIT_AUTOMATE: 'VIEW_SUB_UNIT_AUTOMATE',
   SUB_UNIT_NAME: 'SUB_UNIT_NAME',
+  SUB_UNIT_FAVORITES: 'SUB_UNIT_FAVORITES',
   ANIMATED_SCROLL: 'ANIMATED_SCROLL',
   ADD_SUB_UNIT: 'ADD_SUB_UNIT',
 
   // NavBar
   NAVBAR_ICON_BARS: 'NAVBAR_ICON_BARS',
+  NAVBAR_ICON_BARS_ADD_FAVORITES: 'NAVBAR_ICON_BARS_ADD_FAVORITES',
   NAVBAR_MENU_ACTION_MORE: 'NAVBAR_MENU_ACTION_MORE',
   NAVBAR_ON_SNAP_ITEM: 'NAVBAR_ON_SNAP_ITEM',
 
@@ -400,6 +402,11 @@ export const TESTID = {
   //Unit Detail
   UNIT_DETAIL_STATION_LIST: 'UNIT_DETAIL_STATION_LIST',
   UNIT_DETAIL_UNIT_SUMMARY_VIEW: 'UNIT_DETAIL_UNIT_SUMMARY_VIEW',
+  UNIT_DETAIL_UNIT_SUMMARY_ITEM: 'UNIT_DETAIL_UNIT_SUMMARY_ITEM',
+  UNIT_DETAIL_PARALLAX_SCROLLVIEW: 'UNIT_DETAIL_PARALLAX_SCROLLVIEW',
+  UNIT_DETAIL_PARALLAX_BUTTON_MORE: 'UNIT_DETAIL_PARALLAX_BUTTON_MORE',
+  UNIT_DETAIL_POPUP_MORE: 'UNIT_DETAIL_POPUP_MORE',
+  UNIT_DETAIL_POPUP_MORE_ITEM: 'UNIT_DETAIL_POPUP_MORE_ITEM',
 
   ON_CHECK_SPOT_NUMBER: 'ON_CHECK_SPOT_NUMBER',
   ON_BOOK_NOW: 'ON_BOOK_NOW',
@@ -422,6 +429,7 @@ export const TESTID = {
 
   // Automate
   AUTOMATE_SCRIPT_ACTION: 'AUTOMATE_SCRIPT_ACTION',
+  AUTOMATE_SCRIPT_NAME: 'AUTOMATE_SCRIPT_NAME',
   NAME_YOUR_BUTTON: 'NAME_YOUR_BUTTON',
   BUTTON_ACTIVATE_ONE_TAP: 'BUTTON_ACTIVATE_ONE_TAP',
   BUTTON_EDIT_SCRIPT_ACTION: 'BUTTON_EDIT_SCRIPT_ACTION',
@@ -439,6 +447,7 @@ export const TESTID = {
 
   // Header Device
   HEADER_DEVICE_BUTTON_STAR: 'HEADER_DEVICE_BUTTON_STAR',
+  HEADER_SCRIPT_DETAIL_BUTTON_STAR: 'HEADER_SCRIPT_DETAIL_BUTTON_STAR',
   HEADER_DEVICE_BUTTON_MORE: 'HEADER_DEVICE_BUTTON_MORE',
 
   // EMERGENCY BUTTON
@@ -661,6 +670,13 @@ export const TESTID = {
   ADD_NEW_DEVICE_ADD: 'ADD_NEW_DEVICE_ADD',
   ADD_NEW_DEVICE_THEN_SELECT: 'ADD_NEW_DEVICE_THEN_SELECT',
 
+  // Add Favorites
+  TOUCH_ADD_NEW_FAVORITES: 'TOUCH_ADD_NEW_FAVORITES',
+  LIST_FAVORITES: 'LIST_FAVORITES',
+  TOUCHABLE_ACTION_ADD_ITEM_FAVORITE: 'TOUCHABLE_ACTION_ADD_ITEM_FAVORITE',
+  TOUCHABLE_ACTION_ADD_ITEM_AUTOMATE_FAVORITE:
+    'TOUCHABLE_ACTION_ADD_ITEM_AUTOMATE_FAVORITE',
+
   // Setup gateway wifi
   SETUP_GATEWAY_WIFI_TITLE: 'SETUP_GATEWAY_WIFI_TITLE',
   SETUP_GATEWAY_WIFI_PLEASE_SELECT_A_WIFI: 'SETUP_GATEWAY_PLEASE_SELECT_A_WIFI',

package/src/configs/Images.js

@@ -13,4 +13,10 @@ export default {
   shadowButton: require('../Images/Common/shadowButton.png'),
   eye: require('../Images/Common/eye.png'),
   eyeClosed: require('../Images/Common/eye-closed.png'),
+  deviceIcon: require('../Images/Common/device_icon.png'),
+  template: require('../Images/DevMode/template.png'),
+  smart: require('../Images/DevMode/smart.png'),
+  gateway: require('../Images/DevMode/gateway.png'),
+  menu: require('../Images/DevMode/menu.png'),
+  search: require('../Images/DevMode/search.png'),
 };

package/src/hooks/Common/useDevicesStatus.js

@@ -27,7 +27,7 @@ const useDevicesStatus = (unit, devices) => {
     if (success) {
       setAction(Action.SET_DEVICES_STATUS, data);
     }
-    timeoutId = setTimeout(() => getDevicesStatus(_unit, _devices), 5000);
+    timeoutId = setTimeout(() => getDevicesStatus(_unit, _devices), 10000);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 

package/src/hooks/IoT/useValueEvaluation.js

@@ -1,4 +1,4 @@
-import { useCallback, useContext, useEffect, useState } from 'react';
+import { useCallback, useContext, useEffect } from 'react';
 import { API } from '../../configs';
 import { SCContext, useSCContextSelector } from '../../context';
 import { Action } from '../../context/actionType';
@@ -6,14 +6,15 @@ import { axiosGet } from '../../utils/Apis/axios';
 
 const useValueEvaluations = (unitId) => {
   const { setAction } = useContext(SCContext);
-  const [fetching, setFetching] = useState(false);
+  const fetchedValueEvaluationUnits = useSCContextSelector((state) => {
+    return state.fetchedValueEvaluationUnits || [];
+  });
 
   const fetchConfigValueEvaluations = useCallback(
     async (page = 1) => {
-      if (!unitId) {
+      if (!unitId || fetchedValueEvaluationUnits.indexOf(unitId) !== -1) {
         return;
       }
-      setFetching(true);
       const params = new URLSearchParams();
       params.append('config__end_device__station__unit', unitId);
       params.append('page', page);
@@ -34,25 +35,15 @@ const useValueEvaluations = (unitId) => {
           data: [],
         });
       }
-      setFetching(false);
     },
-    [unitId, setAction]
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [unitId, fetchedValueEvaluationUnits]
   );
 
-  const fetchedValueEvaluationUnits = useSCContextSelector((state) => {
-    return state.fetchedValueEvaluationUnits || [];
-  });
-
   useEffect(() => {
-    if (!fetching && !(fetchedValueEvaluationUnits.indexOf(unitId) !== -1)) {
-      fetchConfigValueEvaluations();
-    }
-  }, [
-    unitId,
-    fetching,
-    fetchConfigValueEvaluations,
-    fetchedValueEvaluationUnits,
-  ]);
+    fetchConfigValueEvaluations();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [unitId]);
 };
 
 export default useValueEvaluations;

package/src/iot/RemoteControl/GoogleHome.js

@@ -127,12 +127,6 @@ export const googleHomeConnect = async (
   for (let i = 0; i < options.length; i++) {
     const option = options[i];
 
-    if (option.chip_id in oldConnections && !!oldConnections[option.chip_id]) {
-      connections[option.chip_id] = oldConnections[option.chip_id];
-      continue;
-    }
-    connections[option.chip_id] = 0; // connecting
-
     option.config_maps.forEach((configMap) => {
       if (option.text_maps) {
         textMaps[configMap.entity_id] = option.text_maps;
@@ -156,6 +150,12 @@ export const googleHomeConnect = async (
       }
     });
 
+    if (option.chip_id in oldConnections && !!oldConnections[option.chip_id]) {
+      connections[option.chip_id] = oldConnections[option.chip_id];
+      continue;
+    }
+    connections[option.chip_id] = 0; // connecting
+
     try {
       let auth = new Auth(option.auth);
       const connection = await createConnection({ auth });

package/src/navigations/GatewayStack.js

@@ -0,0 +1,23 @@
+import React, { memo } from 'react';
+import { createStackNavigator } from '@react-navigation/stack';
+
+import Routes from '../utils/Route';
+import { screenOptions } from './utils';
+import Gateway from '../screens/Gateway';
+
+const Stack = createStackNavigator();
+
+const GatewayStack = memo(() => {
+  return (
+    <Stack.Navigator
+      screenOptions={{
+        ...screenOptions,
+        headerShown: false,
+      }}
+    >
+      <Stack.Screen name={Routes.Gateway} component={Gateway} />
+    </Stack.Navigator>
+  );
+});
+
+export default GatewayStack;