add auction component added

components/add_bid_button.component.js

+import React from 'react';
+import { StyleSheet, TouchableOpacity, Text, View, TextInput } from 'react-native';
+import themeColors from '../assets/colors';
+import { AppTextInput } from './text_input.component';
+
+export const AppAddBid = (props) => {
+  return(
+    <View style={styles.bidContainer}>
+      <AppTextInput/>
+      <TouchableOpacity onPress={props.onPress} style={styles.bid}>
+      <Text style={styles.label}>Bid</Text>
+    </TouchableOpacity>
+    </View>
+
+  )
+}
+
+const styles = StyleSheet.create({
+  bidContainer: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingHorizontal: 20
+  },
+  bid:{
+    alignItems: "center",
+    padding: 10,
+    fontSize: 16,
+    backgroundColor: themeColors.PRIMARY_COLOR,
+    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
+  }
+});
+

components/auction.stake.component.js

@@ -43,7 +43,6 @@ const styles = StyleSheet.create({
     alignItems: "center",
     fontSize: 16,
     flexDirection: 'row',
-    marginVertical: 10,
     borderRadius: 10,
     backgroundColor: themeColors.PRIMARY_COLOR,
     marginHorizontal: 10

components/text_input.component.js

@@ -15,11 +15,6 @@ const styles = StyleSheet.create({
     fontSize: 16,
     borderBottomColor: themeColors.SECONDARY_COLOR,
     borderBottomWidth: 1,
-  },
-  Text: {
-    fontFamily: 'Poppins-Black',
-    fontSize: 22,
-    color: themeColors.WHITE
   }
 });
 

screen/Auction.Detail.Screen.js

@@ -9,6 +9,7 @@ import { AppContainer } from '../container/container';
 import themeColors from '../assets/colors';
 import { AuctionBottomTab } from '../Navigations/AuctionBottomTab';
 import AppCarousel from '../components/carousel.component';
+import { AppAddBid } from '../components/add_bid_button.component';
 
 const  AuctionDetailScreen =  (props, {navigation}) => {
   return (
@@ -26,7 +27,7 @@ const  AuctionDetailScreen =  (props, {navigation}) => {
             </View>
           </View>
           <Text style={styles.auctionText}>Last Stakes</Text>
-          <ScrollView horizontal>
+          <ScrollView horizontal style={{height: 100}}>
             <View style={styles.stakesContainer}>
               <AppStakeItem/>
               <AppStakeItem/>
@@ -34,6 +35,7 @@ const  AuctionDetailScreen =  (props, {navigation}) => {
               <AppStakeItem/>
             </View>
         </ScrollView>
+        <AppAddBid/>
         </AppContainer>
         <AuctionBottomTab/>
       </View>
@@ -86,6 +88,7 @@ const styles = StyleSheet.create({
   },
   stakesContainer: {
     height: 125,
+    marginTop: 20,
     flexDirection: 'row'
   }
 })
\ No newline at end of file