From be66e45284f540d87e62e9e1e889cf8e102d89bc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Th=C3=A9o=20Poizat?= <hello@zatteo.com>
Date: Wed, 10 Jul 2024 16:56:21 +0200
Subject: [PATCH]  fix: Compute progress bar colors at call

When need to compute colors at call because we check the darkmode flag and Appearance.colorScheme to determine colors.
---
 src/components/Bar.tsx                        |  2 +-
 .../cozy-app/CozyAppScreen.Animation.tsx      |  2 +-
 .../cozy-app/CozyAppScreen.functions.ts       | 25 +++++++++++--------
 3 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/src/components/Bar.tsx b/src/components/Bar.tsx
index 17f58b601..b01eef8a8 100644
--- a/src/components/Bar.tsx
+++ b/src/components/Bar.tsx
@@ -15,7 +15,7 @@ const INDETERMINATE_WIDTH_FACTOR = 0.6 // 0.3 to 0.6
 const BAR_WIDTH_ZERO_POSITION =
   INDETERMINATE_WIDTH_FACTOR / (1 + INDETERMINATE_WIDTH_FACTOR)
 
-interface ProgressBarProps {
+export interface ProgressBarProps {
   animated?: boolean
   borderRadius?: number
   borderWidth?: number
diff --git a/src/screens/cozy-app/CozyAppScreen.Animation.tsx b/src/screens/cozy-app/CozyAppScreen.Animation.tsx
index 6953447e9..929ffd094 100644
--- a/src/screens/cozy-app/CozyAppScreen.Animation.tsx
+++ b/src/screens/cozy-app/CozyAppScreen.Animation.tsx
@@ -124,7 +124,7 @@ export const Animation = ({
       <Animated.View
         style={[styles.progressBarContainer, { opacity: animateBarOpacity }]}
       >
-        <ProgressBar {...progressBarConfig} />
+        <ProgressBar {...progressBarConfig()} />
       </Animated.View>
     </Animated.View>
   )
diff --git a/src/screens/cozy-app/CozyAppScreen.functions.ts b/src/screens/cozy-app/CozyAppScreen.functions.ts
index 239b0cfac..2ff8eca8b 100644
--- a/src/screens/cozy-app/CozyAppScreen.functions.ts
+++ b/src/screens/cozy-app/CozyAppScreen.functions.ts
@@ -6,8 +6,7 @@ import { routes } from '/constants/routes'
 import { getDimensions } from '/libs/dimensions'
 import { NetService } from '/libs/services/NetService'
 import { getColors } from '/ui/colors'
-
-const colors = getColors({ useUserColorScheme: true })
+import { ProgressBarProps } from '/components/Bar'
 
 export const handleError = ({ nativeEvent }: WebViewErrorEvent): void => {
   const { code, description } = nativeEvent
@@ -25,15 +24,19 @@ export const config = {
 
 // Width has to be null at start even if it's not a valid value (was set to undefined and it broke the progress bar)
 // At the time of this fix we want to go back the previously working value but we have to investigate why it has to be null
-export const progressBarConfig = {
-  width: null as unknown as number | undefined,
-  indeterminate: true,
-  unfilledColor: colors.defaultBackgroundColor,
-  color: colors.primaryColor,
-  borderWidth: 0,
-  height: 8,
-  borderRadius: 100,
-  indeterminateAnimationDuration: 1500
+export const progressBarConfig = (): ProgressBarProps => {
+  const colors = getColors({ useUserColorScheme: true })
+
+  return {
+    width: null as unknown as number | undefined,
+    indeterminate: true,
+    unfilledColor: colors.defaultBackgroundColor,
+    color: colors.primaryColor,
+    borderWidth: 0,
+    height: 8,
+    borderRadius: 100,
+    indeterminateAnimationDuration: 1500
+  }
 }
 
 export const progressBarAnimConfig = {