Commit 33a3d12b authored by Pramodh Rajapakse's avatar Pramodh Rajapakse

countdown component added

parent 9406ec59
...@@ -2,6 +2,8 @@ import React from 'react'; ...@@ -2,6 +2,8 @@ import React from 'react';
import { StyleSheet, TouchableOpacity, Text, View } 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'; import { MaterialIcons } from '@expo/vector-icons';
import AppCountDownTimer from './countdown_component';
export const AppAuctionItem = props => { export const AppAuctionItem = props => {
return( return(
<View> <View>
...@@ -9,15 +11,19 @@ export const AppAuctionItem = props => { ...@@ -9,15 +11,19 @@ export const AppAuctionItem = props => {
<View style={styles.container}> <View style={styles.container}>
<TouchableOpacity onPress={props.onSelect} style={styles.button}> <TouchableOpacity onPress={props.onSelect} style={styles.button}>
<Text style={styles.label}>{props.label}</Text> <Text style={styles.label}>{props.label}</Text>
<AppCountDownTimer/>
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity onPress={props.onDelete} style={styles.delBtn}> <TouchableOpacity onPress={props.onDelete} style={styles.delBtn}>
<MaterialIcons name="delete" size={24} color={themeColors.WHITE} /> <MaterialIcons name="delete" size={24} color={themeColors.WHITE} />
</TouchableOpacity> </TouchableOpacity>
</View> </View>
) : ( ) : (
<TouchableOpacity onPress={props.onPress} style={styles.button}> <View style={styles.container}>
<Text style={styles.label}>{props.label}</Text> <TouchableOpacity onPress={props.onPress} style={styles.button}>
</TouchableOpacity> <Text style={styles.label}>{props.label}</Text>
<AppCountDownTimer/>
</TouchableOpacity>
</View>
)} )}
</View> </View>
...@@ -35,6 +41,9 @@ const styles = StyleSheet.create({ ...@@ -35,6 +41,9 @@ const styles = StyleSheet.create({
fontSize: 16, fontSize: 16,
flexGrow: 1, flexGrow: 1,
marginRight: 10, marginRight: 10,
flexDirection:'row',
justifyContent: 'space-between',
alignItems: 'center',
backgroundColor: themeColors.PRIMARY_COLOR, backgroundColor: themeColors.PRIMARY_COLOR,
borderRadius: 20, borderRadius: 20,
shadowColor: 'rgba(0,0,0, .4)', shadowColor: 'rgba(0,0,0, .4)',
......
import { CountdownCircleTimer } from 'react-native-countdown-circle-timer'
import React from 'react';
import {Animated} from 'react-native';
import themeColors from '../assets/colors';
const AppCountDownTimer = () => (
<CountdownCircleTimer
isPlaying
size={40}
strokeWidth={5}
duration={10}
colors={[
['#004777', 0.4],
['#F7B801', 0.4],
['#A30000', 0.2],
]}
>
{({ remainingTime }) => (
<Animated.Text style={{ color: themeColors.WHITE }}>
{remainingTime}
</Animated.Text>
)}
</CountdownCircleTimer>
);
export default AppCountDownTimer
\ 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