layout completed

components/icon_button.component.js

@@ -13,18 +13,19 @@ export const AppIconButton = (props) => {
 const styles = StyleSheet.create({
   button:{
     alignItems: "center",
+    justifyContent: 'center',
     padding: 10,
     fontSize: 16,
-    width: 100,
+    width: 150,
     height: 55,
-    backgroundColor: themeColors.PRIMARY_COLOR,
+    backgroundColor: themeColors.BLACK,
     borderRadius: 20,
     shadowColor: 'rgba(0,0,0, .4)',
     shadowOffset: { height: 2, width: 1 },
     shadowOpacity: 1,
     shadowRadius: 1,
     elevation: 2,
-    marginHorizontal: 5
+    marginHorizontal: 10
   },
   label: {
     fontSize: 22,

screen/Home.Auction.Screen.js

@@ -3,21 +3,37 @@
 
 // Import React and Component
 import React from 'react';
-import {View, StyleSheet, Image} from 'react-native';
+import {View, StyleSheet, Text, ScrollView} from 'react-native';
 import { AppButton } from "../components/button.component";
 import { AppTextInput } from '../components/text_input.component';
 import { AppIconButton } from '../components/icon_button.component';
+import { AppContainer } from '../container/container';
 import themeColors from '../assets/colors';
 const  HomeAuctionScreen =  ({navigation}) => {
   return (
     <View style={styles.container}>
       <View style={styles.header}>
       </View>
-      <View style={styles.contentContainer}>
-        <AppIconButton label='Buy' onPress = {() => navigation.navigate("SignUp")}/>
-        <AppIconButton label='Sell'/>
-        <AppIconButton label='My Bids'/>
-      </View>
+      <ScrollView horizontal style={styles.btnRowContainer}>
+        <View style={styles.contentContainer}>
+          <AppIconButton label='Buy' onPress = {() => navigation.navigate("SignUp")}/>
+          <AppIconButton label='Sell'/>
+          <AppIconButton label='My Bids'/>
+          <AppIconButton label='My Auctions'/>
+        </View>
+      </ScrollView>
+
+      <AppContainer>
+        <Text style={styles.auctionHeading}>Auctions List</Text>
+        <ScrollView>
+          <View>
+            <AppButton label='Buy' onPress = {() => navigation.navigate("SignUp")}/>
+            <AppButton label='Sell'/>
+            <AppButton label='My Bids'/>
+            <AppButton label='My Auctions'/>
+          </View>
+      </ScrollView>
+      </AppContainer>
     </View>
   );
 };
@@ -34,9 +50,17 @@ const styles = StyleSheet.create({
     borderBottomEndRadius: 25,
     borderBottomStartRadius: 25
   },
+  btnRowContainer: {
+    maxHeight: 100
+  },
   contentContainer: {
     flex: 1,
     flexDirection: 'row',
     margin: 20
+  },
+  auctionHeading: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    color: themeColors.SECONDARY_COLOR
   }
 })
\ No newline at end of file