countdown component added

components/auction_item.component.js

@@ -2,6 +2,8 @@ import React from 'react';
 import { StyleSheet, TouchableOpacity, Text, View } from 'react-native';
 import themeColors from '../assets/colors';
 import { MaterialIcons } from '@expo/vector-icons';
+import AppCountDownTimer from './countdown_component';
+
 export const AppAuctionItem = props => {
   return(
     <View>
@@ -9,15 +11,19 @@ export const AppAuctionItem = props => {
       <View style={styles.container}>
         <TouchableOpacity onPress={props.onSelect} style={styles.button}>
           <Text style={styles.label}>{props.label}</Text>
+          <AppCountDownTimer/>
         </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 style={styles.container}>
+        <TouchableOpacity onPress={props.onPress} style={styles.button}>
+          <Text style={styles.label}>{props.label}</Text>
+          <AppCountDownTimer/>
+        </TouchableOpacity>
+      </View>
     )}
     </View>
 
@@ -35,6 +41,9 @@ const styles = StyleSheet.create({
     fontSize: 16,
     flexGrow: 1,
     marginRight: 10,
+    flexDirection:'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
     backgroundColor: themeColors.PRIMARY_COLOR,
     borderRadius: 20,
     shadowColor: 'rgba(0,0,0, .4)',

components/countdown_component.js

+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