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

package/src/commons/Header/HeaderCustom.js

@@ -21,6 +21,9 @@ const HeaderCustom = ({
   rightComponent,
   onGoBack,
   onClose,
+  iconLeft,
+  wrapTitleStyle,
+  iconBackStyle,
 }) => {
   const t = useTranslations();
   const { goBack } = useNavigation();
@@ -41,9 +44,12 @@ const HeaderCustom = ({
   return (
     <View style={[styles.wrap, isShowSeparator && styles.separator]}>
       <TouchableOpacity style={styles.buttonBack} onPress={handleGoback}>
-        <Image source={Images.arrowBack} style={styles.iconBack} />
+        <Image
+          source={iconLeft || Images.arrowBack}
+          style={[styles.iconBack, iconBackStyle]}
+        />
       </TouchableOpacity>
-      <View style={styles.wrapTitle}>
+      <View style={[styles.wrapTitle, wrapTitleStyle]}>
         <Text
           style={[styles.title, titleStyles, !isShowRight && styles.title2]}
           numberOfLines={1}

package/src/commons/HeaderAni/index.js

@@ -6,7 +6,7 @@ import { getStatusBarHeight } from 'react-native-iphone-x-helper';
 
 import Text from '../../commons/Text';
 import { Colors, Constants } from '../../configs';
-import { TESTID } from '../../configs/Constants';
+import { AccessibilityLabel } from '../../configs/Constants';
 
 const screenHeight = Constants.height;
 const default_height = 44;
@@ -93,8 +93,7 @@ const HeaderAni = memo(
           <TouchableOpacity
             style={styles.btnBack}
             onPress={onPressLeft}
-            testID={TESTID.ICON_BACK}
-            accessibilityLabel={TESTID.ICON_BACK}
+            accessibilityLabel={AccessibilityLabel.ICON_BACK}
           >
             <Icon name={'left'} size={27} color={Colors.Gray9} />
           </TouchableOpacity>

package/src/commons/MediaPlayerDetail/index.js

@@ -21,7 +21,7 @@ import { Colors, Constants, Images } from '../../configs';
 import { colorOpacity } from '../../utils/Converter/color';
 import styles from './Styles/MediaPlayerDetailStyles';
 import FImage from '../../commons/FImage';
-import { TESTID } from '../../configs/Constants';
+import { AccessibilityLabel } from '../../configs/Constants';
 import { SCContext, useSCContextSelector } from '../../context';
 import { Action } from '../../context/actionType';
 
@@ -155,7 +155,7 @@ const MediaPlayerDetail = ({
         activeOpacity={1}
         style={styles.videoBtn}
         onPress={onTapGoDetail}
-        testID={TESTID.SUB_UNIT_GO_DETAIL}
+        accessibilityLabel={AccessibilityLabel.SUB_UNIT_GO_DETAIL}
       >
         {paused ? (
           <View style={[styles.player, style]}>

package/src/commons/MenuActionList/index.js

@@ -4,7 +4,7 @@ import { getBottomSpace } from 'react-native-iphone-x-helper';
 
 import { Colors } from '../../configs';
 import Text from '../../commons/Text';
-import { TESTID } from '../../configs/Constants';
+import { AccessibilityLabel } from '../../configs/Constants';
 import { ModalCustom } from '../Modal';
 
 const keyExtractor = (item) => item.id.toString();
@@ -22,7 +22,7 @@ const MenuActionList = memo(
       ({ item }) => {
         return (
           <TouchableOpacity
-            testID={TESTID.MENU_ACTION_LIST_TOUCHABLE}
+            accessibilityLabel={AccessibilityLabel.MENU_ACTION_LIST_TOUCHABLE}
             onPress={onPress(item)}
             style={styles.item}
           >

package/src/commons/MenuActionMore/index.js

@@ -4,7 +4,7 @@ import Popover from '../Popover';
 
 import styles from './MenuActionMoreStyles';
 import Text from '../Text';
-import { TESTID } from '../../configs/Constants';
+import { AccessibilityLabel } from '../../configs/Constants';
 import { useStatusBarPreview } from '../../hooks/Common/useStatusBar';
 import { Colors } from '../../configs';
 
@@ -19,7 +19,7 @@ const MenuActionMore = memo(
     isTextCenter = true,
     idLabelPopover,
     idLabelScrollView,
-    idLabelItem = TESTID.SUB_UNIT_NAME,
+    idLabelItem = AccessibilityLabel.SUB_UNIT_NAME,
   }) => {
     const [isDisable, setIsDisable] = useState(false);
     const onPress = useCallback(
@@ -65,13 +65,14 @@ 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>
+                <Text style={[styles.modalHeaderText, item?.textStyle]}>
+                  {item?.text}
+                </Text>
               </TouchableOpacity>
             );
           })}

package/src/commons/NavBar/index.js

@@ -5,7 +5,7 @@ import { View, TouchableOpacity } from 'react-native';
 import styles from './NavBarStyles';
 import { usePopover } from '../../hooks/Common';
 import { Colors } from '../../configs';
-import { TESTID } from '../../configs/Constants';
+import { AccessibilityLabel } from '../../configs/Constants';
 import Station from '../../screens/Unit/Station';
 import MenuActionMore from '../MenuActionMore';
 
@@ -39,7 +39,6 @@ const NavBar = memo(
             style={styles.btnBack}
             onPress={handleShowMenuAction}
             ref={refMenuAction}
-            testID={TESTID.NAVBAR_ICON_BARS}
             accessibilityLabel={idLabelIconBars}
           >
             <Icon name={'bars'} size={19} color={Colors.Black} />
@@ -52,7 +51,7 @@ const NavBar = memo(
           childRef={childRef}
           onItemClick={onSnapToItem}
           isTextCenter={false}
-          testID={TESTID.NAVBAR_MENU_ACTION_MORE}
+          accessibilityLabel={AccessibilityLabel.NAVBAR_MENU_ACTION_MORE}
           wrapStyle={styles.wrapStyle}
           idLabelScrollView={idLabelScrollView}
           idLabelItem={idLabelItem}

package/src/commons/OneTapTemplate/NumberUpDownActionTemplate.js

@@ -8,7 +8,7 @@ import { Colors } from '../../configs';
 import SelectActionCard from '../SelectActionCard';
 import Text from '../Text';
 import { useConfigGlobalState } from '../../iot/states';
-import { TESTID } from '../../configs/Constants';
+import { AccessibilityLabel } from '../../configs/Constants';
 import { ModalCustom } from '../Modal';
 
 const NumberUpDownActionTemplate = memo(({ data, onSelectAction }) => {
@@ -28,7 +28,7 @@ const NumberUpDownActionTemplate = memo(({ data, onSelectAction }) => {
       setValue(valueDefault);
       return;
     }
-    const configValue = configValues[config];
+    const configValue = configValues[config]?.value;
     if (configValue !== null && configValue !== undefined) {
       setValue(configValue);
     } else {
@@ -86,7 +86,9 @@ const NumberUpDownActionTemplate = memo(({ data, onSelectAction }) => {
             <View style={styles.modalContent}>
               <TouchableOpacity
                 onPress={onPressDown}
-                testID={TESTID.NUMBER_UP_DOWN_ACTION_DOWN}
+                accessibilityLabel={
+                  AccessibilityLabel.NUMBER_UP_DOWN_ACTION_DOWN
+                }
               >
                 <IconOutline name="down" size={32} color={Colors.Primary} />
               </TouchableOpacity>
@@ -94,13 +96,15 @@ const NumberUpDownActionTemplate = memo(({ data, onSelectAction }) => {
                 type="H2"
                 bold
                 style={styles.textTemperature}
-                testID={TESTID.NUMBER_UP_DOWN_ACTION_TEXT}
+                accessibilityLabel={
+                  AccessibilityLabel.NUMBER_UP_DOWN_ACTION_TEXT
+                }
               >
                 {text_format.replace('{number}', value)}
               </Text>
               <TouchableOpacity
                 onPress={onPressUp}
-                testID={TESTID.NUMBER_UP_DOWN_ACTION_UP}
+                accessibilityLabel={AccessibilityLabel.NUMBER_UP_DOWN_ACTION_UP}
               >
                 <IconOutline name="up" size={32} color={Colors.Primary} />
               </TouchableOpacity>
@@ -118,7 +122,9 @@ const NumberUpDownActionTemplate = memo(({ data, onSelectAction }) => {
               </TouchableOpacity>
               <TouchableOpacity
                 onPress={onPressDone}
-                testID={TESTID.NUMBER_UP_DOWN_ACTION_DONE}
+                accessibilityLabel={
+                  AccessibilityLabel.NUMBER_UP_DOWN_ACTION_DONE
+                }
               >
                 <Text
                   type="H4"

package/src/commons/OneTapTemplate/OptionsDropdownActionTemplate.js

@@ -8,7 +8,7 @@ import styles from './OptionsDropdownActionTemplateStyles';
 import { Colors } from '../../configs';
 import SelectActionCard from '../SelectActionCard';
 import Text from '../Text';
-import { TESTID } from '../../configs/Constants';
+import { AccessibilityLabel } from '../../configs/Constants';
 
 const OptionsDropdownActionTemplate = memo(({ data, onSelectAction }) => {
   const t = useTranslations();
@@ -66,7 +66,9 @@ const OptionsDropdownActionTemplate = memo(({ data, onSelectAction }) => {
                   <TouchableOpacity
                     style={styles.flexRow}
                     onPress={() => handleOnPressItem(item, index)}
-                    testID={TESTID.OPTIONS_DROPDOWN_ACTION_CHOOSING_ITEM}
+                    accessibilityLabel={
+                      AccessibilityLabel.OPTIONS_DROPDOWN_ACTION_CHOOSING_ITEM
+                    }
                   >
                     <RadioCircle active={index === activeAction} />
                     <Text type="H4" style={styles.textContent}>
@@ -90,7 +92,9 @@ const OptionsDropdownActionTemplate = memo(({ data, onSelectAction }) => {
               </TouchableOpacity>
               <TouchableOpacity
                 onPress={onPressDone}
-                testID={TESTID.OPTIONS_DROPDOWN_ACTION_DONE}
+                accessibilityLabel={
+                  AccessibilityLabel.OPTIONS_DROPDOWN_ACTION_DONE
+                }
                 disabled={activeAction < 0}
               >
                 <Text

package/src/commons/OneTapTemplate/StatesGridActionTemplate.js

@@ -4,7 +4,7 @@ import { View, TouchableOpacity } from 'react-native';
 import styles from './StatesGridActionTemplateStyles';
 import SelectActionCard from '../SelectActionCard';
 import Text from '../Text';
-import { TESTID } from '../../configs/Constants';
+import { AccessibilityLabel } from '../../configs/Constants';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 import { ModalCustom } from '../Modal';
 
@@ -50,7 +50,9 @@ const StatesGridActionTemplate = memo(({ data, onSelectAction }) => {
               <TouchableOpacity
                 key={index}
                 onPress={() => hanleSelectAction(item)}
-                testID={TESTID.STATES_GRID_ACTION_GRID_ITEM}
+                accessibilityLabel={
+                  AccessibilityLabel.STATES_GRID_ACTION_GRID_ITEM
+                }
               >
                 <Text type="H4" style={styles.textwithline}>
                   {item.text}

package/src/commons/OneTapTemplate/__test__/NumberUpDownActionTemplate.test.js

@@ -6,7 +6,7 @@ import NumberUpDownActionTemplate from '../NumberUpDownActionTemplate';
 
 import { TouchableOpacity } from 'react-native';
 import Text from '../../Text';
-import { TESTID } from '../../../configs/Constants';
+import { AccessibilityLabel } from '../../../configs/Constants';
 
 jest.mock('react', () => {
   return {
@@ -47,13 +47,14 @@ describe('Test NumberUpDownActionTemplate', () => {
     const instance = tree.root;
     const touchableOpacity = instance.find(
       (item) =>
-        item.props.testID === TESTID.NUMBER_UP_DOWN_ACTION_DOWN &&
+        item.props.accessibilityLabel ===
+          AccessibilityLabel.NUMBER_UP_DOWN_ACTION_DOWN &&
         item.type === TouchableOpacity
     );
     const textElement = instance.find(
       (item) =>
-        item.props.testID === TESTID.NUMBER_UP_DOWN_ACTION_TEXT &&
-        item.type === Text
+        item.props.accessibilityLabel ===
+          AccessibilityLabel.NUMBER_UP_DOWN_ACTION_TEXT && item.type === Text
     );
     act(() => {
       touchableOpacity.props.onPress();
@@ -68,13 +69,14 @@ describe('Test NumberUpDownActionTemplate', () => {
     const instance = tree.root;
     const touchableOpacity = instance.find(
       (item) =>
-        item.props.testID === TESTID.NUMBER_UP_DOWN_ACTION_UP &&
+        item.props.accessibilityLabel ===
+          AccessibilityLabel.NUMBER_UP_DOWN_ACTION_UP &&
         item.type === TouchableOpacity
     );
     const textElement = instance.find(
       (item) =>
-        item.props.testID === TESTID.NUMBER_UP_DOWN_ACTION_TEXT &&
-        item.type === Text
+        item.props.accessibilityLabel ===
+          AccessibilityLabel.NUMBER_UP_DOWN_ACTION_TEXT && item.type === Text
     );
     act(() => {
       touchableOpacity.props.onPress();
@@ -89,7 +91,8 @@ describe('Test NumberUpDownActionTemplate', () => {
     const instance = tree.root;
     const touchableOpacity = instance.find(
       (item) =>
-        item.props.testID === TESTID.NUMBER_UP_DOWN_ACTION_DONE &&
+        item.props.accessibilityLabel ===
+          AccessibilityLabel.NUMBER_UP_DOWN_ACTION_DONE &&
         item.type === TouchableOpacity
     );
     act(() => {

package/src/commons/OneTapTemplate/__test__/OptionsDropdownActionTemplate.test.js

@@ -6,7 +6,7 @@ import OptionsDropdownActionTemplate from '../OptionsDropdownActionTemplate';
 import { RadioCircle } from '../..';
 
 import { TouchableOpacity } from 'react-native';
-import { TESTID } from '../../../configs/Constants';
+import { AccessibilityLabel } from '../../../configs/Constants';
 
 jest.mock('react', () => {
   return {
@@ -82,7 +82,8 @@ describe('Test OptionsDropdownActionTemplate', () => {
     const instance = tree.root;
     const touchOpacity = instance.findAll(
       (item) =>
-        item.props.testID === TESTID.OPTIONS_DROPDOWN_ACTION_CHOOSING_ITEM &&
+        item.props.accessibilityLabel ===
+          AccessibilityLabel.OPTIONS_DROPDOWN_ACTION_CHOOSING_ITEM &&
         item.type === TouchableOpacity
     );
     expect(touchOpacity).toHaveLength(7);
@@ -95,7 +96,8 @@ describe('Test OptionsDropdownActionTemplate', () => {
     const instance = tree.root;
     const touchOpacity = instance.findAll(
       (item) =>
-        item.props.testID === TESTID.OPTIONS_DROPDOWN_ACTION_CHOOSING_ITEM &&
+        item.props.accessibilityLabel ===
+          AccessibilityLabel.OPTIONS_DROPDOWN_ACTION_CHOOSING_ITEM &&
         item.type === TouchableOpacity
     );
     const radioCircle = instance.findAllByType(RadioCircle);
@@ -113,12 +115,14 @@ describe('Test OptionsDropdownActionTemplate', () => {
     const instance = tree.root;
     const selectOptions = instance.findAll(
       (item) =>
-        item.props.testID === TESTID.OPTIONS_DROPDOWN_ACTION_CHOOSING_ITEM &&
+        item.props.accessibilityLabel ===
+          AccessibilityLabel.OPTIONS_DROPDOWN_ACTION_CHOOSING_ITEM &&
         item.type === TouchableOpacity
     );
     const touchOpacity = instance.find(
       (item) =>
-        item.props.testID === TESTID.OPTIONS_DROPDOWN_ACTION_DONE &&
+        item.props.accessibilityLabel ===
+          AccessibilityLabel.OPTIONS_DROPDOWN_ACTION_DONE &&
         item.type === TouchableOpacity
     );
 

package/src/commons/OneTapTemplate/__test__/StatesGridActionTemplate.test.js

@@ -5,7 +5,7 @@ import { mockSCStore } from '../../../context/mockStore';
 import StatesGridActionTemplate from '../StatesGridActionTemplate';
 
 import { TouchableOpacity } from 'react-native';
-import { TESTID } from '../../../configs/Constants';
+import { AccessibilityLabel } from '../../../configs/Constants';
 
 jest.mock('react', () => {
   return {
@@ -71,7 +71,8 @@ describe('Test StatesGridActionTempalte', () => {
     const instance = tree.root;
     const touchOpacity = instance.findAll(
       (item) =>
-        item.props.testID === TESTID.STATES_GRID_ACTION_GRID_ITEM &&
+        item.props.accessibilityLabel ===
+          AccessibilityLabel.STATES_GRID_ACTION_GRID_ITEM &&
         item.type === TouchableOpacity
     );
     expect(touchOpacity).toHaveLength(4);
@@ -84,7 +85,8 @@ describe('Test StatesGridActionTempalte', () => {
     const instance = tree.root;
     const touchOpacity = instance.findAll(
       (item) =>
-        item.props.testID === TESTID.STATES_GRID_ACTION_GRID_ITEM &&
+        item.props.accessibilityLabel ===
+          AccessibilityLabel.STATES_GRID_ACTION_GRID_ITEM &&
         item.type === TouchableOpacity
     );
     expect(touchOpacity).toHaveLength(4);

package/src/commons/Popover/index.js

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

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { create } from 'react-test-renderer';
 import { act } from 'react-test-renderer';
 import PreventAccess from '..';
-import { TESTID } from '../../../configs/Constants';
+import { AccessibilityLabel } from '../../../configs/Constants';
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
 import Text from '../../Text';
@@ -43,10 +43,12 @@ describe('Test PreventAccess.test', () => {
     const text = instance.findAllByType(Text);
     expect(text).toHaveLength(5);
     const button1 = instance.find(
-      (el) => el.props.testID === TESTID.BUTTON_PREVENT_ACCESS
+      (el) =>
+        el.props.accessibilityLabel === AccessibilityLabel.BUTTON_PREVENT_ACCESS
     );
     const button2 = instance.find(
-      (el) => el.props.testID === TESTID.TEXT_PREVENT_ACCESS
+      (el) =>
+        el.props.accessibilityLabel === AccessibilityLabel.TEXT_PREVENT_ACCESS
     );
     act(() => {
       button1.props.onBackButtonPress();

package/src/commons/PreventAccess/index.js

@@ -7,7 +7,7 @@ import t from '../../hooks/Common/useTranslations';
 import Text from '../Text';
 import { Colors } from '../../configs';
 import { styles } from './styles';
-import { TESTID } from '../../configs/Constants';
+import { AccessibilityLabel } from '../../configs/Constants';
 
 const PreventAccess = memo(({ headerBodyText, visible, hidePreventAccess }) => {
   const { goBack } = useNavigation();
@@ -38,7 +38,7 @@ const PreventAccess = memo(({ headerBodyText, visible, hidePreventAccess }) => {
       transparent={true}
       onBackButtonPress={handleBackPress}
       style={styles.container}
-      testID={TESTID.BUTTON_PREVENT_ACCESS}
+      accessibilityLabel={AccessibilityLabel.BUTTON_PREVENT_ACCESS}
     >
       <View style={styles.popoverStyle}>
         <View style={styles.actionTextWrap}>
@@ -51,7 +51,7 @@ const PreventAccess = memo(({ headerBodyText, visible, hidePreventAccess }) => {
         </View>
         <View style={styles.endOfText}>
           <Text
-            testID={TESTID.TEXT_PREVENT_ACCESS}
+            accessibilityLabel={AccessibilityLabel.TEXT_PREVENT_ACCESS}
             size={16}
             bold
             color={Colors.Primary}

package/src/commons/{Connecting → Processing}/__test__/Connecting.test.js

@@ -1,24 +1,25 @@
 import React from 'react';
 import renderer, { act } from 'react-test-renderer';
-import Connecting from '../index';
+import Processing from '../index';
 import Text from '../../Text';
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
 
 const wrapComponent = (route, isLoading, isConnect, isPercentConnect) => (
   <SCProvider initState={mockSCStore({})}>
-    <Connecting
+    <Processing
       route={route}
       isLoading={isLoading}
       isConnect={isConnect}
       isPercentConnect={isPercentConnect}
+      onReady={() => {}}
     />
   </SCProvider>
 );
-describe('Test Connecting', () => {
+describe('Test Processing', () => {
   let tree;
 
-  test('create Connecting', () => {
+  test('create Processing', () => {
     act(() => {
       tree = renderer.create(wrapComponent());
     });

package/src/commons/Processing/index.js

@@ -0,0 +1,93 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { View } from 'react-native';
+import * as Progress from 'react-native-progress';
+import Text from '../Text';
+import { Colors, Constants } from '../../configs';
+import styles from './styles';
+import { HeaderCustom } from '../Header';
+import { getPusher } from '../../utils/Pusher';
+import uuid from 'uuid';
+
+const Processing = ({ title, fail, initState, complete, onReady }) => {
+  const channelName = useMemo(() => {
+    return 'cache-' + uuid.v4();
+  }, []);
+
+  const [state, setState] = useState(initState);
+  const [percent, setPercent] = useState(0);
+
+  const processMessage = useCallback(
+    (
+      channel,
+      {
+        percent: newPercent,
+        state: newState,
+        success: isSuccess,
+        fail: isFail,
+        data,
+      }
+    ) => {
+      if (isSuccess) {
+        channel.unbind('progress');
+        setPercent(1);
+        complete(data);
+        return;
+      }
+      if (isFail) {
+        channel.unbind('progress');
+        fail(data?.message);
+        return;
+      }
+      setPercent(newPercent);
+      setState(newState);
+    },
+    [complete, fail]
+  );
+
+  useEffect(() => {
+    const channel = getPusher().subscribe(channelName);
+    channel.bind('progress', (message) => {
+      processMessage(channel, message);
+    });
+
+    return () => {
+      getPusher().unsubscribe(channelName);
+    };
+  }, [channelName, complete, fail, processMessage]);
+
+  useEffect(() => {
+    onReady(channelName);
+  }, [onReady, channelName]);
+
+  return (
+    <View style={styles.wrap}>
+      <View style={styles.screen}>
+        <HeaderCustom title={title} isShowSeparator />
+        <View style={styles.body}>
+          <View style={styles.connecting}>
+            <Text type="H4" bold>
+              {state}
+            </Text>
+          </View>
+          <View style={styles.percentLoad}>
+            <Progress.Bar
+              progress={percent}
+              animated={true}
+              color={Colors.Primary}
+              indeterminateAnimationDuration={1000}
+              height={7}
+              width={Constants.width - 80}
+              useNativeDriver={true}
+            />
+            <Text style={styles.textPercentLoad}>{`${parseInt(
+              percent * 100,
+              10
+            )}%`}</Text>
+          </View>
+        </View>
+      </View>
+    </View>
+  );
+};
+
+export default Processing;

package/src/commons/{Connecting → Processing}/styles.js

@@ -1,7 +1,15 @@
 import { StyleSheet } from 'react-native';
-import { Constants } from '../../configs';
+import { Colors, Constants } from '../../configs';
+import { getStatusBarHeight } from 'react-native-iphone-x-helper';
 
 export default StyleSheet.create({
+  wrap: {
+    paddingTop: getStatusBarHeight(true),
+    backgroundColor: Colors.White,
+    width: '100%',
+    height: '100%',
+    justifyContent: 'space-between',
+  },
   screen: {
     flex: 1,
     width: '100%',