Commit 3e00d5f7 authored by A.G.J.L.P RAJAPAKSE - IT17023610's avatar A.G.J.L.P RAJAPAKSE - IT17023610

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

Feature/auction detail screen

See merge request !2
parents fe5d897a b676ef03
...@@ -14,6 +14,7 @@ import HomeAuctionScreen from "../screen/Home.Auction.Screen"; ...@@ -14,6 +14,7 @@ import HomeAuctionScreen from "../screen/Home.Auction.Screen";
import UserAuctionListScreen from "../screen/User.Auctions.Screen"; import UserAuctionListScreen from "../screen/User.Auctions.Screen";
import UserBidScreen from "../screen/User.Bids.Screen"; import UserBidScreen from "../screen/User.Bids.Screen";
import AuctionListScreen from "../screen/Auctions.List.Screen"; import AuctionListScreen from "../screen/Auctions.List.Screen";
import AuctionDetailScreen from "../screen/Auction.Detail.Screen";
const Stack = createStackNavigator(); const Stack = createStackNavigator();
...@@ -225,6 +226,15 @@ export function AuthStack({ navigation }) { ...@@ -225,6 +226,15 @@ export function AuthStack({ navigation }) {
headerTitleAlign: "center" headerTitleAlign: "center"
}} }}
/> />
<Stack.Screen
name="AuctionDetailScreen"
component={AuctionDetailScreen}
options={{
headerShown: false,
title: "Auctions List",
headerTitleAlign: "center"
}}
/>
<Stack.Screen <Stack.Screen
name="AboutUs" name="AboutUs"
component={AboutUs} component={AboutUs}
......
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%'
}
});
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
},
});
import React from 'react'; import React from 'react';
import { StyleSheet, TouchableOpacity, Text } from 'react-native'; import { StyleSheet, TouchableOpacity, Text, View } from 'react-native';
import themeColors from '../assets/colors'; import themeColors from '../assets/colors';
import { MaterialIcons } from '@expo/vector-icons';
export const AppAuctionItem = (props) => { export const AppAuctionItem = props => {
return( 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}> <TouchableOpacity onPress={props.onPress} style={styles.button}>
<Text style={styles.label}>{props.label}</Text> <Text style={styles.label}>{props.label}</Text>
</TouchableOpacity> </TouchableOpacity>
)}
</View>
) )
} }
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection : 'row',
justifyContent: 'space-between'
},
button:{ button:{
alignItems: "center",
padding: 20, padding: 20,
fontSize: 16, 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, borderRadius: 20,
shadowColor: 'rgba(0,0,0, .4)', shadowColor: 'rgba(0,0,0, .4)',
shadowOffset: { height: 2, width: 1 }, shadowOffset: { height: 2, width: 1 },
......
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
...@@ -15,11 +15,6 @@ const styles = StyleSheet.create({ ...@@ -15,11 +15,6 @@ const styles = StyleSheet.create({
fontSize: 16, fontSize: 16,
borderBottomColor: themeColors.SECONDARY_COLOR, borderBottomColor: themeColors.SECONDARY_COLOR,
borderBottomWidth: 1, borderBottomWidth: 1,
},
Text: {
fontFamily: 'Poppins-Black',
fontSize: 22,
color: themeColors.WHITE
} }
}); });
import React from 'react'; import React from 'react';
import { StyleSheet, View } from 'react-native'; import { SafeAreaView, StyleSheet, View } from 'react-native';
export const AppContainer = (props) => { export const AppContainer = (props) => {
return( return(
<View style={styles.container}> <SafeAreaView style={styles.container}>
{props.children} {props.children}
</View> </SafeAreaView>
) )
} }
......
// 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
...@@ -17,7 +17,7 @@ const HomeAuctionScreen = ({navigation}) => { ...@@ -17,7 +17,7 @@ const HomeAuctionScreen = ({navigation}) => {
<Text style={styles.auctionHeading}>Auctions List</Text> <Text style={styles.auctionHeading}>Auctions List</Text>
<ScrollView> <ScrollView>
<View> <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 2'/>
<AppAuctionItem label='Auction Item 3'/> <AppAuctionItem label='Auction Item 3'/>
<AppAuctionItem label='Auction Item 4'/> <AppAuctionItem label='Auction Item 4'/>
......
...@@ -3,23 +3,28 @@ ...@@ -3,23 +3,28 @@
// Import React and Component // Import React and Component
import React from 'react'; 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 { AppAuctionItem } from '../components/auction_item.component';
import { AppContainer } from '../container/container'; import { AppContainer } from '../container/container';
import themeColors from '../assets/colors'; import themeColors from '../assets/colors';
import { AuctionBottomTab } from '../Navigations/AuctionBottomTab'; import { AuctionBottomTab } from '../Navigations/AuctionBottomTab';
import { MaterialIcons } from '@expo/vector-icons';
const UserAuctionListScreen = ({navigation}) => { const UserAuctionListScreen = (props, {navigation}) => {
return ( return (
<View style={styles.container}> <View style={styles.container}>
<AppContainer> <AppContainer>
<View style={styles.header}>
<Text style={styles.auctionHeading}>Auctions List</Text> <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> <ScrollView>
<View> <View>
<AppAuctionItem label='Auction Item 1' onPress = {() => navigation.navigate("SignUp")}/> <AppAuctionItem label='Auction Item 1' delete onPress = {() => navigation.navigate("SignUp")}/>
<AppAuctionItem label='Auction Item 2'/> <AppAuctionItem label='Auction Item 2' delete/>
<AppAuctionItem label='Auction Item 3'/> <AppAuctionItem label='Auction Item 3' delete/>
<AppAuctionItem label='Auction Item 4'/> <AppAuctionItem label='Auction Item 4' delete/>
</View> </View>
</ScrollView> </ScrollView>
</AppContainer> </AppContainer>
...@@ -32,24 +37,29 @@ export default UserAuctionListScreen; ...@@ -32,24 +37,29 @@ export default UserAuctionListScreen;
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
flex: 1, flex: 1,
paddingTop: 50,
backgroundColor: '#ffffff' backgroundColor: '#ffffff'
}, },
header: { header: {
height: '35%',
marginBottom: 25,
backgroundColor : themeColors.PRIMARY_COLOR
},
btnRowContainer: {
maxHeight: 100
},
contentContainer: {
flex: 1,
flexDirection: 'row', flexDirection: 'row',
margin: 20 justifyContent: 'space-between',
height: 50
}, },
auctionHeading: { auctionHeading: {
fontSize: 24, fontSize: 24,
fontWeight: 'bold', 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
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment