@eohjsc/react-native-smart-city 0.3.92 → 0.3.93

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eohjsc/react-native-smart-city",
   "title": "React Native Smart Home",
-  "version": "0.3.92",
+  "version": "0.3.93",
   "description": "TODO",
   "main": "index.js",
   "files": [
@@ -129,6 +129,7 @@
     "@testing-library/react-hooks": "^6.0.0",
     "apisauce": "^2.1.5",
     "axios": "^0.19.2",
+    "base-64": "^1.0.0",
     "deprecated-react-native-prop-types": "^2.3.0",
     "dotenv": "^8.2.0",
     "google-libphonenumber": "^3.2.10",
@@ -143,8 +144,10 @@
     "patch-package": "^6.2.2",
     "pluralize": "^8.0.0",
     "postinstall": "^0.7.0",
+    "precompiled-mqtt": "^4.3.14-beta",
     "pusher-js": "^7.4.0",
     "pusher-js-auth": "^4.0.1",
+    "python-struct": "^1.1.3",
     "querystring": "^0.2.0",
     "react-content-loader": "^6.0.3",
     "react-dom": "^17.0.1",
@@ -161,6 +164,7 @@
     "react-native-calendars": "^1.1266.0",
     "react-native-chart-kit": "^6.5.0",
     "react-native-credit-card-input": "^0.4.1",
+    "react-native-crypto-aes-cbc": "^1.1.1",
     "react-native-dash": "^0.0.11",
     "react-native-deep-linking": "^2.2.0",
     "react-native-device-info": "^10.3.0",

package/src/commons/ActionGroup/SliderRangeTemplate.js

@@ -77,8 +77,8 @@ const SliderRangeTemplate = memo(
           doAction(
             action_data,
             JSON.stringify({
-              value_brness: parseInt(value),
-              value: parseInt(value),
+              value_brness: parseInt(value, 10),
+              value: parseInt(value, 10),
             })
           );
         }, 300);

package/src/commons/AlertAction/index.js

@@ -80,6 +80,8 @@ const AlertAction = ({
             styleButtonLeft={boxLeftButtonStyle}
             styleButtonRight={boxRightButtonStyle}
             accessibilityLabelPrefix={accessibilityLabelPrefix}
+            wrapStyle={styles.wrapViewButtonStyle}
+            disableKeyBoardAnimated
           />
         </View>
       </Animated.View>
@@ -121,6 +123,9 @@ const styles = StyleSheet.create({
   descriptionText: {
     paddingHorizontal: 16,
   },
+  wrapViewButtonStyle: {
+    position: 'relative',
+  },
 });
 
 export default AlertAction;

package/src/commons/BottomButtonView/index.js

@@ -1,7 +1,8 @@
-import React, { memo } from 'react';
-import { View, StyleSheet } from 'react-native';
+import React, { memo, useState, useEffect } from 'react';
+import { StyleSheet, Animated, Easing, Platform } from 'react-native';
 
 import { AccessibilityLabel } from '../../configs/Constants';
+import useKeyboardAnimated from '../../hooks/Explore/useKeyboardAnimated';
 import Button from '../Button';
 
 const BottomButtonView = memo(
@@ -20,13 +21,28 @@ const BottomButtonView = memo(
     typeMain = 'primary',
     typeSecondary = 'cancel',
     accessibilityLabelPrefix = '',
+    disableBackgroundMainButton = false,
+    disableBackgroundSecondButton = false,
   }) => {
+    const transY = useKeyboardAnimated();
+    const [keyboardAnim] = useState(new Animated.Value(0));
+
+    useEffect(() => {
+      Animated.timing(keyboardAnim, {
+        toValue: transY,
+        duration: Platform.OS === 'ios' ? 220 : 0,
+        easing: Easing.linear(),
+        useNativeDriver: false,
+      }).start();
+    }, [keyboardAnim, transY]);
+
     return (
-      <View
+      <Animated.View
         style={[
           typeMain === 'CardShadow'
             ? styleCustom.container1
             : styleCustom.container,
+          { bottom: keyboardAnim },
           rowButton && styleCustom.horizontalContainer,
           style,
         ]}
@@ -42,6 +58,7 @@ const BottomButtonView = memo(
             textType={textTypeMain}
             style={rowButton && styleCustom.buttonMainRow}
             accessibilityLabel={`${accessibilityLabelPrefix}${AccessibilityLabel.BOTTOM_VIEW_MAIN}`}
+            disableBackground={disableBackgroundMainButton}
           />
         )}
         {secondaryTitle && (
@@ -56,9 +73,10 @@ const BottomButtonView = memo(
                 : styleCustom.buttonSecondaryColumn
             }
             accessibilityLabel={`${accessibilityLabelPrefix}${AccessibilityLabel.BOTTOM_VIEW_SECONDARY}`}
+            disableBackground={disableBackgroundSecondButton}
           />
         )}
-      </View>
+      </Animated.View>
     );
   }
 );

package/src/commons/Button/index.js

@@ -133,6 +133,7 @@ export default ({
   textSemiBold = true,
   style,
   accessibilityLabel,
+  disableBackground = false,
 }) => {
   const styleButton = ButtonStyle[type];
   const textColor = TextColor[type];
@@ -153,6 +154,7 @@ export default ({
         isCardShadow && styles.buttonLeft,
         styleButton,
         style,
+        disableBackground && styles.disableBackground,
       ]}
       onPress={onPress}
       disabled={isDisabled}
@@ -202,4 +204,7 @@ const styles = StyleSheet.create({
     alignItems: 'flex-start',
     backgroundColor: Colors.Gray1,
   },
+  disableBackground: {
+    backgroundColor: Colors.Transparent,
+  },
 });

package/src/commons/Device/ConnectedViewHeader.js

@@ -1,7 +1,6 @@
 import React, { memo } from 'react';
 import { StyleSheet, View } from 'react-native';
 import { IconOutline } from '@ant-design/icons-react-native';
-
 import { useTranslations } from '../../hooks/Common/useTranslations';
 import { Colors } from '../../configs';
 import Text from '../../commons/Text';

package/src/commons/Device/Emergency/EmergencyDetail.js

@@ -9,7 +9,6 @@ import { RowUser } from '../../RowUser';
 import { IconFill, IconOutline } from '@ant-design/icons-react-native';
 import { useEmeragencyContacts } from '../../../screens/EmergencyContacts/hook';
 import { useIsFocused } from '@react-navigation/native';
-import _ from 'lodash';
 
 const { standardizeHeight } = standardizeCameraScreenSize(
   Device.screenWidth + 86
@@ -17,6 +16,7 @@ const { standardizeHeight } = standardizeCameraScreenSize(
 
 const EmergencyDetail = memo(({ item }) => {
   const t = useTranslations();
+  const { uri, preview_uri } = item?.configuration?.camera;
   const groupId = item?.configuration?.device?.group?.id;
   const isFocused = useIsFocused();
   const { listContacts, getListContacts } = useEmeragencyContacts();
@@ -35,8 +35,10 @@ const EmergencyDetail = memo(({ item }) => {
       <View style={styles.first}>
         <Text type="H4">{t('camera')}</Text>
         <MediaPlayer
-          uri={_.get(item, 'configuration.uri', '')}
+          uri={uri}
+          previewUri={preview_uri}
           style={styles.camera}
+          key={'camera-emergency'}
         />
       </View>
       <View style={styles.second}>

package/src/commons/Device/Emergency/__test__/EmergencyDetail.test.js

@@ -28,8 +28,10 @@ describe('Test EmergencyDetail', () => {
   it('create EmergencyDetail', async () => {
     const item = {
       configuration: {
-        uri: '123',
-        preview_uri: '123',
+        camera: {
+          uri: '123',
+          preview_uri: '123',
+        },
         device: {
           group: {
             id: 1,

package/src/commons/Device/ProgressBar/index.js

@@ -28,7 +28,9 @@ const ProgressBar = memo(({ data = [], item }) => {
 
       <View style={styles.wrapProgressBar}>
         <Progress.Bar
-          style={styles.processBar}
+          style={styles.progressBar}
+          width={null}
+          height={40}
           progress={percent}
           unfilledColor={Colors.Blue15}
         />

package/src/commons/Device/ProgressBar/styles.js

@@ -24,10 +24,8 @@ export default StyleSheet.create({
     fontWeight: 'bold',
     textTransform: 'uppercase',
   },
-  processBar: {
+  progressBar: {
     flex: 1,
-    width: '100%',
-    height: 40,
     color: Colors.Blue16,
     borderWidth: 0,
     borderRadius: 10,
@@ -40,6 +38,5 @@ export default StyleSheet.create({
   },
   textValue: {
     marginLeft: 8,
-    width: 45,
   },
 });

package/src/commons/Device/WindSpeed/Anemometer/index.js

@@ -178,7 +178,7 @@ const Anemometer = memo(
         </View>
 
         <View style={styles.textValue}>
-          {value && (
+          {!!value && (
             <Svg width={width} height={width} {...viewBox}>
               <Text
                 fill={Colors.Lime6}

package/src/commons/Header/HeaderCustom.js

@@ -1,4 +1,4 @@
-import React, { memo, useCallback, useRef } from 'react';
+import React, { useCallback, useRef } from 'react';
 import { View, Text, TouchableOpacity, Image } from 'react-native';
 import Images from '../../configs/Images';
 import { Colors } from '../../configs';
@@ -11,7 +11,6 @@ import { AccessibilityLabel } from '../../configs/Constants';
 
 const HeaderCustom = ({
   title = '',
-  isShowAdd = false,
   isShowRight = false,
   onRefresh,
   showPopoverWithRef,
@@ -33,18 +32,18 @@ const HeaderCustom = ({
   const t = useTranslations();
   const { goBack } = useNavigation();
   const refMenuAction = useRef();
-  const refAddAction = useRef();
-  const handleAddAction = () => {};
   const handleShowMenuAction = () => showPopoverWithRef(refMenuAction);
   const handleGoback = () => {
-    onGoBack && onGoBack();
-    goBack();
+    if (onGoBack) {
+      onGoBack();
+    } else {
+      goBack();
+    }
   };
 
   const handleClose = useCallback(() => {
     onClose ? onClose() : notImplemented(t);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [onClose, t]);
 
   return (
     <View
@@ -102,15 +101,6 @@ const HeaderCustom = ({
             </TouchableOpacity>
           </>
         )}
-        {isShowAdd && (
-          <TouchableOpacity
-            style={styles.buttonAdd}
-            onPress={handleAddAction}
-            ref={refAddAction}
-          >
-            <Icon name={'plus'} size={27} color={Colors.Black} />
-          </TouchableOpacity>
-        )}
         {isShowClose && (
           <TouchableOpacity style={styles.buttonAdd} onPress={handleClose}>
             <Icon name={'close'} size={24} color={Colors.Black} />
@@ -122,4 +112,4 @@ const HeaderCustom = ({
   );
 };
 
-export default memo(HeaderCustom);
+export default HeaderCustom;

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

@@ -1,4 +1,4 @@
-import React, { memo, useCallback, useMemo } from 'react';
+import React, { memo, useCallback } from 'react';
 import { TouchableOpacity, TouchableWithoutFeedback, View } from 'react-native';
 import { IconOutline } from '@ant-design/icons-react-native';
 import moment from 'moment';
@@ -17,63 +17,20 @@ import { axiosPost } from '../../../utils/Apis/axios';
 import { useTranslations } from '../../../hooks/Common/useTranslations';
 import { useNavigation } from '@react-navigation/native';
 import Routes from '../../../utils/Route';
-import { useGetIdUser } from '../../../hooks/Common';
-import { AUTOMATE_TYPE, AccessibilityLabel } from '../../../configs/Constants';
+import { AccessibilityLabel, AUTOMATE_TYPE } from '../../../configs/Constants';
 
 const ItemOneTap = memo(
   ({ isOwner, automate = {}, unit, wrapSyles, onPressItem }) => {
     const { navigate } = useNavigation();
-    const {
-      id,
-      type,
-      user,
-      script,
-      activate_at,
-      condition,
-      config,
-      value,
-      author = '',
-    } = automate;
+    const { id, type, script, activate_at, author = '' } = automate;
     const t = useTranslations();
-    const idUser = useGetIdUser();
-
-    const textCondition = useMemo(() => {
-      if (type === AUTOMATE_TYPE.VALUE_CHANGE) {
-        let _condition;
-        if (condition === '>') {
-          _condition = 'higher_than';
-        } else if (condition === '<') {
-          _condition = 'lower_than';
-        } else if (condition === '=') {
-          _condition = 'equal';
-        }
-        return `${config} ${t(_condition)} ${value}`;
-      }
-      return null;
-    }, [condition, config, t, type, value]);
 
     const goToDetail = useCallback(() => {
       navigate(Routes.ScriptDetail, {
         id,
-        automate,
-        name: script?.name,
-        type: type,
-        havePermission: isOwner || user === idUser,
-        unit,
-        textCondition,
+        preAutomate: automate,
       });
-    }, [
-      automate,
-      isOwner,
-      user,
-      idUser,
-      navigate,
-      id,
-      script,
-      type,
-      unit,
-      textCondition,
-    ]);
+    }, [automate, navigate, id]);
 
     const handleScriptAction = useCallback(async () => {
       const { success } = await axiosPost(API.AUTOMATE.ACTION_ONE_TAP(id));

package/src/commons/SubUnit/OneTap/__test__/SubUnitAutomate.test.js

@@ -61,6 +61,7 @@ describe('test Item', () => {
   beforeEach(() => {
     mockedNavigate.mockClear();
   });
+
   it('render SubUnitAutomate isOwner and handleOnAddNew', async () => {
     await act(async () => {
       tree = await create(wrapComponent(data));
@@ -78,7 +79,7 @@ describe('test Item', () => {
     await act(async () => {
       await item[0].props.onPress();
     });
-    expect(mockedNavigate).toHaveBeenCalledWith(Routes.AddNewOneTap, {
+    expect(mockedNavigate).toHaveBeenCalledWith(Routes.ScenarioName, {
       automate: {
         type: 'one_tap',
         unit: undefined,
@@ -97,13 +98,8 @@ describe('test Item', () => {
       await goDetail[0].props.onPress();
     });
     expect(mockedNavigate).toHaveBeenCalledWith(Routes.ScriptDetail, {
-      havePermission: true,
       id: 1,
-      name: 'Joshua Ray',
-      type: 'one_tap',
-      unit: undefined,
-      textCondition: null,
-      automate: data.listAutomate[0].data[0],
+      preAutomate: data.listAutomate[0].data[0],
     });
 
     const handleScriptAction = instance.findAll(
@@ -189,13 +185,8 @@ describe('test Item', () => {
       await goDetail[0].props.onPress();
     });
     expect(mockedNavigate).toHaveBeenCalledWith(Routes.ScriptDetail, {
-      havePermission: false,
       id: 1,
-      name: 'Rain',
-      type: 'value_change',
-      unit: undefined,
-      textCondition: 'Temperature higher than 29',
-      automate: data.listAutomate[0].data[0],
+      preAutomate: data.listAutomate[0].data[0],
     });
   });
   it('render SubUnitAutomate script schedule and handleOnAddNew item automate', async () => {
@@ -237,8 +228,8 @@ describe('test Item', () => {
     await act(async () => {
       await item[0].props.onPress();
     });
-    expect(mockedNavigate).toHaveBeenCalledWith(Routes.AddNewAutoSmart, {
-      automate: { type: AUTOMATE_TYPE.VALUE_CHANGE, unit: undefined },
+    expect(mockedNavigate).toHaveBeenCalledWith(Routes.AddAutomationTypeSmart, {
+      automate: { unit: undefined },
       closeScreen: undefined,
     });
     mockedNavigate.mockClear();

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

@@ -22,10 +22,11 @@ const SubUnitAutomate = ({ isOwner, listAutomate, unit, wrapItemStyle }) => {
   const [automates, setAutomates] = useState(listAutomate[0]);
   const [indexAutomate, setIndexAutomate] = useState(0);
   const { name: currentScreen } = useRoute();
+
   const handleOnAddNew = () => {
     switch (automates.type) {
       case AUTOMATE_TABS.SCENARIO:
-        navigate(Routes.AddNewOneTap, {
+        navigate(Routes.ScenarioName, {
           automate: {
             type: AUTOMATE_TYPE.ONE_TAP,
             unit: unit?.id,
@@ -34,9 +35,8 @@ const SubUnitAutomate = ({ isOwner, listAutomate, unit, wrapItemStyle }) => {
         });
         break;
       case AUTOMATE_TABS.AUTOMATION:
-        navigate(Routes.AddNewAutoSmart, {
+        navigate(Routes.AddAutomationTypeSmart, {
           automate: {
-            type: AUTOMATE_TYPE.VALUE_CHANGE,
             unit: unit?.id,
           },
           closeScreen: currentScreen,

package/src/commons/ViewButtonBottom/index.js

@@ -1,10 +1,17 @@
-import React, { useMemo } from 'react';
-import { StyleSheet, TouchableOpacity, View } from 'react-native';
+import React, { useMemo, useEffect, useState } from 'react';
+import {
+  StyleSheet,
+  TouchableOpacity,
+  Animated,
+  Platform,
+  Easing,
+} from 'react-native';
 
 import { Colors } from '../../configs';
 import Text from '../../commons/Text';
 import { AccessibilityLabel } from '../../configs/Constants';
 import withPreventDoubleClick from '../WithPreventDoubleClick';
+import useKeyboardAnimated from '../../hooks/Explore/useKeyboardAnimated';
 
 const PreventDoubleTouch = withPreventDoubleClick(TouchableOpacity);
 
@@ -23,15 +30,34 @@ const ViewButtonBottom = ({
   styleButtonRight,
   accessibilityLabelPrefix = '',
   isPreventDoubleTouch = false,
+  wrapStyle,
+  disableKeyBoardAnimated = false,
 }) => {
   const useTwoButton = leftTitle && rightTitle;
+  const transY = useKeyboardAnimated();
+  const [keyboardAnim] = useState(new Animated.Value(0));
 
   const RightButtonView = useMemo(() => {
     return isPreventDoubleTouch ? PreventDoubleTouch : TouchableOpacity;
   }, [isPreventDoubleTouch]);
 
+  useEffect(() => {
+    Animated.timing(keyboardAnim, {
+      toValue: transY,
+      duration: Platform.OS === 'ios' ? 220 : 0,
+      easing: Easing.linear(),
+      useNativeDriver: false,
+    }).start();
+  }, [keyboardAnim, transY]);
+
   return (
-    <View style={styles.container}>
+    <Animated.View
+      style={[
+        styles.container,
+        wrapStyle,
+        !disableKeyBoardAnimated && { bottom: keyboardAnim },
+      ]}
+    >
       {leftTitle && (
         <TouchableOpacity
           style={[
@@ -76,7 +102,7 @@ const ViewButtonBottom = ({
           </Text>
         </RightButtonView>
       )}
-    </View>
+    </Animated.View>
   );
 };
 
@@ -85,6 +111,8 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'center',
     paddingHorizontal: 16,
+    position: 'absolute',
+    bottom: 0,
   },
   button: {
     paddingVertical: 24,

package/src/configs/API.js

@@ -35,6 +35,8 @@ const API = {
       `/property_manager/units/${id}/star_automate_scripts/`,
   },
   SUB_UNIT: {
+    END_DEVICES_STATUS: (stationId) =>
+      `/property_manager/iot_dashboard/stations_v2/${stationId}/end_devices_status/`,
     REMOVE_SUB_UNIT: (unitId, id) =>
       `/property_manager/${unitId}/sub_units/${id}/`,
     CREATE_SUB_UNIT: (unitId) => `/property_manager/${unitId}/sub_units/`,
@@ -49,6 +51,7 @@ const API = {
       ACCEPT_NEW_DEVICE: (id) =>
         `/iot/modules/zigbee/chips/${id}/device_permit_to_join/`,
     },
+    JSON_CONFIGURATION: '/chip_manager/chips/json_configuration/',
   },
   DEVICE: {
     SENSOR_DETAIL: (id) => `/property_manager/devices/${id}/`,

package/src/configs/AccessibilityLabel.js

@@ -238,6 +238,7 @@ export default {
   BUTTON_EDIT_SCRIPT_ACTION: 'BUTTON_EDIT_SCRIPT_ACTION',
   BUTTON_ADD_SCRIPT_ACTION: 'BUTTON_ADD_SCRIPT_ACTION',
   ICON_CLOSE: 'ICON_CLOSE',
+  ICON_MORE: 'ICON_MORE',
   ICON_ARROW_RIGHT: 'ICON_ARROW_RIGHT',
 
   // Parking input maunaly spot

package/src/configs/BLE.js

@@ -6,4 +6,5 @@ export default {
   BLE_RESPONSE_OK: 'OK',
   BLE_RESPONSE_FAILED: 'FAILED',
   BLE_LISTER_RESPONSE_CONTROL: 'LISTER_RESPONSE_CONTROL',
+  BLE_REQUEST_ONE_TIME_CODE: 'cf153c1f-bc0d-11ed-afa1-0242ac120002',
 };

package/src/context/actionType.ts

@@ -36,11 +36,11 @@ export const Action = {
   IS_CHECK_CLEAR_CACHE_UNITS: 'IS_CHECK_CLEAR_CACHE_UNITS',
   DELETE_UNIT_SUCCESSFULLY: 'DELETE_UNIT_SUCCESSFULLY',
   RESET_DELETE_UNIT_ACTION: 'RESET_DELETE_UNIT_ACTION',
-  // NOTE: DEV MODE
   SET_WIDGET_DRAGGING: 'SET_WIDGET_DRAGGING',
   SET_IS_EDITING_TEMPLATE: 'SET_IS_EDITING_TEMPLATE',
   SET_IS_IN_EDIT_TEMPLATE_SCREEN: 'SET_IS_IN_EDIT_TEMPLATE_SCREEN',
   LOGOUT: 'LOGOUT',
+  SET_APP_STATE_CHANGE: 'SET_APP_STATE_CHANGE',
 };
 
 export type AuthData = {
@@ -101,6 +101,7 @@ export type AppType = {
   isLockWhenPickColor: boolean;
   isNeedUpdateCache: boolean;
   isDeleteUnitSuccessFully: boolean;
+  appState: string;
 };
 
 export type IoTType = {

package/src/context/mockStore.ts

@@ -92,6 +92,7 @@ export const mockSCStore = (data: ContextData): ContextData => {
       isConnectWifiGateway: false,
       isNetworkConnected: true,
       isLockWhenPickColor: false,
+      appState: 'active',
       ...data.app,
     },
     unit: {

package/src/context/reducer.ts

@@ -16,6 +16,7 @@ import {
 } from './actionType';
 import _ from 'lodash';
 import { STORAGE_KEY, removeMultiple } from '../utils/Storage.js';
+import { AppState } from 'react-native';
 
 export type ContextData = {
   auth: AuthData;
@@ -71,6 +72,7 @@ export const initialState = {
     isEmergencyPopupScreen: false,
     isNeedUpdateCache: false,
     isDeleteUnitSuccessFully: false,
+    appState: AppState.currentState,
   },
   iot: {
     bluetooth: {
@@ -394,7 +396,7 @@ export const reducer = (currentState: ContextData, action: Action) => {
           ...currentState.iot,
           internet: {
             ...currentState.iot.internet,
-            statuses: newStatuses,
+            statuses: JSON.parse(JSON.stringify(newStatuses)),
           },
         },
       };
@@ -527,6 +529,15 @@ export const reducer = (currentState: ContextData, action: Action) => {
         },
       };
 
+    case Action.SET_APP_STATE_CHANGE:
+      return {
+        ...currentState,
+        app: {
+          ...currentState.app,
+          appState: payload,
+        },
+      };
+
     default:
       return currentState;
   }

package/src/hooks/Explore/useKeyboardAnimated.js

@@ -18,11 +18,17 @@ const useKeyboardAnimated = (tabHeight = 0) => {
   );
 
   useEffect(() => {
-    Keyboard.addListener('keyboard' + action + 'Hide', _keyboardWillHide);
-    Keyboard.addListener('keyboard' + action + 'Show', _keyboardWillShow);
+    const keyboardDidHide = Keyboard.addListener(
+      'keyboard' + action + 'Hide',
+      _keyboardWillHide
+    );
+    const keyboardDidShow = Keyboard.addListener(
+      'keyboard' + action + 'Show',
+      _keyboardWillShow
+    );
     return () => {
-      Keyboard.removeListener('keyboard' + action + 'Show', _keyboardWillShow);
-      Keyboard.removeListener('keyboard' + action + 'Hide', _keyboardWillHide);
+      keyboardDidHide?.remove();
+      keyboardDidShow?.remove();
     };
   }, [_keyboardWillHide, _keyboardWillShow, tabHeight]);