stake item added to auction detail page

components/auction.stake.component.js

+import React from 'react';
+import { StyleSheet, View, Text } from 'react-native';
+import themeColors from '../assets/colors';
+
+export const AppStakeItem = (props) => {
+  return(
+    <View style={styles.stake}>
+      <View style={styles.stakeWrapperEdges}/>
+      <View style={styles.stakeSideEdges}>
+        <View style={styles.circleTop}/>
+          <View style={styles.dashedLine}/>
+          <View style={styles.dashedLine}/>
+          <View style={styles.dashedLine}/>
+          <View style={styles.dashedLine}/>
+        <View style={styles.circleEnd}/>
+      </View>
+      <View style={styles.stakeDetailsContent}>
+        <View>
+          <View  style={styles.lotTile}>
+            <Text style={styles.lotText}>62</Text>
+          </View>
+        </View>
+        <View style={styles.lotDetails}>
+          <Text style={styles.lotName}>William Grey</Text>
+          <Text style={styles.label}>Rs. 164.00</Text>
+        </View>
+      </View>
+      <View style={styles.stakeSideEdges}>
+        <View style={styles.circleTop}/>
+          <View style={styles.dashedLine}/>
+          <View style={styles.dashedLine}/>
+          <View style={styles.dashedLine}/>
+          <View style={styles.dashedLine}/>
+        <View style={styles.circleEnd}/>
+      </View>
+      <View style={styles.stakeWrapperEdges}/>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  stake:{
+    alignItems: "center",
+    fontSize: 16,
+    flexDirection: 'row',
+    marginVertical: 10,
+    borderRadius: 10,
+    backgroundColor: themeColors.PRIMARY_COLOR,
+
+  },
+  label: {
+    fontSize: 22,
+    color: themeColors.WHITE
+  },
+  stakeWrapperEdges: {
+    width: 20,
+  },
+  stakeSideEdges: {
+    width: 20,
+    height: '100%',
+    justifyContent: 'space-between',
+  },
+  circleTop: {
+    height:14,
+    borderBottomLeftRadius: 100,
+    borderBottomEndRadius: 100,
+    backgroundColor: themeColors.WHITE
+  },
+  circleEnd: {
+    height:14,
+    borderTopEndRadius: 100,
+    borderTopStartRadius: 100,
+    backgroundColor: themeColors.WHITE
+  },
+  dashedLine: {
+    height: '10%',
+    width: 5,
+    alignSelf: 'center',
+    backgroundColor: 'white'
+  },
+  stakeDetailsContent: {
+    flex: 1,
+    flexDirection: 'row',
+    padding: 30
+  },
+  lotTile: {
+    marginRight: 15,
+    borderRadius: 10,
+    padding: 5,
+    backgroundColor: themeColors.WHITE
+  },
+  lotText: {
+    fontSize: 20,
+    color: themeColors.BLACK
+  },
+  lotName: {
+    fontSize: 16,
+    color: themeColors.WHITE,
+    marginBottom: 5
+  },
+});
+

components/auction_item.component.js

@@ -15,7 +15,7 @@ const styles = StyleSheet.create({
     alignItems: "center",
     padding: 20,
     fontSize: 16,
-    backgroundColor: themeColors.TERTIARY_COLOR,
+    backgroundColor: themeColors.PRIMARY_COLOR,
     borderRadius: 20,
     shadowColor: 'rgba(0,0,0, .4)',
     shadowOffset: { height: 2, width: 1 },

components/carousel.component.js

@@ -134,7 +134,7 @@ const styles = StyleSheet.create({
   image: {
     flex: 1,
     width : deviceWidth,
-    borderBottomStartRadius: 20,
-    borderBottomEndRadius: 20
+    borderBottomStartRadius: 40,
+    borderBottomEndRadius: 40
   }
 })
\ No newline at end of file

screen/Auction.Detail.Screen.js

@@ -4,7 +4,7 @@
 // Import React and Component
 import React from 'react';
 import {View, StyleSheet, Text, ScrollView} from 'react-native';
-import { AppAuctionItem } from '../components/auction_item.component';
+import { AppStakeItem } from '../components/auction.stake.component';
 import { AppContainer } from '../container/container';
 import themeColors from '../assets/colors';
 import { AuctionBottomTab } from '../Navigations/AuctionBottomTab';
@@ -18,19 +18,17 @@ const  AuctionDetailScreen =  (props, {navigation}) => {
       </View>
       <View style={styles.container}>
         <AppContainer>
-          <View>
+          <View style={styles.titleContent}>
             <Text style={styles.auctionHeading}>Title</Text>
-            <View>
-              <Text style={styles.auctionHeading}>Lot No : </Text>
+            <View style={styles.lotContainer}>
+              <Text style={styles.auctionText}>Lot No : </Text>
+              <View style={styles.lot}><Text style={styles.lotText}>17839</Text></View>
             </View>
           </View>
-          <Text style={styles.auctionHeading}>Last Stakes</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'/>
+          <Text style={styles.auctionText}>Last Stakes</Text>
+          <ScrollView horizontal>
+            <View style={styles.stakesContainer}>
+              <AppStakeItem/>
             </View>
         </ScrollView>
         </AppContainer>
@@ -53,21 +51,38 @@ const styles = StyleSheet.create({
   header: {
     height: '35%',
     marginBottom: 25,
-    backgroundColor : themeColors.PRIMARY_COLOR,
-    borderBottomStartRadius: 20,
-    borderBottomEndRadius: 20,
-  },
-  btnRowContainer: {
-    maxHeight: 100
-  },
-  contentContainer: {
-    flex: 1,
-    flexDirection: 'row',
-    margin: 20
+    backgroundColor : themeColors.WHITE
   },
   auctionHeading: {
     fontSize: 24,
     fontWeight: 'bold',
-    color: themeColors.SECONDARY_COLOR
+    color: themeColors.PRIMARY_COLOR
+  },
+  lotContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between'
+  },
+  auctionText: {
+    marginTop: 10,
+    fontSize: 16,
+    fontWeight: '400',
+    color: themeColors.PRIMARY_COLOR
+  },
+  lotText: {
+     fontSize: 16,
+     fontWeight: '400',
+     color: themeColors.WHITE
+   },
+  lot: {
+    backgroundColor : themeColors.PRIMARY_COLOR,
+    borderRadius : 50,
+    justifyContent: 'center',
+    alignContent: 'center',
+    paddingVertical: 8,
+    paddingHorizontal: 20
+  },
+  stakesContainer: {
+    height: 125,
+    flexDirection: 'row'
   }
 })
\ No newline at end of file