auction_item component modified

components/auction_item.component.js

 import React from 'react';
-import { StyleSheet, TouchableOpacity, Text } from 'react-native';
+import { StyleSheet, TouchableOpacity, Text, View } from 'react-native';
 import themeColors from '../assets/colors';
-
-export const AppAuctionItem = (props) => {
+import { MaterialIcons } from '@expo/vector-icons';
+export const AppAuctionItem = props => {
   return(
+    <View>
+    {props.delete ? (
+      <View style={styles.container}>
+        <TouchableOpacity onPress={props.onSelect} style={styles.button}>
+          <Text style={styles.label}>{props.label}</Text>
+        </TouchableOpacity>
+        <TouchableOpacity onPress={props.onDelete} style={styles.delBtn}>
+          <MaterialIcons name="delete" size={24} color={themeColors.WHITE} />
+        </TouchableOpacity>
+      </View>
+    ) : (
       <TouchableOpacity onPress={props.onPress} style={styles.button}>
         <Text style={styles.label}>{props.label}</Text>
       </TouchableOpacity>
+    )}
+    </View>
+
   )
 }
 
 const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexDirection : 'row',
+    justifyContent: 'space-between'
+  },
   button:{
-    alignItems: "center",
     padding: 20,
     fontSize: 16,
+    flexGrow: 1,
+    marginRight: 10,
     backgroundColor: themeColors.PRIMARY_COLOR,
     borderRadius: 20,
     shadowColor: 'rgba(0,0,0, .4)',
@@ -24,6 +44,18 @@ const styles = StyleSheet.create({
     elevation: 2,
     marginVertical: 10
   },
+  delBtn:{
+    padding: 20,
+    fontSize: 16,
+    backgroundColor: themeColors.BLACK,
+    borderRadius: 20,
+    shadowColor: 'rgba(0,0,0, .4)',
+    shadowOffset: { height: 2, width: 1 },
+    shadowOpacity: 1,
+    shadowRadius: 1,
+    elevation: 2,
+    marginVertical: 10
+  },
   label: {
     fontSize: 20,
     color: themeColors.WHITE

container/container.js

 import React from 'react';
-import { StyleSheet, View } from 'react-native';
+import { SafeAreaView, StyleSheet, View } from 'react-native';
 
 export const AppContainer = (props) => {
   return(
-    <View style={styles.container}>
+    <SafeAreaView style={styles.container}>
       {props.children}
-    </View>
+    </SafeAreaView>
   )
 }
 

screen/User.Auctions.Screen.js

@@ -16,10 +16,10 @@ const  UserAuctionListScreen =  ({navigation}) => {
         <Text style={styles.auctionHeading}>Auctions List</Text>
         <ScrollView>
           <View>
-            <AppAuctionItem label='Auction Item 1' onPress = {() => navigation.navigate("SignUp")}/>
-            <AppAuctionItem label='Auction Item 2'/>
-            <AppAuctionItem label='Auction Item 3'/>
-            <AppAuctionItem label='Auction Item 4'/>
+            <AppAuctionItem label='Auction Item 1' delete onPress = {() => navigation.navigate("SignUp")}/>
+            <AppAuctionItem label='Auction Item 2' delete/>
+            <AppAuctionItem label='Auction Item 3' delete/>
+            <AppAuctionItem label='Auction Item 4' delete/>
           </View>
       </ScrollView>
       </AppContainer>
@@ -32,6 +32,7 @@ export default UserAuctionListScreen;
 const styles = StyleSheet.create({
   container: {
     flex: 1,
+    paddingTop: 50,
     backgroundColor: '#ffffff'
   },
   header: {