added btn with icon

src/components/IconButton.tsx

@@ -0,0 +1,53 @@
+import {FC } from "react";
+import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
+
+type IconButtonProps = {
+  label: string;
+  disabled: boolean;
+  rotate: string;
+  backgroundColor: string;
+  labelColor: string;
+  icon: string;
+  onChangeFunc: () => void;
+};
+
+const  IconButton: FC<IconButtonProps> = props => {
+  const {label, disabled, rotate, backgroundColor, labelColor, icon, onChangeFunc} = props;
+
+  return (
+    <View style={[styles.btnContainer, disabled ? styles.disabledBtn : null]}>
+      <TouchableOpacity onPress={onChangeFunc} style={[styles.button, {backgroundColor: backgroundColor}]}>
+          <View style={{width: '100%', flexDirection: 'row', alignItems: 'center', justifyContent: 'center'}}>
+            <Icon name={icon} size={16} color={labelColor} style={{transform: [{ rotate: rotate}], textAlign: 'center', lineHeight: 20}}/>
+            <Text style={[styles.labelText, {color: labelColor}]}>{label}</Text>
+          </View>  
+        </TouchableOpacity>
+    </View>
+  )};
+
+const styles = StyleSheet.create({
+    btnContainer: {
+      flexDirection: 'row',
+      textAlign: 'center',
+      justifyContent: 'center',
+      width: "100%",
+      height: 62
+    },
+    button: {
+      justifyContent: 'center',
+      width: "100%"
+    },
+    disabledBtn: {
+      opacity: 0.5,
+    },
+    labelText: {
+      fontFamily: 'Inter',
+      fontSize: 14,
+      lineHeight: 20,
+      textAlign: 'center',
+      paddingLeft: 10
+    },
+  });
+
+export default IconButton;

src/components/steps/HomeScreen.tsx

@@ -11,6 +11,7 @@ import Dialpad from "../Dialpad";
 import Styles from "../../Styles";
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import SubMenuModal from "../SubMenuModal";
+import IconButton from "../IconButton";
 
 enum HomeSteps {
   Home,
@@ -105,8 +106,14 @@ const  HomeScreen: FC<HomeScreenProps> = props => {
         <TouchableOpacity style={styles.subMenu} onPress={openSubMenu}><Icon name="dots-horizontal" size={24} color="white" /></TouchableOpacity>
       </View>
       <SubMenuModal isVisible={isMenuVisible} onFactoryReset={onFactoryResetFunc} onLogout={onCancelFunc} onChangeFunc={() => {setMenuVisible(false)}}/>
-      <Button label="Scan" disabled={false}  onChangeFunc={() => setStep(HomeSteps.ScanCode)}></Button>
-      <Button label="Receive" disabled={false}  onChangeFunc={() => setReceiveVisible(true)}></Button>
+      <View style={styles.homeScreenBtns}>
+        <View style={{width: '50%'}}>
+          <IconButton label="Receive" disabled={false} rotate="90deg" backgroundColor="#320430" labelColor="#F29AE9" icon="page-last" onChangeFunc={() => setReceiveVisible(true)} />
+        </View>
+        <View style={{width: '50%'}}>
+          <IconButton label="Scan" disabled={false} rotate="0deg" backgroundColor="#321504" labelColor="#FE740C" icon="line-scan" onChangeFunc={() => setStep(HomeSteps.ScanCode)}/> 
+        </View>
+        </View>
       <ReceiveModal address={walletAddress()} isVisible={receiveVisible} onChangeFunc={() => {setReceiveVisible(false)} } />
     </View>
     }
@@ -149,7 +156,12 @@ const styles = StyleSheet.create({
     fontFamily: 'Inter',
     color: 'white',
     marginTop: '5%'
-  }
+  },
+  homeScreenBtns: {
+    flexDirection: 'row',
+    width: '95%',
+    marginHorizontal: '2.5%'
+  },
 });
 
 export default HomeScreen;