count down component modified

assets/colors.js

@@ -3,7 +3,8 @@ const themeColors = {
   SECONDARY_COLOR : '#808080',
   TERTIARY_COLOR : '#CECECE',
   BLACK : '#191919',
-  WHITE : '#FFFFFF'
+  WHITE : '#FFFFFF',
+  RED : '#DC143C'
 };
 
 export default themeColors;

components/countdown_component.js

@@ -9,10 +9,11 @@ const AppCountDownTimer = () => (
     size={40}
     strokeWidth={5}
     duration={10}
+    trailColor={themeColors.WHITE}
     colors={[
-      ['#004777', 0.4],
-      ['#F7B801', 0.4],
-      ['#A30000', 0.2],
+      [themeColors.BLACK, 0.4],
+      [themeColors.SECONDARY_COLOR, 0.4],
+      [themeColors.RED, 0.2],
     ]}
   >
     {({ remainingTime }) => (

package.json

@@ -22,9 +22,9 @@
     "expo-status-bar": "~1.0.4",
     "formik": "^2.2.9",
     "react": "16.13.1",
-    "react-countdown-circle-timer": "^2.5.4",
     "react-dom": "16.13.1",
     "react-native": "https://github.com/expo/react-native/archive/sdk-41.0.0.tar.gz",
+    "react-native-countdown-circle-timer": "^2.5.4",
     "react-native-gesture-handler": "^1.10.3",
     "react-native-image-slideshow": "^1.0.1",
     "react-native-paper": "^4.9.2",