From c06f2b297b1f01ec85a1d288e774941dc106944c Mon Sep 17 00:00:00 2001
From: lukewalczak <lukasz.walczak.pwr@gmail.com>
Date: Sun, 23 Jul 2023 18:18:48 +0200
Subject: [PATCH 1/2] fix: cadjust progress bar wrapper height on web

---
 example/src/Examples/ProgressBarExample.tsx   | 19 +++++++++++++++++++
 src/components/ProgressBar.tsx                | 11 ++++++++---
 src/components/__tests__/ProgressBar.test.tsx | 12 +++++++++++-
 .../__snapshots__/ProgressBar.test.tsx.snap   |  4 ++++
 4 files changed, 42 insertions(+), 4 deletions(-)

diff --git a/example/src/Examples/ProgressBarExample.tsx b/example/src/Examples/ProgressBarExample.tsx
index a51c2f8301..e1b2b61a9a 100644
--- a/example/src/Examples/ProgressBarExample.tsx
+++ b/example/src/Examples/ProgressBarExample.tsx
@@ -94,11 +94,23 @@ const ProgressBarExample = () => {
       <View style={styles.row}>
         <Text variant="bodyMedium">ProgressBar with animated value</Text>
         <AnimatedProgressBar
+          visible={visible}
           style={styles.progressBar}
           animatedValue={progressBarValue}
           theme={theme}
         />
       </View>
+
+      <View style={[styles.row, styles.fullRow]}>
+        <Text variant="bodyMedium">
+          ProgressBar with custom percentage height
+        </Text>
+        <ProgressBar
+          style={styles.customPercentageHeight}
+          indeterminate
+          visible={visible}
+        />
+      </View>
     </ScreenWrapper>
   );
 };
@@ -112,9 +124,16 @@ const styles = StyleSheet.create({
   row: {
     marginVertical: 10,
   },
+  fullRow: {
+    height: '100%',
+    width: '100%',
+  },
   customHeight: {
     height: 20,
   },
+  customPercentageHeight: {
+    height: '50%',
+  },
   progressBar: {
     height: 15,
   },
diff --git a/src/components/ProgressBar.tsx b/src/components/ProgressBar.tsx
index 89b9fe67c9..3c7443e9bc 100644
--- a/src/components/ProgressBar.tsx
+++ b/src/components/ProgressBar.tsx
@@ -74,6 +74,7 @@ const ProgressBar = ({
   animatedValue,
   ...rest
 }: Props) => {
+  const isWeb = Platform.OS === 'web';
   const theme = useInternalTheme(themeOverrides);
   const { current: timer } = React.useRef<Animated.Value>(
     new Animated.Value(0)
@@ -123,7 +124,7 @@ const ProgressBar = ({
           duration: INDETERMINATE_DURATION,
           toValue: 1,
           // Animated.loop does not work if useNativeDriver is true on web
-          useNativeDriver: Platform.OS !== 'web',
+          useNativeDriver: !isWeb,
           isInteraction: false,
         });
       }
@@ -140,7 +141,7 @@ const ProgressBar = ({
         isInteraction: false,
       }).start();
     }
-  }, [fade, scale, indeterminate, timer, progress]);
+  }, [fade, scale, indeterminate, timer, progress, isWeb]);
 
   const stopAnimation = React.useCallback(() => {
     // Stop indeterminate animation
@@ -194,6 +195,7 @@ const ProgressBar = ({
       accessibilityValue={
         indeterminate ? {} : { min: 0, max: 100, now: progress * 100 }
       }
+      style={isWeb && styles.webContainer}
     >
       <Animated.View
         style={[
@@ -263,7 +265,10 @@ const styles = StyleSheet.create({
     height: 4,
     overflow: 'hidden',
   },
-
+  webContainer: {
+    width: '100%',
+    height: '100%',
+  },
   progressBar: {
     flex: 1,
   },
diff --git a/src/components/__tests__/ProgressBar.test.tsx b/src/components/__tests__/ProgressBar.test.tsx
index 3b7a6533ce..b09a5a1b83 100644
--- a/src/components/__tests__/ProgressBar.test.tsx
+++ b/src/components/__tests__/ProgressBar.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Animated } from 'react-native';
+import { Animated, Platform } from 'react-native';
 
 import { render, waitFor } from '@testing-library/react-native';
 
@@ -59,3 +59,13 @@ it('renders indeterminate progress bar', async () => {
 
   expect(tree.toJSON()).toMatchSnapshot();
 });
+
+it('renders progress bar with full height on web', () => {
+  Platform.OS = 'web';
+  const tree = render(<ProgressBar progress={0.2} />);
+
+  expect(tree.getByRole(a11yRole)).toHaveStyle({
+    width: '100%',
+    height: '100%',
+  });
+});
diff --git a/src/components/__tests__/__snapshots__/ProgressBar.test.tsx.snap b/src/components/__tests__/__snapshots__/ProgressBar.test.tsx.snap
index ead876fb2b..291bd6739f 100644
--- a/src/components/__tests__/__snapshots__/ProgressBar.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/ProgressBar.test.tsx.snap
@@ -17,6 +17,7 @@ exports[`renders colored progress bar 1`] = `
   }
   accessible={true}
   onLayout={[Function]}
+  style={false}
 >
   <View
     collapsable={false}
@@ -68,6 +69,7 @@ exports[`renders hidden progress bar 1`] = `
   }
   accessible={true}
   onLayout={[Function]}
+  style={false}
 >
   <View
     collapsable={false}
@@ -113,6 +115,7 @@ exports[`renders indeterminate progress bar 1`] = `
   accessibilityValue={Object {}}
   accessible={true}
   onLayout={[Function]}
+  style={false}
 >
   <View
     collapsable={false}
@@ -164,6 +167,7 @@ exports[`renders progress bar with specific progress 1`] = `
   }
   accessible={true}
   onLayout={[Function]}
+  style={false}
 >
   <View
     collapsable={false}

From 64488a8ce51bbd5611ee0035035f27da7f171826 Mon Sep 17 00:00:00 2001
From: lukewalczak <lukasz.walczak.pwr@gmail.com>
Date: Tue, 25 Jul 2023 12:28:39 +0200
Subject: [PATCH 2/2] test: reset platform os to default value

---
 src/components/__tests__/ProgressBar.test.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/__tests__/ProgressBar.test.tsx b/src/components/__tests__/ProgressBar.test.tsx
index b09a5a1b83..7e0a06a7df 100644
--- a/src/components/__tests__/ProgressBar.test.tsx
+++ b/src/components/__tests__/ProgressBar.test.tsx
@@ -23,6 +23,10 @@ class ClassProgressBar extends React.Component<Props> {
 
 const AnimatedProgressBar = Animated.createAnimatedComponent(ClassProgressBar);
 
+afterEach(() => {
+  Platform.OS = 'ios';
+});
+
 it('renders progress bar with animated value', async () => {
   const tree = render(<AnimatedProgressBar animatedValue={0.2} />);
   await waitFor(() => tree.getByRole(a11yRole).props.onLayout(layoutEvent));