fix: adjust progress bar wrapper height on web

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,
   },

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,
   },

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';
 
@@ -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));
@@ -59,3 +63,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%',
+  });
+});

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}