@eohjsc/react-native-smart-city 0.4.44 → 0.4.46

package/README.md

@@ -3,7 +3,11 @@
 ## Getting started
 
 1. Install package dependencies:
-
+- Using [react-native-get-random-values](https://www.npmjs.com/package/react-native-get-random-values): `yarn add react-native-get-random-values`
+```
+// Add this line to your 'index.js'
+import 'react-native-get-random-values'
+```
 - Using [Yarn](https://yarnpkg.com/): `yarn add react-native-reanimated@^1.10.1`
 
 2. Install:

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eohjsc/react-native-smart-city",
   "title": "React Native Smart Home",
-  "version": "0.4.44",
+  "version": "0.4.46",
   "description": "TODO",
   "main": "index.js",
   "files": [
@@ -175,7 +175,6 @@
     "react-native-geocoder": "^0.5.0",
     "react-native-gesture-handler": "^2.10.0",
     "react-native-get-location": "^2.0.0",
-    "react-native-get-random-values": "^1.8.0",
     "react-native-image-crop-picker": "^0.37.2",
     "react-native-image-resizer": "^1.4.5",
     "react-native-input-credit-card": "^0.5.5",

package/src/Images/Common/pushpin-full.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.5855 9.18984L14.8105 3.41484C14.6582 3.2625 14.4589 3.1875 14.2597 3.1875C14.0605 3.1875 13.8613 3.2625 13.7089 3.41484L9.93317 7.19297C9.64723 7.16016 9.35895 7.14609 9.07066 7.14609C7.35504 7.14609 5.63941 7.71094 4.23082 8.84063C3.86988 9.12891 3.84176 9.67031 4.16754 9.99844L8.42613 14.257L3.3777 19.3008C3.31583 19.3623 3.27765 19.4436 3.26988 19.5305L3.1902 20.4023C3.1691 20.6227 3.34488 20.8102 3.56285 20.8102C3.57457 20.8102 3.58629 20.8102 3.59801 20.8078L4.46988 20.7281C4.5566 20.7211 4.63863 20.6813 4.69957 20.6203L9.74801 15.5719L14.0066 19.8305C14.1589 19.9828 14.3582 20.0578 14.5574 20.0578C14.7847 20.0578 15.0097 19.9594 15.1644 19.7672C16.4839 18.1195 17.0324 16.057 16.8097 14.0625L20.5855 10.2867C20.8879 9.98672 20.8879 9.49453 20.5855 9.18984Z" fill="#1890FF"/>
+</svg>

package/src/Images/Common/pushpin-outline.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.1236 7.6582L12.4395 2.8457C12.3159 2.71875 12.1543 2.65625 11.9927 2.65625C11.8311 2.65625 11.6695 2.71875 11.546 2.8457L8.48339 5.99414C8.25146 5.9668 8.01763 5.95508 7.7838 5.95508C6.39224 5.95508 5.00068 6.42578 3.85815 7.36719C3.78897 7.42426 3.73226 7.49567 3.69172 7.57677C3.65119 7.65786 3.62774 7.74682 3.62289 7.83784C3.61805 7.92887 3.63193 8.01992 3.66362 8.10507C3.69531 8.19021 3.7441 8.26755 3.80682 8.33203L7.26102 11.8809L3.16617 16.084C3.11599 16.1352 3.08503 16.203 3.07873 16.2754L3.01409 17.002C2.99698 17.1855 3.13956 17.3418 3.31636 17.3418C3.32586 17.3418 3.33537 17.3418 3.34487 17.3398L4.05206 17.2734C4.1224 17.2676 4.18893 17.2344 4.23836 17.1836L8.33321 12.9766L11.7874 16.5254C11.911 16.6523 12.0726 16.7148 12.2341 16.7148C12.4185 16.7148 12.601 16.6328 12.7265 16.4727C13.7968 15.0996 14.2416 13.3809 14.061 11.7188L17.1236 8.57227C17.3689 8.32227 17.3689 7.91211 17.1236 7.6582ZM13.0915 10.7285L12.6258 11.207L12.698 11.8789C12.8113 12.9181 12.6094 13.9679 12.1201 14.8848L5.4075 7.98438C5.65274 7.8457 5.90748 7.72852 6.17362 7.63477C6.6907 7.45117 7.2325 7.35938 7.7838 7.35938C7.9663 7.35938 8.1507 7.36914 8.33321 7.39063L8.98716 7.46484L9.45292 6.98633L11.9946 4.375L15.6351 8.11523L13.0915 10.7285Z" fill="#595959"/>
+</svg>

package/src/Images/Common/star-full.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.2841 8.27559L15.3333 7.41075L12.6731 2.01778C12.6005 1.87013 12.4809 1.75059 12.3333 1.67794C11.963 1.49513 11.513 1.64747 11.3278 2.01778L8.66766 7.41075L2.71688 8.27559C2.55282 8.29903 2.40281 8.37638 2.28797 8.49356C2.14913 8.63627 2.07262 8.82825 2.07526 9.02733C2.0779 9.22642 2.15946 9.41631 2.30203 9.55528L6.6075 13.7529L5.59031 19.6803C5.56646 19.8182 5.58172 19.96 5.63436 20.0896C5.687 20.2193 5.77491 20.3316 5.88813 20.4138C6.00135 20.496 6.13535 20.5449 6.27492 20.5549C6.4145 20.5648 6.55407 20.5355 6.67781 20.4701L12.0005 17.6717L17.3231 20.4701C17.4684 20.5475 17.6372 20.5732 17.7989 20.5451C18.2067 20.4748 18.4809 20.0881 18.4106 19.6803L17.3934 13.7529L21.6989 9.55528C21.8161 9.44044 21.8934 9.29044 21.9169 9.12638C21.9802 8.71622 21.6942 8.33653 21.2841 8.27559Z" fill="#FADB14"/>
+</svg>

package/src/Images/Common/star-outline.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22 9.24L14.81 8.62L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27L18.18 21L16.55 13.97L22 9.24ZM12 15.4L8.24 17.67L9.24 13.39L5.92 10.51L10.3 10.13L12 6.1L13.71 10.14L18.09 10.52L14.77 13.4L15.77 17.68L12 15.4Z" fill="#262626"/>
+</svg>

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

@@ -96,12 +96,7 @@ const MyPinnedSharedUnit = ({ refreshing }) => {
             .filter((sharedUnit) => sharedUnit?.is_pin)
             .map((item, index) => (
               <View key={item.id}>
-                <SharedUnit
-                  item={item}
-                  index={index}
-                  navigation={navigation}
-                  isOptions={false}
-                />
+                <SharedUnit item={item} index={index} isOptions={false} />
                 {index !== sharedUnits.length - 1 && (
                   <View style={styles.separator} />
                 )}

package/src/commons/Device/Hanet/ItemHanetDevice.js

@@ -1,5 +1,6 @@
 import React, { memo } from 'react';
 import {
+  Platform,
   StyleSheet,
   TouchableOpacity,
   TouchableWithoutFeedback,
@@ -58,7 +59,10 @@ const ItemHanetDevice = memo(
               {title}
             </Text>
             <View style={styles.row}>
-              <IconOutline name="right" size={12} />
+              <IconOutline
+                name={Platform.OS === 'android' ? 'right-square' : 'right'}
+                size={12}
+              />
             </View>
           </TouchableOpacity>
         </View>

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

@@ -1,5 +1,5 @@
 import React, { memo } from 'react';
-import { TouchableWithoutFeedback, View } from 'react-native';
+import { Platform, TouchableWithoutFeedback, View } from 'react-native';
 import { IconOutline } from '@ant-design/icons-react-native';
 import Text from '../../Text';
 
@@ -16,7 +16,11 @@ const ItemAddNew = memo(({ title, onAddNew, wrapStyle }) => {
       <View style={[styles.container, wrapStyle]}>
         <View style={styles.boxIcon}>
           <View style={styles.buttonPlus}>
-            <IconOutline name="plus" size={22} color={Colors.Gray8} />
+            <IconOutline
+              name={Platform.OS === 'android' ? 'plus-square' : 'plus'}
+              size={22}
+              color={Colors.Gray8}
+            />
           </View>
         </View>
         <View>

package/src/commons/Device/ItemDevice.js

@@ -1,5 +1,6 @@
 import React, { memo, useCallback } from 'react';
 import {
+  Platform,
   StyleSheet,
   TouchableOpacity,
   TouchableWithoutFeedback,
@@ -159,7 +160,10 @@ const ItemDevice = memo(
               >
                 {description || textConnected}
               </Text>
-              <IconOutline name="right" size={12} />
+              <IconOutline
+                name={Platform.OS === 'android' ? 'right-square' : 'right'}
+                size={12}
+              />
             </View>
           </TouchableOpacity>
         </View>

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

@@ -1,5 +1,10 @@
 import React, { memo, useCallback } from 'react';
-import { TouchableOpacity, TouchableWithoutFeedback, View } from 'react-native';
+import {
+  Platform,
+  TouchableOpacity,
+  TouchableWithoutFeedback,
+  View,
+} from 'react-native';
 import { IconOutline } from '@ant-design/icons-react-native';
 import moment from 'moment';
 import Text from '../../Text';
@@ -106,7 +111,10 @@ const ItemOneTap = memo(({ automate = {}, wrapSyles, onPressItem }) => {
             >
               {activateAt && t('activated_time', { time: activateAt })}
             </Text>
-            <IconOutline name="right" size={12} />
+            <IconOutline
+              name={Platform.OS === 'android' ? 'right-square' : 'right'}
+              size={12}
+            />
           </View>
         </TouchableOpacity>
       </View>

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

@@ -22,6 +22,7 @@ const HeaderUnit = memo(
     styleBoxTitle,
     bottomBorder,
     idButtonMore = AccessibilityLabel.HEADER_UNIT_BUTTON_MORE,
+    iconBackStyle,
   }) => {
     const { goBack } = useNavigation();
     const buttonMoreRef = useRef(null);
@@ -49,7 +50,10 @@ const HeaderUnit = memo(
           style={styles.btnLeft}
           onPress={onPressBack}
         >
-          <Image source={Images.arrowLeft} style={styles.iconBack} />
+          <Image
+            source={Images.arrowLeft}
+            style={[styles.iconBack, iconBackStyle]}
+          />
         </TouchableOpacity>
         <View style={[styles.boxTitle, styleBoxTitle]}>
           {title && (

package/src/commons/Unit/SharedUnit.js

@@ -1,34 +1,34 @@
 import React, { Fragment, useCallback } from 'react';
 import { View, Image, TouchableOpacity } from 'react-native';
 import { useTranslations } from '../../hooks/Common/useTranslations';
-import { IconOutline, IconFill } from '@ant-design/icons-react-native';
 
-import { API, Colors, Images } from '../../configs';
+import { API, Images } from '../../configs';
 import Text from '../../commons/Text';
 import Routes from '../../utils/Route';
 import { axiosPost } from '../../utils/Apis/axios';
+import StarFull from '../../Images/Common/star-full.svg';
+import StarOutline from '../../Images/Common/star-outline.svg';
+import PushPinFull from '../../Images/Common/pushpin-full.svg';
+import PushPinOutline from '../../Images/Common/pushpin-outline.svg';
 
 import styles from './styles';
 import { AccessibilityLabel } from '../../configs/Constants';
+import { useNavigation } from '@react-navigation/native';
 
-const SharedUnit = ({
-  item,
-  navigation,
-  renewItem,
-  index,
-  isOptions = true,
-}) => {
+const SharedUnit = ({ item, renewItem, index, isOptions = true }) => {
   const { unit } = item;
   const t = useTranslations();
+  const { navigate } = useNavigation();
+
   const goToDetail = useCallback(() => {
-    navigation.navigate(Routes.UnitStack, {
+    navigate(Routes.UnitStack, {
       screen: Routes.UnitDetail,
       params: {
         unitId: unit.id,
         unitData: unit,
       },
     });
-  }, [navigation, unit]);
+  }, [navigate, unit]);
 
   const removePinSharedUnit = useCallback(async () => {
     const { success } = await axiosPost(API.UNIT.UNPIN_UNIT(unit.id));
@@ -37,6 +37,7 @@ const SharedUnit = ({
       renewItem(index);
     }
   }, [renewItem, index, unit, item]);
+
   const addPinSharedUnit = useCallback(async () => {
     const { success } = await axiosPost(API.UNIT.PIN_UNIT(unit.id));
 
@@ -45,6 +46,7 @@ const SharedUnit = ({
       renewItem(index);
     }
   }, [renewItem, index, unit, item]);
+
   const removeStarSharedUnit = useCallback(async () => {
     const { success } = await axiosPost(API.UNIT.UNSTAR_UNIT(unit.id));
     if (success) {
@@ -52,6 +54,15 @@ const SharedUnit = ({
       renewItem(index);
     }
   }, [renewItem, index, unit, item]);
+
+  const onChangePin = useCallback(() => {
+    if (item.is_pin) {
+      removePinSharedUnit();
+      return;
+    }
+    addPinSharedUnit();
+  }, [addPinSharedUnit, item.is_pin, removePinSharedUnit]);
+
   const addStarSharedUnit = useCallback(async () => {
     const { success } = await axiosPost(API.UNIT.STAR_UNIT(unit.id));
     if (success) {
@@ -60,6 +71,14 @@ const SharedUnit = ({
     }
   }, [renewItem, index, unit, item]);
 
+  const onChangeFavorite = useCallback(() => {
+    if (item.is_star) {
+      removeStarSharedUnit();
+      return;
+    }
+    addStarSharedUnit();
+  }, [addStarSharedUnit, item.is_star, removeStarSharedUnit]);
+
   const justifyContent = isOptions ? 'space-around' : 'flex-end';
 
   return (
@@ -90,38 +109,34 @@ const SharedUnit = ({
       <View style={[styles.rowAction, { justifyContent: justifyContent }]}>
         {isOptions && (
           <Fragment>
-            {item.is_pin ? (
-              <IconFill
-                name="pushpin"
-                size={20}
-                color={Colors.Blue10}
-                onPress={removePinSharedUnit}
-                accessibilityLabel={`${AccessibilityLabel.ICON_REMOVE_PIN_SHARED_UNIT}-${item.id}`}
-              />
-            ) : (
-              <IconOutline
-                name="pushpin"
-                size={20}
-                onPress={addPinSharedUnit}
-                accessibilityLabel={`${AccessibilityLabel.ICON_ADD_PIN_SHARED_UNIT}-${item.id}`}
-              />
-            )}
-            {item.is_star ? (
-              <IconFill
-                name="star"
-                size={20}
-                color={Colors.Yellow6}
-                onPress={removeStarSharedUnit}
-                accessibilityLabel={`${AccessibilityLabel.ICON_REMOVE_STAR_SHARED_UNIT}-${item.id}`}
-              />
-            ) : (
-              <IconOutline
-                name="star"
-                size={20}
-                onPress={addStarSharedUnit}
-                accessibilityLabel={`${AccessibilityLabel.ICON_ADD_STAR_SHARED_UNIT}-${item.id}`}
-              />
-            )}
+            <TouchableOpacity
+              onPress={onChangePin}
+              accessibilityLabel={AccessibilityLabel.PIN_BUTTON}
+            >
+              {item.is_pin ? (
+                <PushPinFull
+                  accessibilityLabel={`${AccessibilityLabel.ICON_REMOVE_PIN_SHARED_UNIT}-${item.id}`}
+                />
+              ) : (
+                <PushPinOutline
+                  accessibilityLabel={`${AccessibilityLabel.ICON_ADD_PIN_SHARED_UNIT}-${item.id}`}
+                />
+              )}
+            </TouchableOpacity>
+            <TouchableOpacity
+              onPress={onChangeFavorite}
+              accessibilityLabel={AccessibilityLabel.STAR_BUTTON}
+            >
+              {item.is_star ? (
+                <StarFull
+                  accessibilityLabel={`${AccessibilityLabel.ICON_REMOVE_STAR_SHARED_UNIT}-${item.id}`}
+                />
+              ) : (
+                <StarOutline
+                  accessibilityLabel={`${AccessibilityLabel.ICON_ADD_STAR_SHARED_UNIT}-${item.id}`}
+                />
+              )}
+            </TouchableOpacity>
           </Fragment>
         )}
       </View>

package/src/commons/Unit/__test__/SharedUnit.test.js

@@ -7,7 +7,6 @@ import MockAdapter from 'axios-mock-adapter';
 import SharedUnit from '../SharedUnit';
 import { AccessibilityLabel } from '../../../configs/Constants';
 import { API } from '../../../configs';
-import Routes from '../../../utils/Route';
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
 import api from '../../../utils/Apis/axios';
@@ -24,14 +23,9 @@ jest.mock('@react-navigation/native', () => {
   };
 });
 
-const wrapComponent = (item, navigation, isOptions, mockedRenewItem) => (
+const wrapComponent = (item, isOptions, mockedRenewItem) => (
   <SCProvider initState={mockSCStore({})}>
-    <SharedUnit
-      item={item}
-      navigation={navigation}
-      isOptions={isOptions}
-      renewItem={mockedRenewItem}
-    />
+    <SharedUnit item={item} isOptions={isOptions} renewItem={mockedRenewItem} />
   </SCProvider>
 );
 
@@ -58,68 +52,6 @@ describe('Test SharedUnit', () => {
     };
   });
 
-  it('test create SharedUnit unit is not pin, not star', async () => {
-    const navigation = useNavigation();
-    const mockedRenewItem = jest.fn();
-    await act(async () => {
-      tree = await create(
-        wrapComponent(item, navigation, true, mockedRenewItem)
-      );
-    });
-
-    await act(async () => {
-      tree = await create(wrapComponent(item, navigation));
-    });
-    const instance = tree.root;
-    const touchSharedUnit = instance.find(
-      (el) =>
-        el.props.accessibilityLabel ===
-        AccessibilityLabel.TOUCH_SHARED_UNIT + '-69'
-    );
-    await act(async () => {
-      touchSharedUnit.props.onPress();
-    });
-    const iconRemovePinSharedUnit = instance.findAll(
-      (el) =>
-        el.props.accessibilityLabel ===
-        AccessibilityLabel.ICON_REMOVE_PIN_SHARED_UNIT + '-69'
-    );
-    const iconAddPinSharedUnit = instance.find(
-      (el) =>
-        el.props.accessibilityLabel ===
-        AccessibilityLabel.ICON_ADD_PIN_SHARED_UNIT + '-69'
-    );
-    mock.onPost(API.UNIT.PIN_UNIT(3)).reply(200);
-    await act(async () => {
-      iconAddPinSharedUnit.props.onPress();
-    });
-    mock.onPost(API.UNIT.PIN_UNIT(3)).reply(400);
-    await act(async () => {
-      iconAddPinSharedUnit.props.onPress();
-    });
-    const iconAddStarSharedUnit = instance.find(
-      (el) =>
-        el.props.accessibilityLabel ===
-        AccessibilityLabel.ICON_ADD_STAR_SHARED_UNIT + '-69'
-    );
-    mock.onPost(API.UNIT.STAR_UNIT(3)).reply(200);
-    await act(async () => {
-      iconAddStarSharedUnit.props.onPress();
-    });
-    mock.onPost(API.UNIT.STAR_UNIT(3)).reply(400);
-    await act(async () => {
-      iconAddStarSharedUnit.props.onPress();
-    });
-    expect(iconRemovePinSharedUnit).toHaveLength(0);
-    expect(mockNavigate).toHaveBeenCalledWith(Routes.UnitStack, {
-      screen: Routes.UnitDetail,
-      params: {
-        unitId: 3,
-        unitData: unit,
-      },
-    });
-  });
-
   it('test create SharedUnit unit without unit owner', async () => {
     const navigation = useNavigation();
     delete unit.owner_name;
@@ -155,50 +87,78 @@ describe('Test SharedUnit', () => {
         AccessibilityLabel.ICON_ADD_STAR_SHARED_UNIT + '-69'
     );
 
-    expect(iconAddPinSharedUnit).toHaveLength(0);
-    expect(iconStarUnit).toHaveLength(0);
+    expect(iconAddPinSharedUnit).toHaveLength(1);
+    expect(iconStarUnit).toHaveLength(1);
   });
 
-  it('test create SharedUnit unit is pin, is star', async () => {
-    const navigation = useNavigation();
-    item.is_pin = true;
-    item.is_star = true;
+  it('Test go to detail', async () => {
+    await act(async () => {
+      tree = await create(wrapComponent(item, false));
+    });
+    const instance = tree.root;
+    const button = instance.findByProps({
+      accessibilityLabel: AccessibilityLabel.TOUCH_SHARED_UNIT + '-69',
+    });
+    await act(async () => {
+      await button.props.onPress();
+    });
+    expect(mockNavigate).toHaveBeenCalledWith('UnitStack', {
+      params: {
+        unitData: {
+          background: '',
+          icon: '',
+          id: 3,
+          name: 'name',
+          owner_name: 'owner_name',
+          short_summaries: [],
+        },
+        unitId: 3,
+      },
+      screen: 'UnitDetail',
+    });
+  });
 
+  it('Test pin then unpin unit', async () => {
+    const mockedRenewItem = jest.fn();
     await act(async () => {
-      tree = await create(wrapComponent(item, navigation));
+      tree = await create(wrapComponent(item, true, mockedRenewItem));
     });
     const instance = tree.root;
-    const iconRemovePinSharedUnit = instance.find(
-      (el) =>
-        el.props.accessibilityLabel ===
-        AccessibilityLabel.ICON_REMOVE_PIN_SHARED_UNIT + '-69'
-    );
+    const pinButton = instance.findByProps({
+      accessibilityLabel: AccessibilityLabel.PIN_BUTTON,
+    });
+    mock.onPost(API.UNIT.PIN_UNIT(3)).reply(200);
+    await act(async () => {
+      await pinButton.props.onPress();
+    });
+    expect(mockedRenewItem).toBeCalledTimes(1);
+
     mock.onPost(API.UNIT.UNPIN_UNIT(3)).reply(200);
     await act(async () => {
-      iconRemovePinSharedUnit.props.onPress();
+      await pinButton.props.onPress();
     });
-    mock.onPost(API.UNIT.UNPIN_UNIT(3)).reply(400);
+    expect(mockedRenewItem).toBeCalledTimes(2);
+  });
+
+  it('Test add then remove favorite unit', async () => {
+    const mockedRenewItem = jest.fn();
     await act(async () => {
-      iconRemovePinSharedUnit.props.onPress();
+      tree = await create(wrapComponent(item, true, mockedRenewItem));
     });
-    const iconRemoveStarSharedUnit = instance.find(
-      (el) =>
-        el.props.accessibilityLabel ===
-        AccessibilityLabel.ICON_REMOVE_STAR_SHARED_UNIT + '-69'
-    );
-    mock.onPost(API.UNIT.UNSTAR_UNIT(3)).reply(200);
+    const instance = tree.root;
+    const pinButton = instance.findByProps({
+      accessibilityLabel: AccessibilityLabel.STAR_BUTTON,
+    });
+    mock.onPost(API.UNIT.STAR_UNIT(3)).reply(200);
     await act(async () => {
-      iconRemoveStarSharedUnit.props.onPress();
+      await pinButton.props.onPress();
     });
-    mock.onPost(API.UNIT.UNSTAR_UNIT(3)).reply(400);
+    expect(mockedRenewItem).toBeCalledTimes(1);
+
+    mock.onPost(API.UNIT.UNSTAR_UNIT(3)).reply(200);
     await act(async () => {
-      iconRemoveStarSharedUnit.props.onPress();
+      await pinButton.props.onPress();
     });
-    const iconRemoveStar = instance.findAll(
-      (el) =>
-        el.props.accessibilityLabel ===
-        AccessibilityLabel.ICON_REMOVE_STAR_SHARED_UNIT + '-69'
-    );
-    expect(iconRemoveStar).toHaveLength(3);
+    expect(mockedRenewItem).toBeCalledTimes(2);
   });
 });

package/src/commons/WrapParallaxScrollView/index.js

@@ -88,6 +88,7 @@ const WrapParallaxScrollView = ({
           hideRight={hideRight}
           hideRightPlus={hideRightPlus}
           idButtonMore={idButtonMore}
+          iconBackStyle={styles.iconBackStyle}
         />
       </View>
     ),
@@ -136,4 +137,7 @@ const styles = StyleSheet.create({
     position: 'absolute',
     bottom: 40,
   },
+  iconBackStyle: {
+    tintColor: Colors.Black,
+  },
 });

package/src/configs/AccessibilityLabel.js

@@ -126,6 +126,8 @@ export default {
   HORIZONTAL_BAR_CHART: 'HORIZONTAL_BAR_CHART',
   DEVICE_SHOW_REMOVE: 'DEVICE_SHOW_REMOVE',
   DEVICE_SHOW_RENAME: 'DEVICE_SHOW_RENAME',
+  PIN_BUTTON: 'PIN_BUTTON',
+  STAR_BUTTON: 'STAR_BUTTON',
 
   // common
   COMMON_LOADING_ANIMATION: 'COMMON_LOADING_ANIMATION',
@@ -673,6 +675,7 @@ export default {
   GATEWAY_CONNECTION_METHODS_TEXT: 'GATEWAY_CONNECTION_METHODS_TEXT',
   //Notification
   CUSTOM_TEXT: 'CUSTOM_TEXT',
+  NotificationItemText: 'NotificationItemText',
   //ButtonWrapper
   BUTTON_WRAPPER: 'BUTTON_WRAPPER',
   //devmod

package/src/navigations/AutomateStack.js

@@ -1,5 +1,5 @@
 import React, { memo, useCallback, useEffect, useContext } from 'react';
-import { TouchableOpacity } from 'react-native';
+import { Platform, TouchableOpacity } from 'react-native';
 import { createStackNavigator } from '@react-navigation/stack';
 import { useNavigation } from '@react-navigation/core';
 import { Icon } from '@ant-design/react-native';
@@ -44,7 +44,10 @@ const AutomateStack = memo(() => {
         title: t('smart'),
         headerLeft: () => (
           <TouchableOpacity style={Theme.menuIcon} onPress={toggleDrawer}>
-            <Icon name={'menu'} color={Colors.Black} />
+            <Icon
+              name={Platform.OS === 'android' ? 'menu-unfold' : 'menu'}
+              color={Colors.Black}
+            />
           </TouchableOpacity>
         ),
         headerTitleAlign: 'left',

package/src/navigations/NotificationStack.js

@@ -1,18 +1,44 @@
-import React, { memo } from 'react';
+import React, { memo, useCallback } from 'react';
 import { createStackNavigator } from '@react-navigation/stack';
 
 import Routes from '../utils/Route';
 import Notification from '../screens/Notification';
 import { screenOptions } from './utils';
+import { TouchableOpacity } from 'react-native';
+import { Colors, Theme } from '../configs';
+import { useNavigation } from '@react-navigation/native';
+import { Icon } from '@ant-design/react-native';
+import { useTranslations } from '../hooks/Common/useTranslations';
+import { Platform } from 'react-native';
 
 const Stack = createStackNavigator();
 
 const NotificationStack = memo(() => {
+  const navigation = useNavigation();
+  const t = useTranslations();
+
+  const toggleDrawer = useCallback(() => {
+    navigation.toggleDrawer();
+  }, [navigation]);
+
   return (
     <Stack.Navigator
       screenOptions={{
         ...screenOptions,
-        headerShown: false,
+        headerShown: true,
+        title: t('notifications'),
+        headerLeft: () => (
+          <TouchableOpacity style={Theme.menuIcon} onPress={toggleDrawer}>
+            <Icon
+              name={Platform.OS === 'android' ? 'menu-unfold' : 'menu'}
+              color={Colors.Black}
+            />
+          </TouchableOpacity>
+        ),
+        headerTitleAlign: 'left',
+        headerStyle: {
+          backgroundColor: Colors.Gray2,
+        },
       }}
     >
       <Stack.Screen name={Routes.Notification} component={Notification} />

package/src/navigations/SharedStack.js

@@ -1,6 +1,6 @@
 import React, { memo } from 'react';
 import { createStackNavigator } from '@react-navigation/stack';
-import { TouchableOpacity, StyleSheet } from 'react-native';
+import { TouchableOpacity, StyleSheet, Platform } from 'react-native';
 import { useNavigation, useRoute } from '@react-navigation/native';
 import { Icon } from '@ant-design/react-native';
 import { useTranslations } from '../hooks/Common/useTranslations';
@@ -29,7 +29,13 @@ const SharedStack = memo(() => {
               onPress={() => (params?.isMainSource ? toggleDrawer() : goBack())}
             >
               <Icon
-                name={params?.isMainSource ? 'menu' : 'arrow-left'}
+                name={
+                  params?.isMainSource
+                    ? Platform.OS === 'android'
+                      ? 'menu-unfold'
+                      : 'menu'
+                    : 'arrow-left'
+                }
                 color={Colors.Black}
               />
             </TouchableOpacity>

package/src/screens/AddNewGateway/ConnectingDevice.js

@@ -1,7 +1,6 @@
 import React, { useCallback, useEffect, useState, useMemo } from 'react';
 import { useNavigation } from '@react-navigation/native';
 import { Alert } from 'react-native';
-import 'react-native-get-random-values';
 import { v4 as uuidv4 } from 'uuid';
 
 import Processing from '../../commons/Processing';

package/src/screens/AddNewGateway/ShareWifiPassword.js

@@ -15,7 +15,6 @@ import {
 import dgram from 'react-native-udp';
 import { useNavigation, useIsFocused } from '@react-navigation/native';
 import LottieView from 'lottie-react-native';
-import 'react-native-get-random-values';
 import { v4 as uuidv4 } from 'uuid';
 
 import { ToastBottomHelper } from '../../utils/Utils';

package/src/screens/Automate/ScriptDetail/Styles/indexStyles.js

@@ -63,6 +63,7 @@ export default StyleSheet.create({
   },
   moreButton: {
     marginLeft: -5,
+    transform: [{ rotate: '90deg' }],
   },
   wrapStyle: {
     borderRadius: 8,

package/src/screens/Automate/ScriptDetail/index.js

@@ -7,7 +7,6 @@ import React, {
 } from 'react';
 import { Image, Platform, TouchableOpacity, View } from 'react-native';
 import { PopoverMode } from 'react-native-popover-view';
-import { IconFill, IconOutline } from '@ant-design/icons-react-native';
 import { Icon } from '@ant-design/react-native';
 
 import { useTranslations } from '../../../hooks/Common/useTranslations';
@@ -31,6 +30,8 @@ import RenameScript from './Components/RenameScript';
 import DeleteScript from './Components/DeleteScript';
 import Images from '../../../configs/Images';
 import { useBackendPermission } from '../../../utils/Permission/backend';
+import StarFull from '../../../Images/Common/star-full.svg';
+import StarOutline from '../../../Images/Common/star-outline.svg';
 
 const PreventDoubleTouch = withPreventDoubleClick(TouchableOpacity);
 
@@ -160,7 +161,7 @@ const ScriptDetail = ({ route }) => {
           style={[styles.headerButton, styles.moreButton]}
           accessibilityLabel={AccessibilityLabel.ICON_MORE}
         >
-          <Icon name={'more'} size={27} color={Colors.Black} />
+          <Icon name={'ellipsis'} size={27} color={Colors.Black} />
         </TouchableOpacity>
       </View>
     ),
@@ -376,11 +377,7 @@ const ButtonStar = ({ automate }) => {
       onPress={onPressStar}
       accessibilityLabel={AccessibilityLabel.HEADER_SCRIPT_DETAIL_BUTTON_STAR}
     >
-      {isStarred ? (
-        <IconFill name="star" size={25} color={Colors.Yellow6} />
-      ) : (
-        <IconOutline name="star" size={25} />
-      )}
+      {isStarred ? <StarFull /> : <StarOutline />}
     </PreventDoubleTouch>
   );
 };

package/src/screens/Device/detail.js

@@ -8,7 +8,7 @@ import React, {
 } from 'react';
 import { View, TouchableOpacity, Platform } from 'react-native';
 import { useNavigation, useFocusEffect } from '@react-navigation/native';
-import { IconFill, IconOutline } from '@ant-design/icons-react-native';
+import { IconFill } from '@ant-design/icons-react-native';
 import { Icon } from '@ant-design/react-native';
 import moment from 'moment';
 
@@ -47,6 +47,8 @@ import { SensorDisplayItem } from './components/SensorDisplayItem';
 import { EmergencyCountdown } from './components/EmergencyCountdown';
 import { SensorConnectStatusViewHeader } from './components/SensorConnectStatusViewHeader';
 import PreventAccess from '../../commons/PreventAccess';
+import StarFull from '../../Images/Common/star-full.svg';
+import StarOutline from '../../Images/Common/star-outline.svg';
 
 import styles from './styles';
 import Routes from '../../utils/Route';
@@ -676,11 +678,7 @@ const DeviceDetail = ({ route }) => {
           onPress={isFavorite ? removeFromFavorites : addToFavorites}
           accessibilityLabel={AccessibilityLabel.HEADER_DEVICE_BUTTON_STAR}
         >
-          {isFavorite ? (
-            <IconFill name="star" size={25} color={Colors.Yellow6} />
-          ) : (
-            <IconOutline name="star" size={25} />
-          )}
+          {isFavorite ? <StarFull /> : <StarOutline />}
         </TouchableOpacity>
 
         {isShowSetupEmergencyContact && (

package/src/screens/Notification/__test__/Notification.test.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { act, create } from 'react-test-renderer';
 import MockAdapter from 'axios-mock-adapter';
-import { Animated, RefreshControl } from 'react-native';
+import { FlatList, RefreshControl } from 'react-native';
 import { NavigationContext } from '@react-navigation/native';
 
 import { SCProvider } from '../../../context';
@@ -10,7 +10,8 @@ import Notification from '../index';
 import NotificationItem from '../components/NotificationItem';
 import { API } from '../../../configs';
 import api from '../../../utils/Apis/axios';
-import { WrapHeaderScrollable } from '../../../commons';
+import { Text } from '../../../commons';
+import AccessibilityLabel from '../../../configs/AccessibilityLabel';
 
 const wrapComponent = () => (
   <SCProvider initState={mockSCStore({})}>
@@ -105,17 +106,22 @@ describe('test Notification', () => {
       tree = await create(wrapComponent());
     });
     const instance = tree.root;
-    const wrapHeaderScrollable = instance.findByType(WrapHeaderScrollable);
-    expect(wrapHeaderScrollable.props.disableLoadMore).toEqual(false);
-
-    const scrollView = instance.findByType(Animated.ScrollView);
+    const flatlist = instance.findByType(FlatList);
     mock
       .onGet(API.NOTIFICATION.LIST_EOH_NOTIFICATIONS(2, ''))
       .reply(200, response);
     await act(async () => {
-      scrollView.props.onMomentumScrollEnd();
+      await flatlist.props.onMomentumScrollBegin();
+      await flatlist.props.onEndReached();
     });
-    expect(wrapHeaderScrollable.props.disableLoadMore).toEqual(true);
+    const notificationItemTexts = instance.findAll(
+      (el) =>
+        el.type === Text &&
+        el.props.accessibilityLabel === AccessibilityLabel.NotificationItemText
+    );
+    expect(notificationItemTexts[2].props.children).toBe(
+      ' invited you to join '
+    );
   });
 
   it('test onRefresh', async () => {

package/src/screens/Notification/components/NotificationItem.js

@@ -30,6 +30,7 @@ const NotificationItem = memo(({ item }) => {
           bold={i % 2 !== 0}
           key={i}
           style={styles.textNotification}
+          accessibilityLabel={AccessibilityLabel.NotificationItemText}
         >
           {i % 2 === 0 ? str : params[str]}
         </Text>

package/src/screens/Notification/index.js

@@ -1,55 +1,29 @@
-import React, { memo, useMemo, useState, useCallback, useEffect } from 'react';
-import { View, TouchableOpacity } from 'react-native';
-import { Icon } from '@ant-design/react-native';
+import React, { memo, useState, useCallback, useEffect, useRef } from 'react';
+import { View, FlatList, ActivityIndicator } from 'react-native';
 import { useFocusEffect } from '@react-navigation/native';
 
 import styles from './styles/indexStyles';
-import { API, Colors } from '../../configs';
+import { API } from '../../configs';
 import { axiosGet } from '../../utils/Apis/axios';
-import { useTranslations } from '../../hooks/Common/useTranslations';
 import NotificationItem from './components/NotificationItem';
-import WrapHeaderScrollable from '../../commons/Sharing/WrapHeaderScrollable';
 import {
   watchNotificationData,
   unwatchNotificationData,
 } from '../../utils/Monitor';
 import { useSCContextSelector } from '../../context';
-import { notImplemented } from '../../utils/Utils';
 import { useReceiveNotifications } from '../../hooks';
 
 const Notification = memo(() => {
-  const t = useTranslations();
-  const [page, setPage] = useState(1);
+  const onEndReachedCalledDuringMomentum = useRef(false);
   const user = useSCContextSelector((state) => state?.auth?.account?.user);
+  const [page, setPage] = useState(1);
   const [notifications, setNotifications] = useState([]);
   const [maxPageNotification, setMaxPageNotification] = useState(1);
-
-  const rightComponent = useMemo(
-    () => (
-      <View style={styles.rightComponent}>
-        <TouchableOpacity
-          style={styles.iconPlus}
-          onPress={() => {
-            notImplemented(t);
-          }}
-        >
-          <Icon name={'plus'} size={27} color={Colors.Black} />
-        </TouchableOpacity>
-
-        <TouchableOpacity
-          onPress={() => {
-            notImplemented(t);
-          }}
-        >
-          <Icon name={'search'} size={27} color={Colors.Black} />
-        </TouchableOpacity>
-      </View>
-    ),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []
-  );
+  const [isRefreshing, setIsRefreshing] = useState(false);
+  const [isLoadMore, setIsLoadMore] = useState(false);
 
   const fetchNotifications = useCallback(async (pageParam) => {
+    setIsLoadMore(true);
     const { success, data } = await axiosGet(
       API.NOTIFICATION.LIST_EOH_NOTIFICATIONS(pageParam, '')
     );
@@ -57,16 +31,22 @@ const Notification = memo(() => {
       setNotifications((preState) => preState.concat(data.results));
       setMaxPageNotification(Math.ceil(data.count / 10));
     }
+    setIsLoadMore(false);
+    onEndReachedCalledDuringMomentum.current = false;
   }, []);
 
   const handleOnLoadMore = useCallback(() => {
-    setPage((preState) => preState + 1);
-    if (page < maxPageNotification) {
-      fetchNotifications(page + 1);
+    if (!onEndReachedCalledDuringMomentum.current) {
+      onEndReachedCalledDuringMomentum.current = true;
+      setPage((preState) => preState + 1);
+      if (page < maxPageNotification) {
+        fetchNotifications(page + 1);
+      }
     }
   }, [page, maxPageNotification, fetchNotifications]);
 
   const onRefresh = useCallback(async () => {
+    setIsRefreshing(true);
     setPage(1);
     const { success, data } = await axiosGet(
       API.NOTIFICATION.LIST_EOH_NOTIFICATIONS(1, '')
@@ -75,8 +55,20 @@ const Notification = memo(() => {
       setNotifications(data.results);
       setMaxPageNotification(Math.ceil(data.count / 10));
     }
+    setIsRefreshing(false);
   }, []);
 
+  const Footer = useCallback(() => {
+    if (!isLoadMore) {
+      return null;
+    }
+    return (
+      <View style={styles.footer}>
+        <ActivityIndicator />
+      </View>
+    );
+  }, [isLoadMore]);
+
   useReceiveNotifications(onRefresh);
 
   useEffect(() => {
@@ -93,18 +85,20 @@ const Notification = memo(() => {
 
   return (
     <View style={styles.wrap}>
-      <WrapHeaderScrollable
-        title={t('notifications')}
-        rightComponent={rightComponent}
-        onLoadMore={handleOnLoadMore}
+      <FlatList
+        keyExtractor={(item) => item.id}
+        renderItem={({ item }) => <NotificationItem item={item} />}
+        data={notifications}
+        extraData={notifications}
         onRefresh={onRefresh}
-        disableLoadMore={page >= maxPageNotification}
-        styleScrollView={styles.styleScrollView}
-      >
-        {notifications.map((item, index) => (
-          <NotificationItem item={item} key={index} />
-        ))}
-      </WrapHeaderScrollable>
+        onEndReachedThreshold={0.5}
+        onEndReached={handleOnLoadMore}
+        refreshing={isRefreshing}
+        onMomentumScrollBegin={() =>
+          (onEndReachedCalledDuringMomentum.current = false)
+        }
+        ListFooterComponent={<Footer />}
+      />
     </View>
   );
 });

package/src/screens/Notification/styles/indexStyles.js

@@ -13,10 +13,13 @@ export default StyleSheet.create({
     marginRight: 18,
     paddingRight: 10,
   },
-  iconPlus: {
-    marginRight: 22,
-  },
   styleScrollView: {
     marginTop: -10,
   },
+  footer: {
+    width: '100%',
+    height: 50,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
 });

package/src/screens/SharedUnit/index.js

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { FlatList, RefreshControl, TouchableOpacity, View } from 'react-native';
-import { useIsFocused, useNavigation } from '@react-navigation/native';
+import { useIsFocused } from '@react-navigation/native';
 
 import { axiosGet } from '../../utils/Apis/axios';
 import { useTranslations } from '../../hooks/Common/useTranslations';
@@ -20,7 +20,6 @@ const Shared = () => {
   useBlockBackAndroid();
   const t = useTranslations();
   useTitleHeader(t('text_shared_with_me'));
-  const navigation = useNavigation();
   const [tab, setTabActiveState] = useState(0);
   const isFocused = useIsFocused();
   const [sharedUnits, setSharedUnits] = useState([]);
@@ -133,7 +132,6 @@ const Shared = () => {
               return (
                 <SharedUnit
                   key={`${item.id}-${item?.is_star}-${item?.is_pin}`}
-                  navigation={navigation}
                   item={item}
                   index={index}
                   renewItem={renewItem}
@@ -157,7 +155,6 @@ const Shared = () => {
               return (
                 <SharedUnit
                   key={`${item.id}-${item.is_star}-${item.is_pin}`}
-                  navigation={navigation}
                   item={item}
                   index={index}
                   renewItem={renewItem}

package/src/screens/Unit/components/SharedUnit/index.js

@@ -2,6 +2,7 @@ import React, { Fragment, useCallback } from 'react';
 import { View, Image, TouchableOpacity } from 'react-native';
 import { useTranslations } from '../../../../hooks/Common/useTranslations';
 import { IconOutline, IconFill } from '@ant-design/icons-react-native';
+import { useNavigation } from '@react-navigation/native';
 
 import { API, Colors, Images } from '../../../../configs';
 import Text from '../../../../commons/Text';
@@ -11,24 +12,20 @@ import { axiosPost } from '../../../../utils/Apis/axios';
 import styles from '../styles';
 import { AccessibilityLabel } from '../../../../configs/Constants';
 
-const SharedUnit = ({
-  item,
-  navigation,
-  renewItem,
-  index,
-  isOptions = true,
-}) => {
+const SharedUnit = ({ item, renewItem, index, isOptions = true }) => {
   const t = useTranslations();
+  const { navigate } = useNavigation();
   const { unit } = item;
+
   const goToDetail = useCallback(() => {
-    navigation.navigate(Routes.UnitStack, {
+    navigate(Routes.UnitStack, {
       screen: Routes.UnitDetail,
       params: {
         unitId: unit.id,
         unitData: unit,
       },
     });
-  }, [navigation, unit]);
+  }, [navigate, unit]);
 
   const removePinSharedUnit = useCallback(async () => {
     const { success } = await axiosPost(API.UNIT.UNPIN_UNIT(unit.id));

package/src/screens/Unit/components/__test__/SharedUnit.test.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import { create, act } from 'react-test-renderer';
 import moment from 'moment';
-import { useNavigation } from '@react-navigation/native';
 import MockAdapter from 'axios-mock-adapter';
 import SharedUnit from '../SharedUnit';
 import { AccessibilityLabel } from '../../../../configs/Constants';
@@ -14,14 +13,9 @@ import api from '../../../../utils/Apis/axios';
 const mock = new MockAdapter(api.axiosInstance);
 
 const mockRenewItem = jest.fn();
-const wrapComponent = (item, navigation) => (
+const wrapComponent = (item) => (
   <SCProvider initState={mockSCStore({})}>
-    <SharedUnit
-      item={item}
-      navigation={navigation}
-      renewItem={mockRenewItem}
-      index={0}
-    />
+    <SharedUnit item={item} renewItem={mockRenewItem} index={0} />
   </SCProvider>
 );
 
@@ -56,11 +50,10 @@ describe('Test SharedUnit', () => {
   };
 
   it('test create SharedUnit unit is not pin, not star', async () => {
-    const navigation = useNavigation();
     mock.onPost(API.UNIT.PIN_UNIT(3)).reply(200);
     mock.onPost(API.UNIT.STAR_UNIT(3)).reply(200);
     await act(async () => {
-      tree = await create(wrapComponent(item, navigation));
+      tree = await create(wrapComponent(item));
     });
     const instance = tree.root;
     const touchSharedUnit = instance.find(
@@ -102,11 +95,10 @@ describe('Test SharedUnit', () => {
   });
 
   it('test create SharedUnit unit is pin, is star', async () => {
-    const navigation = useNavigation();
     item.is_pin = true;
     item.is_star = true;
     await act(async () => {
-      tree = await create(wrapComponent(item, navigation));
+      tree = await create(wrapComponent(item));
     });
     const instance = tree.root;
     const iconRemovePinSharedUnit = instance.find(
@@ -128,11 +120,10 @@ describe('Test SharedUnit', () => {
   });
 
   it('test create SharedUnit unit is pin, is star with call api failure', async () => {
-    const navigation = useNavigation();
     item.is_pin = true;
     item.is_star = true;
     await act(async () => {
-      tree = await create(wrapComponent(item, navigation));
+      tree = await create(wrapComponent(item));
     });
     const instance = tree.root;
     const iconRemovePinSharedUnit = instance.find(
@@ -150,6 +141,19 @@ describe('Test SharedUnit', () => {
     );
     mock.onPost(API.UNIT.UNSTAR_UNIT(3)).reply(200);
     await iconRemoveStarSharedUnit.props.onPress();
-    expect(mockRenewItem).toBeCalled();
+    expect(mockNavigate).toBeCalledWith('UnitStack', {
+      params: {
+        unitData: {
+          background: '',
+          icon: '',
+          id: 3,
+          name: 'name',
+          owner_name: 'owner_name',
+          short_summaries: [],
+        },
+        unitId: 3,
+      },
+      screen: 'UnitDetail',
+    });
   });
 });