Commit 7bcf230d authored by Pramodh Rajapakse's avatar Pramodh Rajapakse

auction_item component modified

parent b64b28a3
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(
<TouchableOpacity onPress={props.onPress} style={styles.button}> <View>
<Text style={styles.label}>{props.label}</Text> {props.delete ? (
</TouchableOpacity> <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({ const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection : 'row',
justifyContent: 'space-between'
},
button:{ button:{
alignItems: "center",
padding: 20, padding: 20,
fontSize: 16, fontSize: 16,
flexGrow: 1,
marginRight: 10,
backgroundColor: themeColors.PRIMARY_COLOR, backgroundColor: themeColors.PRIMARY_COLOR,
borderRadius: 20, borderRadius: 20,
shadowColor: 'rgba(0,0,0, .4)', shadowColor: 'rgba(0,0,0, .4)',
...@@ -24,6 +44,18 @@ const styles = StyleSheet.create({ ...@@ -24,6 +44,18 @@ const styles = StyleSheet.create({
elevation: 2, elevation: 2,
marginVertical: 10 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: { label: {
fontSize: 20, fontSize: 20,
color: themeColors.WHITE 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>
) )
} }
......
...@@ -16,10 +16,10 @@ const UserAuctionListScreen = ({navigation}) => { ...@@ -16,10 +16,10 @@ const UserAuctionListScreen = ({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' 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,6 +32,7 @@ export default UserAuctionListScreen; ...@@ -32,6 +32,7 @@ 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: {
......
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