@eohjsc/react-native-smart-city 0.3.68 → 0.3.69

package/assets/images/Device/inactive-icon.svg

@@ -0,0 +1,22 @@
+<svg width="44" height="43" viewBox="0 0 44 43" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_5351_7199)">
+<path d="M23.1324 13.4136C18.9141 12.7994 14.9964 15.7213 14.3825 19.9399C13.7684 24.1583 16.6902 28.0756 20.9089 28.6898C25.1256 29.3037 29.0423 26.3837 29.6581 22.1673C30.2704 17.9486 27.3501 14.0313 23.1324 13.4136ZM16.7548 23.1361C16.3796 23.2335 15.9967 23.0083 15.8994 22.6331C15.0751 19.4398 16.8447 16.1495 19.9635 15.0772C20.3288 14.9477 20.73 15.1389 20.8594 15.5044C20.9889 15.8697 20.7974 16.2706 20.4322 16.4C20.4283 16.4013 20.4245 16.4029 20.4203 16.4042C17.9944 17.2378 16.6173 19.7967 17.2578 22.2807C17.3552 22.6559 17.13 23.0388 16.7548 23.1361ZM21.0448 26.625C20.9551 26.9205 20.6824 27.1225 20.3734 27.1225C20.3043 27.1225 20.2353 27.1123 20.1691 27.0917C19.1335 26.7756 18.1965 26.1981 17.4486 25.4146C17.1811 25.1342 17.1917 24.6899 17.4718 24.4223C17.7522 24.1547 18.1965 24.1653 18.464 24.4454C19.0445 25.0558 19.7724 25.5058 20.5777 25.7528C20.9468 25.8656 21.1556 26.2552 21.0448 26.625Z" fill="#262626"/>
+<path d="M30.7895 15.1966L39.9143 9.94971L40.6136 11.1662L31.4892 16.4131L30.7895 15.1966Z" fill="#262626"/>
+<path d="M21.3313 10.5253L21.3522 0L22.7556 0.00289103L22.7347 10.5282L21.3313 10.5253Z" fill="#262626"/>
+<path d="M3.45079 11.1005L4.1546 9.88623L13.261 15.1649L12.5572 16.3788L3.45079 11.1005Z" fill="#262626"/>
+<path d="M3.41579 30.9368L12.5393 25.689L13.2392 26.9055L4.11575 32.1533L3.41579 30.9368Z" fill="#262626"/>
+<path d="M21.2757 42.1025L21.2966 31.5771L22.7001 31.5797L22.6792 42.1054L21.2757 42.1025Z" fill="#262626"/>
+<path d="M30.7693 26.9359L31.4731 25.7217L40.5798 31.0001L39.876 32.2143L30.7693 26.9359Z" fill="#262626"/>
+<path d="M26.6674 11.5841L29.8244 6.11426L31.0399 6.81582L27.8829 12.2857L26.6674 11.5841Z" fill="#262626"/>
+<path d="M12.9838 6.81875L14.1984 6.11719L17.3573 11.5858L16.1428 12.2873L12.9838 6.81875Z" fill="#262626"/>
+<path d="M5.17383 20.3521H11.4891V21.7555H5.17383V20.3521Z" fill="#262626"/>
+<path d="M12.9893 35.2854L16.1463 29.8159L17.3618 30.5175L14.2048 35.987L12.9893 35.2854Z" fill="#262626"/>
+<path d="M26.6715 30.5145L27.8861 29.813L31.045 35.2812L29.8305 35.9828L26.6715 30.5145Z" fill="#262626"/>
+<path d="M32.5402 20.3477H38.8555V21.7511H32.5402V20.3477Z" fill="#262626"/>
+</g>
+<defs>
+<clipPath id="clip0_5351_7199">
+<rect width="42.1053" height="42.1053" fill="white" transform="translate(0.947388)"/>
+</clipPath>
+</defs>
+</svg>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eohjsc/react-native-smart-city",
   "title": "React Native Smart Home",
-  "version": "0.3.68",
+  "version": "0.3.69",
   "description": "TODO",
   "main": "index.js",
   "files": [
@@ -147,7 +147,7 @@
     "querystring": "^0.2.0",
     "react-content-loader": "^6.0.3",
     "react-dom": "^17.0.1",
-    "react-hooks-global-state": "^1.0.1",
+    "react-hooks-global-state": "^2.0.0",
     "react-i18next": "^11.8.12",
     "react-native-alert-async": "^1.0.5",
     "react-native-android-keyboard-adjust": "^1.2.0",
@@ -156,7 +156,7 @@
     "react-native-animated-ellipsis": "^2.0.0",
     "react-native-appearance": "^0.3.4",
     "react-native-base64": "^0.1.0",
-    "react-native-ble-plx": "^2.0.1",
+    "react-native-ble-plx": "^2.0.3",
     "react-native-bootsplash": "^2.2.5",
     "react-native-calendars": "^1.1266.0",
     "react-native-chart-kit": "^6.5.0",

package/src/commons/ActionGroup/ColorPickerTemplateStyles.js

@@ -9,6 +9,7 @@ export default StyleSheet.create({
   viewPickColor: {
     justifyContent: 'center',
     alignItems: 'center',
+    marginBottom: 16,
   },
   colorPicker: {
     width: '100%',

package/src/commons/ActionGroup/NumberUpDownActionTemplateStyle.js

@@ -3,15 +3,13 @@ import { Colors } from '../../configs';
 
 export default StyleSheet.create({
   wrap: {
-    paddingVertical: 25,
-    marginHorizontal: 20,
-    marginTop: 20,
+    padding: 16,
+    marginHorizontal: 16,
+    marginBottom: 16,
     borderWidth: 1,
     borderColor: Colors.Gray4,
     borderRadius: 10,
     flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
   },
   downButton: {
     marginRight: 60,
@@ -31,7 +29,7 @@ export default StyleSheet.create({
   controlPannel: {
     flex: 1,
     flexDirection: 'row',
-    justifyContent: 'center',
+    justifyContent: 'space-between',
     alignItems: 'center',
   },
 });

package/src/commons/ActionGroup/OnOffTemplate/OnOffButtonTemplate.js

@@ -37,7 +37,9 @@ const OnOffButtonTemplate = memo(
               <IconComponent
                 icon={icon}
                 iconSize={30}
-                color={isOn ? Colors.Green7 : Colors.Gray6}
+                active={isOn}
+                colorInActive={Colors.Gray6}
+                color={Colors.Green7}
               />
               <Text
                 style={[

package/src/commons/ActionGroup/OnOffTemplate/OnOffButtonTemplateStyle.js

@@ -1,18 +1,13 @@
-import { Colors, Device } from '../../../configs';
+import { Colors } from '../../../configs';
 import { StyleSheet } from 'react-native';
-import { standardizeCameraScreenSize } from '../../../utils/Utils';
-
-const { standardizeHeight } = standardizeCameraScreenSize(
-  Device.screenWidth - 32
-);
 
 export default StyleSheet.create({
   barrierControlContainer: {
-    marginTop: standardizeHeight / 3,
-    width: '100%',
+    width: 'auto',
     justifyContent: 'center',
     alignItems: 'center',
     padding: 20,
+    paddingVertical: 50,
   },
   bigCircle: {
     backgroundColor: Colors.Gray2,

package/src/commons/ActionGroup/OnOffTemplate/OnOffSimpleTemplateStyle.js

@@ -5,8 +5,7 @@ export default StyleSheet.create({
   wrap: {
     paddingVertical: 16,
     paddingHorizontal: 16,
-    marginHorizontal: 20,
-    marginTop: 20,
+    marginHorizontal: 16,
     borderWidth: 1,
     borderColor: Colors.Gray4,
     borderRadius: 10,

package/src/commons/ActionGroup/OnOffTemplate/index.js

@@ -1,4 +1,5 @@
 import React, { memo, useCallback, useEffect, useMemo, useState } from 'react';
+import { View } from 'react-native';
 import { DEVICE_TYPE } from '../../../configs/Constants';
 
 import { watchMultiConfigs } from '../../../iot/Monitor';
@@ -6,6 +7,7 @@ import { useConfigGlobalState } from '../../../iot/states';
 import { useUnwatchLGDeviceConfigControl } from '../../../hooks/IoT';
 import OnOffButtonTemplate from './OnOffButtonTemplate';
 import OnOffSimpleTemplate from './OnOffSimpleTemplate';
+import styles from './styles';
 
 let temp;
 
@@ -107,14 +109,14 @@ const OnOffTemplate = memo(({ actionGroup = {}, doAction, sensor }) => {
   }, [actionGroup]);
 
   return (
-    <>
+    <View style={styles.wrap}>
       <Component
         isOn={tempIsOn}
         triggerAction={triggerAction}
         actionGroup={actionGroup}
         disabled={!action_on_data && !action_off_data}
       />
-    </>
+    </View>
   );
 });
 

package/src/commons/ActionGroup/OnOffTemplate/styles.js

@@ -0,0 +1,7 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  wrap: {
+    marginBottom: 16,
+  },
+});

package/src/commons/ActionGroup/OneBigButtonTemplate.js

@@ -19,7 +19,12 @@ const OneBigButtonTemplate = memo(({ actionGroup = {}, doAction, sensor }) => {
       <View style={styles.barrierControlContainer}>
         <TouchableOpacity style={styles.bigCircle} onPress={onPressDoAction}>
           <View style={styles.smallCircle}>
-            <IconComponent icon={icon} iconSize={44} color={Colors.Green7} />
+            <IconComponent
+              icon={icon}
+              iconSize={44}
+              size={44}
+              color={Colors.Green7}
+            />
             <Text style={styles.textBig}>{text}</Text>
           </View>
         </TouchableOpacity>

package/src/commons/ActionGroup/OneBigButtonTemplateStyle.js

@@ -7,7 +7,7 @@ export default StyleSheet.create({
     justifyContent: 'center',
     paddingHorizontal: 8,
     paddingVertical: 16,
-    marginHorizontal: 20,
+    marginHorizontal: 16,
     marginTop: 20,
   },
   bigCircle: {

package/src/commons/ActionGroup/OptionsDropdownActionTemplate.js

@@ -122,7 +122,8 @@ const OptionsDropdownActionTemplate = ({
           <IconComponent
             icon={iconKit || icon}
             isSendingCommand={false}
-            size={17}
+            iconSize={27}
+            size={27}
             style={styles.marginRight}
           />
         )}

package/src/commons/ActionGroup/OptionsDropdownActionTemplateStyle.js

@@ -3,10 +3,9 @@ import { Colors } from '../../configs';
 
 export default StyleSheet.create({
   wrap: {
-    paddingVertical: 16,
-    paddingHorizontal: 16,
-    marginHorizontal: 20,
-    marginTop: 20,
+    padding: 16,
+    marginHorizontal: 16,
+    marginBottom: 16,
     borderWidth: 1,
     borderColor: Colors.Gray4,
     borderRadius: 10,

package/src/commons/ActionGroup/SliderRangeTemplate.js

@@ -75,21 +75,21 @@ const SliderRangeTemplate = memo(({ actionGroup = {}, doAction, sensor }) => {
         </Text>
       </View>
       <View style={styles.RightBrightness}>
-        <View style={styles.slider}>
-          <SliderRange
-            value={valueBrightness}
-            onSlidingComplete={onChangeBrightness}
-            onValueChange={setValueBrightness}
-            step={1}
-            minimumValue={0}
-            maximumValue={100}
-            thumbTintColor={Colors.Gray3}
-            minimumTrackTintColor={Colors.Primary}
-            maximumTrackTintColor={Colors.Gray4}
-            trackStyle={styles.trackSlider}
-            thumbStyle={styles.thumbSlider}
-          />
-        </View>
+        <SliderRange
+          style={styles.slider}
+          value={valueBrightness}
+          onSlidingComplete={onChangeBrightness}
+          onValueChange={setValueBrightness}
+          step={1}
+          minimumValue={0}
+          maximumValue={100}
+          thumbTintColor={Colors.Gray3}
+          minimumTrackTintColor={Colors.Primary}
+          maximumTrackTintColor={Colors.Gray4}
+          trackStyle={styles.trackSlider}
+          thumbStyle={styles.thumbSlider}
+        />
+
         <View style={styles.valuePercent}>
           <Text type="Label" style={styles.textValuePercent}>
             {`${valueBrightness}%`}

package/src/commons/ActionGroup/SliderRangeTemplateStyles.js

@@ -2,15 +2,16 @@ import { StyleSheet } from 'react-native';
 import { Colors } from '../../configs';
 
 export default StyleSheet.create({
-  wrap: {
-    flexDirection: 'row',
-    justifyContent: 'space-around',
-    paddingVertical: 30,
-  },
   viewBrightness: {
-    paddingTop: 16,
+    marginBottom: 16,
+    marginHorizontal: 16,
+    padding: 16,
     flexDirection: 'row',
-    justifyContent: 'space-between',
+    alignItems: 'center',
+    justifyContent: 'space-around',
+    borderWidth: 1,
+    borderColor: Colors.Gray4,
+    borderRadius: 10,
   },
   slider: {
     width: 131,
@@ -25,12 +26,12 @@ export default StyleSheet.create({
     height: 20,
   },
   valuePercent: {
-    width: 40,
+    width: 45,
     flexDirection: 'row',
     paddingLeft: 16,
   },
   textValuePercent: {
-    width: 50,
+    width: 45,
   },
   LeftBrightness: {
     flex: 1,
@@ -42,7 +43,6 @@ export default StyleSheet.create({
     paddingLeft: 8,
   },
   RightBrightness: {
-    flex: 1.2,
     flexDirection: 'row',
     alignItems: 'center',
   },

package/src/commons/ActionGroup/StatesGridActionTemplate.js

@@ -25,7 +25,7 @@ const buttonStyle = {
   },
 };
 
-const GridItem = ({ item, index, length, doAction, sensor, title }) => {
+const GridItem = ({ item, doAction, sensor }) => {
   const {
     active,
     text,
@@ -80,7 +80,10 @@ const GridItem = ({ item, index, length, doAction, sensor, title }) => {
     }
   }, [icon]);
   return (
-    <View accessibilityLabel={AccessibilityLabel.STATES_GRID_ACTION_GRID_ITEM}>
+    <View
+      accessibilityLabel={AccessibilityLabel.STATES_GRID_ACTION_GRID_ITEM}
+      style={styles.viewButton}
+    >
       <TouchableOpacity
         style={[styles.button, buttonOnOffStyle]}
         onPress={() => doActionAndWatchConfig(action_data)}
@@ -88,15 +91,14 @@ const GridItem = ({ item, index, length, doAction, sensor, title }) => {
         {!checkIcon && (
           <IconComponent
             icon={iconKit || icon}
-            isSendingCommand={false}
-            size={40}
-            iconSize={40}
-            color={'red'}
+            active={active}
+            color={Colors.White}
+            style={styles.iconComponent}
           />
         )}
         {checkIcon && <View>{iconSvg}</View>}
       </TouchableOpacity>
-      <Text center color={Colors.Gray8} style={styles.textMargin}>
+      <Text center color={Colors.Gray8}>
         {text}
       </Text>
     </View>
@@ -127,18 +129,23 @@ const StatesGridActionTemplate = ({
 
   return (
     <View style={styles.wrap}>
-      <Text type="H4" style={styles.textModeMargin}>
-        {title}
-      </Text>
-      <View style={styles.wrapOption}>
+      {!!title && (
+        <Text type="H4" style={styles.textModeMargin}>
+          {title}
+        </Text>
+      )}
+      <View
+        style={[
+          styles.wrapOption,
+          options?.length < 4 && styles.justifyContentAround,
+        ]}
+      >
         {options.map((item, index) => (
           <GridItem
             item={item}
             index={index}
-            length={options.length}
             doAction={doAction}
             sensor={sensor}
-            title={title}
           />
         ))}
       </View>

package/src/commons/ActionGroup/StatesGridActionTemplateStyle.js

@@ -3,16 +3,18 @@ import { Colors } from '../../configs';
 
 export default StyleSheet.create({
   wrap: {
-    paddingHorizontal: 8,
-    paddingVertical: 16,
-    marginHorizontal: 20,
+    display: 'flex',
+    justifyContent: 'space-between',
+    paddingTop: 16,
+    paddingBottom: 10,
+    marginHorizontal: 16,
+    marginBottom: 16,
     borderWidth: 1,
     borderColor: Colors.Gray4,
     borderTopRightRadius: 10,
     borderTopLeftRadius: 10,
     borderBottomRightRadius: 10,
     borderBottomLeftRadius: 10,
-    marginTop: 20,
   },
   wrapOption: {
     flex: 1,
@@ -21,20 +23,32 @@ export default StyleSheet.create({
     flexWrap: 'wrap',
     paddingHorizontal: 16,
   },
-  textMargin: {
-    marginTop: 8,
+  justifyContentAround: {
+    justifyContent: 'space-around',
   },
   textModeMargin: {
     marginBottom: 9,
     marginLeft: 16,
   },
+  viewButton: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
   button: {
-    width: 48,
-    height: 48,
-    padding: 3,
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 10,
     borderRadius: 5,
     borderWidth: 1,
     borderColor: Colors.Gray4,
     backgroundColor: Colors.White,
+    marginBottom: 8,
+  },
+  iconComponent: {
+    fontSize: 28,
+    width: 28,
+    height: 28,
   },
 });

package/src/commons/ActionGroup/ThreeButtonTemplate.js

@@ -82,8 +82,8 @@ const ThreeButtonTemplate = memo(({ actionGroup, doAction }) => {
   };
 
   return (
-    <>
-      <View style={styles.wrap}>
+    <View style={styles.wrap}>
+      <View style={styles.threeButton}>
         <TouchableOpacity
           accessibilityLabel={AccessibilityLabel.BUTTON_TEMPLATE_1}
           style={styles.buttonActionDoor}
@@ -125,7 +125,7 @@ const ThreeButtonTemplate = memo(({ actionGroup, doAction }) => {
             lock ? Colors.Primary : Colors.Gray6
           )}
       </View>
-    </>
+    </View>
   );
 });
 

package/src/commons/ActionGroup/ThreeButtonTemplateStyle.js

@@ -3,9 +3,17 @@ import { Colors } from '../../configs';
 
 export default StyleSheet.create({
   wrap: {
+    flex: 1,
+    marginBottom: 16,
+  },
+  threeButton: {
     flexDirection: 'row',
     justifyContent: 'space-around',
-    paddingVertical: 16,
+    padding: 16,
+    margin: 20,
+    borderWidth: 1,
+    borderColor: Colors.Gray4,
+    borderRadius: 10,
   },
   imageButton: {
     height: 32,

package/src/commons/ActionGroup/TimerActionTemplateStyles.js

@@ -5,7 +5,7 @@ export default StyleSheet.create({
   wrap: {
     paddingVertical: 16,
     paddingHorizontal: 16,
-    marginHorizontal: 20,
+    marginHorizontal: 16,
     marginTop: 20,
     borderWidth: 1,
     borderColor: Colors.Gray4,

package/src/commons/ActionGroup/TwoButtonTemplate/TwoButtonTemplateStyles.js

@@ -5,7 +5,7 @@ export default StyleSheet.create({
   wrap: {
     paddingVertical: 16,
     paddingHorizontal: 16,
-    marginHorizontal: 20,
+    marginHorizontal: 16,
     marginTop: 20,
     flex: 1,
     flexDirection: 'row',

package/src/commons/ActionGroup/__test__/OnOffButtonTemplate.test.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { act, create } from 'react-test-renderer';
 import OnOffTemplate from '../OnOffTemplate';
 import { mockSCStore } from '../../../context/mockStore';
@@ -10,11 +10,6 @@ const wrapComponent = (actionGroup, mockDoAction) => (
   </SCProvider>
 );
 
-jest.mock('react', () => ({
-  ...jest.requireActual('react'),
-  useState: jest.fn(),
-}));
-
 jest.mock('@react-navigation/native', () => {
   return {
     ...jest.requireActual('@react-navigation/native'),
@@ -58,11 +53,7 @@ describe('Test OneBigButtonTemplate', () => {
   };
   let wrapper;
 
-  const setState = jest.fn();
-  useState.mockImplementation((init) => [init, setState]);
-
-  const assertRender = async (state, text) => {
-    useState.mockImplementationOnce((init) => [state, setState]);
+  const assertRender = async () => {
     const mockDoAction = jest.fn();
 
     await act(async () => {
@@ -71,8 +62,8 @@ describe('Test OneBigButtonTemplate', () => {
 
     const renderJson = wrapper.toJSON();
 
-    expect(renderJson?.props?.visible).toEqual(false);
-    expect(renderJson?.type).toEqual('Modal');
+    expect(renderJson[1].props?.visible).toEqual(false);
+    expect(renderJson[1]?.type).toEqual('Modal');
   };
 
   it('render state on', async () => {
@@ -84,7 +75,6 @@ describe('Test OneBigButtonTemplate', () => {
   });
 
   const assertActionCall = async (state, action_data) => {
-    useState.mockImplementationOnce((init) => [state, setState]);
     const mockDoAction = jest.fn();
     await act(async () => {
       wrapper = create(wrapComponent(actionGroup, mockDoAction));

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

@@ -52,7 +52,7 @@ describe('Test StatesGridActionTemplate', () => {
     });
     const instance = tree.root;
     const Texts = instance.findAllByType(Text);
-    expect(Texts).toHaveLength(1);
+    expect(Texts).not.toHaveLength(1);
   });
 
   it('test render with params', async () => {

package/src/commons/ActionGroup/__test__/index.test.js

@@ -454,7 +454,7 @@ describe('Test ActionGroup', () => {
     });
     const instance = wrapper.root;
     const texts = instance.findAllByType(Text);
-    expect(texts).toHaveLength(5);
+    expect(texts).toHaveLength(4);
   });
 
   it('render OptionsDropdownActionTemplate', async () => {

package/src/commons/ActionGroup/index.js

@@ -1,4 +1,4 @@
-import React, { memo, useCallback, useMemo } from 'react';
+import React, { memo, useMemo } from 'react';
 import Text from '../Text';
 import OneBigButtonTemplate from './OneBigButtonTemplate';
 import ThreeButtonTemplate from './ThreeButtonTemplate';
@@ -13,9 +13,6 @@ import ColorPickerTemplate from './ColorPickerTemplate';
 import SliderRangeTemplate from './SliderRangeTemplate';
 import OnOffSmartLock from './OnOffSmartLock/OnOffSmartLock';
 import TwoButtonTemplate from './TwoButtonTemplate';
-import { CardDevMode } from '../DevMode';
-import t from '../../hooks/Common/useTranslations';
-import { useSCContextSelector } from '../../context';
 
 export const getActionComponent = (template) => {
   switch (template) {
@@ -54,28 +51,9 @@ export const getActionComponent = (template) => {
   }
 };
 
-const isWrap = (template) => {
-  switch (template) {
-    case 'OnOffSmartLockActionTemplate':
-      return true;
-    default:
-      return false;
-  }
-};
-
 const ActionGroup = (params = {}) => {
-  const { actionGroup = {}, id, item } = params;
+  const { actionGroup = {} } = params;
   const { template } = actionGroup;
-  const { isEditingTemplate } = useSCContextSelector((state) => state.devMode);
-
-  const getTitle = useCallback(() => {
-    switch (template) {
-      case 'OnOffSmartLockActionTemplate':
-        return isEditingTemplate ? 'label' : 'controller';
-      default:
-        return 'label';
-    }
-  }, [template, isEditingTemplate]);
 
   const ButtonGroupComponent = useMemo(() => {
     return getActionComponent(template);
@@ -84,13 +62,7 @@ const ActionGroup = (params = {}) => {
   return (
     <>
       {ButtonGroupComponent ? (
-        <CardDevMode
-          title={item?.label || t(getTitle())}
-          id={id}
-          isWrap={isWrap(template)}
-        >
-          <ButtonGroupComponent {...params} />
-        </CardDevMode>
+        <ButtonGroupComponent {...params} />
       ) : (
         <Text
           center

package/src/commons/CameraDevice/CameraDeviceStyles.js

@@ -1,4 +1,3 @@
-import { Device } from '../../configs';
 import { StyleSheet } from 'react-native';
 import { Colors } from '../../configs';
 
@@ -8,7 +7,7 @@ export default StyleSheet.create({
     marginTop: 8,
     marginBottom: 8,
     overflow: 'hidden',
-    width: Device.screenWidth - 32,
+    width: '100%',
     alignSelf: 'center',
   },
   image: {