From 74c853034e893aeda18ee78f59e4539fba6d8fc0 Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Tue, 20 Jul 2021 17:58:31 -0400
Subject: Fix logic to make progress bar work

---
 src/components/common/GradientProgressBar.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

(limited to 'src/components/common/GradientProgressBar.tsx')

diff --git a/src/components/common/GradientProgressBar.tsx b/src/components/common/GradientProgressBar.tsx
index 2f7f0431..fc62bd3c 100644
--- a/src/components/common/GradientProgressBar.tsx
+++ b/src/components/common/GradientProgressBar.tsx
@@ -1,6 +1,7 @@
 import React, {FC} from 'react';
-import {StyleSheet, View, ViewProps} from 'react-native';
+import {StyleSheet, ViewProps, ViewStyle} from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
+import Animated, {useAnimatedStyle} from 'react-native-reanimated';
 import {
   TAGG_LIGHT_BLUE_2,
   TAGG_LIGHT_BLUE_3,
@@ -9,19 +10,22 @@ import {
 import {normalize} from '../../utils';
 
 interface GradientProgressBarProps extends ViewProps {
-  progress: number;
+  progress: Animated.SharedValue<number>;
 }
 
 const GradientProgressBar: FC<GradientProgressBarProps> = ({
   style,
   progress,
 }) => {
+  const animatedProgressStyle = useAnimatedStyle<ViewStyle>(() => ({
+    width: `${(1 - progress.value) * 100}%`,
+  }));
   return (
     <LinearGradient
       style={[styles.bar, style]}
       useAngle={true}
       colors={[TAGG_PURPLE, TAGG_LIGHT_BLUE_2]}>
-      <View style={[styles.blank, {width: `${(1 - progress) * 100}%`}]} />
+      <Animated.View style={[styles.blank, animatedProgressStyle]} />
     </LinearGradient>
   );
 };
-- 
cgit v1.2.3-70-g09d2