Merge branch 'feature/auction-detail-screen' into 'dev'

Feature/auction detail screen

See merge request !2

Navigations/AuthStack.js

@@ -14,6 +14,7 @@ import HomeAuctionScreen from  "../screen/Home.Auction.Screen";
 import UserAuctionListScreen from "../screen/User.Auctions.Screen";
 import UserBidScreen from "../screen/User.Bids.Screen";
 import AuctionListScreen from "../screen/Auctions.List.Screen";
+import AuctionDetailScreen from "../screen/Auction.Detail.Screen";
 
 const Stack = createStackNavigator();
 
@@ -225,6 +226,15 @@ export function AuthStack({ navigation }) {
           headerTitleAlign: "center"
         }}
       />
+      <Stack.Screen
+        name="AuctionDetailScreen"
+        component={AuctionDetailScreen}
+        options={{
+          headerShown: false,
+          title: "Auctions List",
+          headerTitleAlign: "center"
+        }}
+      />
       <Stack.Screen
         name="AboutUs"
         component={AboutUs}

components/add_bid_button.component.js

+import React from 'react';
+import { StyleSheet, TouchableOpacity, View, TextInput } from 'react-native';
+import themeColors from '../assets/colors';
+import { MaterialIcons} from "@expo/vector-icons";
+export const AppAddBid = (props) => {
+  return(
+    <View style={styles.bidContainer}>
+      <TextInput style={styles.input} keyboardType='number-pad' placeholder='Enter bid'/>
+      <TouchableOpacity onPress={props.onPress} style={styles.bid}>
+        <MaterialIcons name="add" size={16} color={themeColors.WHITE} />
+      </TouchableOpacity>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  bidContainer: {
+    flex: 1,
+    marginVertical: 10,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 20,
+    borderRadius: 20,
+    borderWidth: 1,
+    borderColor: themeColors.TERTIARY_COLOR,
+    maxHeight: 50
+  },
+  bid:{
+    alignItems: "center",
+    padding: 8,
+    backgroundColor: themeColors.PRIMARY_COLOR,
+    borderRadius: 20,
+    shadowColor: 'rgba(0,0,0, .4)',
+    shadowOffset: { height: 2, width: 1 },
+    shadowOpacity: 1,
+    shadowRadius: 1,
+    elevation: 2,
+    height: 33
+  },
+  input:{
+    alignItems: "center",
+    padding: 10,
+    fontSize: 16,
+    width: '80%'
+  }
+});
+

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',
+    borderRadius: 10,
+    backgroundColor: themeColors.PRIMARY_COLOR,
+    marginHorizontal: 10
+  },
+  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

 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,
-    backgroundColor: themeColors.TERTIARY_COLOR,
+    flexGrow: 1,
+    marginRight: 10,
+    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
+  },
+  delBtn:{
+    padding: 20,
+    fontSize: 16,
+    backgroundColor: themeColors.BLACK,
     borderRadius: 20,
     shadowColor: 'rgba(0,0,0, .4)',
     shadowOffset: { height: 2, width: 1 },

components/carousel.component.js

+
+import React, { Component } from 'react'
+import { Animated, View, StyleSheet, Image, Dimensions, ScrollView , Text} from 'react-native'
+import themeColors from '../assets/colors'
+
+const deviceWidth = Dimensions.get('window').width
+const FIXED_BAR_WIDTH = 100
+const BAR_SPACE = 10
+
+const images = [
+  'https://s-media-cache-ak0.pinimg.com/originals/ee/51/39/ee5139157407967591081ee04723259a.png',
+  'https://s-media-cache-ak0.pinimg.com/originals/40/4f/83/404f83e93175630e77bc29b3fe727cbe.jpg',
+  'https://s-media-cache-ak0.pinimg.com/originals/8d/1a/da/8d1adab145a2d606c85e339873b9bb0e.jpg',
+]
+
+export default class AppCarousel extends Component {
+
+  numItems = images.length
+  itemWidth = (FIXED_BAR_WIDTH / this.numItems) - ((this.numItems - 1) * BAR_SPACE)
+  animVal = new Animated.Value(0)
+
+  render() {
+    let imageArray = []
+    let barArray = []
+    images.forEach((image, i) => {
+      console.log(image, i)
+      const thisImage = (
+        <Image
+          key={`image${i}`}
+          source={{uri: image}}
+          style={styles.image}
+        />
+      )
+      imageArray.push(thisImage)
+
+      const scrollBarVal = this.animVal.interpolate({
+        inputRange: [deviceWidth * (i - 1), deviceWidth * (i + 1)],
+        outputRange: [-this.itemWidth, this.itemWidth],
+        extrapolate: 'clamp',
+      })
+
+      const thisBar = (
+        <View
+          key={`bar${i}`}
+          style={[
+            styles.track,
+            {
+              width: this.itemWidth,
+              marginLeft: i === 0 ? 0 : BAR_SPACE,
+            },
+          ]}
+        >
+          <Animated.View
+
+            style={[
+              styles.bar,
+              {
+                width: this.itemWidth,
+                transform: [
+                  { translateX: scrollBarVal },
+                ],
+              },
+            ]}
+          />
+        </View>
+      )
+      barArray.push(thisBar)
+    })
+
+    return (
+      <View
+        style={styles.container}
+        flex={1}
+      >
+        <ScrollView
+          horizontal
+          showsHorizontalScrollIndicator={false}
+          scrollEventThrottle={10}
+          pagingEnabled
+          onScroll={
+            Animated.event(
+              [{ nativeEvent: { contentOffset: { x: this.animVal } } }]
+            )
+          }
+        >
+
+          {imageArray}
+ <View
+          style={styles.skip}
+        >
+        </View>
+        </ScrollView>
+        <View
+          style={styles.barContainer}
+        >
+          {barArray}
+        </View>
+      </View>
+    )
+  }
+}
+
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  barContainer: {
+    position: 'absolute',
+    zIndex: 2,
+    bottom: 40,
+    flexDirection: 'row',
+  },
+    skip: {
+    position: 'absolute',
+    zIndex: 2,
+    bottom: 80,
+    flexDirection: 'row',
+  },
+  track: {
+    backgroundColor: themeColors.SECONDARY_COLOR,
+    overflow: 'hidden',
+    height: 2,
+  },
+  bar: {
+    backgroundColor: themeColors.WHITE,
+    height: 2,
+    position: 'absolute',
+    left: 0,
+    top: 0,
+  },
+  image: {
+    flex: 1,
+    width : deviceWidth,
+    borderBottomStartRadius: 40,
+    borderBottomEndRadius: 40
+  }
+})
\ No newline at end of file

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
   }
 });
 

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/Auction.Detail.Screen.js

+// Example of Splash, Login and Sign Up in React Native
+// https://aboutreact.com/react-native-login-and-signup/
+
+// Import React and Component
+import React from 'react';
+import {View, StyleSheet, Text, ScrollView} from 'react-native';
+import { AppStakeItem } from '../components/auction.stake.component';
+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 (
+    <View style={styles.wrapper}>
+      <View style={styles.header}>
+        <AppCarousel/>
+      </View>
+      <View style={styles.container}>
+        <AppContainer>
+          <View style={styles.titleContent}>
+            <Text style={styles.auctionHeading}>Auction Item</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.auctionText}>Last Stakes</Text>
+          <ScrollView horizontal style={{height: 100}}>
+            <View style={styles.stakesContainer}>
+              <AppStakeItem/>
+              <AppStakeItem/>
+              <AppStakeItem/>
+              <AppStakeItem/>
+            </View>
+        </ScrollView>
+        <AppAddBid/>
+        </AppContainer>
+        <AuctionBottomTab/>
+      </View>
+    </View>
+  );
+};
+export default AuctionDetailScreen;
+
+const styles = StyleSheet.create({
+  wrapper: {
+    flex: 1,
+    backgroundColor: themeColors.WHITE
+  },
+  container: {
+    flex: 1,
+    backgroundColor: '#ffffff'
+  },
+  header: {
+    height: '35%',
+    marginBottom: 25,
+    backgroundColor : themeColors.WHITE
+  },
+  auctionHeading: {
+    fontSize: 24,
+    fontWeight: '600',
+    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,
+    marginTop: 20,
+    flexDirection: 'row'
+  }
+})
\ No newline at end of file

screen/Home.Auction.Screen.js

@@ -17,7 +17,7 @@ const  HomeAuctionScreen =  ({navigation}) => {
         <Text style={styles.auctionHeading}>Auctions List</Text>
         <ScrollView>
           <View>
-            <AppAuctionItem label='Auction Item 1' onPress = {() => navigation.navigate("SignUp")}/>
+            <AppAuctionItem label='Auction Item 1' onPress = {() => navigation.navigate("AuctionDetailScreen")}/>
             <AppAuctionItem label='Auction Item 2'/>
             <AppAuctionItem label='Auction Item 3'/>
             <AppAuctionItem label='Auction Item 4'/>

screen/User.Auctions.Screen.js

@@ -3,23 +3,28 @@
 
 // Import React and Component
 import React from 'react';
-import {View, StyleSheet, Text, ScrollView} from 'react-native';
+import {View, StyleSheet, Text, ScrollView, TouchableOpacity} from 'react-native';
 import { AppAuctionItem } from '../components/auction_item.component';
 import { AppContainer } from '../container/container';
 import themeColors from '../assets/colors';
 import { AuctionBottomTab } from '../Navigations/AuctionBottomTab';
-
-const  UserAuctionListScreen =  ({navigation}) => {
+import { MaterialIcons } from '@expo/vector-icons';
+const  UserAuctionListScreen =  (props, {navigation}) => {
   return (
     <View style={styles.container}>
       <AppContainer>
+        <View style={styles.header}>
           <Text style={styles.auctionHeading}>Auctions List</Text>
+          <TouchableOpacity onPress={props.onPress} style={styles.addBtn}>
+            <MaterialIcons name="add" size={16} color={themeColors.WHITE} />
+          </TouchableOpacity>
+        </View>
         <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,24 +37,29 @@ export default UserAuctionListScreen;
 const styles = StyleSheet.create({
   container: {
     flex: 1,
+    paddingTop: 50,
     backgroundColor: '#ffffff'
   },
   header: {
-    height: '35%',
-    marginBottom: 25,
-    backgroundColor : themeColors.PRIMARY_COLOR
-  },
-  btnRowContainer: {
-    maxHeight: 100
-  },
-  contentContainer: {
-    flex: 1,
     flexDirection: 'row',
-    margin: 20
+    justifyContent: 'space-between',
+    height: 50
   },
   auctionHeading: {
     fontSize: 24,
     fontWeight: 'bold',
-    color: themeColors.SECONDARY_COLOR
-  }
+    color: themeColors.BLACK,
+  },
+  addBtn:{
+    alignItems: "center",
+    padding: 8,
+    backgroundColor: themeColors.BLACK,
+    borderRadius: 20,
+    shadowColor: 'rgba(0,0,0, .4)',
+    shadowOffset: { height: 2, width: 1 },
+    shadowOpacity: 1,
+    shadowRadius: 1,
+    elevation: 2,
+    height: 33
+  },
 })
\ No newline at end of file