feat: progress bar fill style (#4222)

src/components/ProgressBar.tsx

@@ -38,11 +38,19 @@ export type Props = React.ComponentPropsWithRef<typeof View> & {
    * Whether to show the ProgressBar (true, the default) or hide it (false).
    */
   visible?: boolean;
+  /**
+   * Style of filled part of the ProgresBar.
+   */
+  fillStyle?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
   style?: StyleProp<ViewStyle>;
   /**
    * @optional
    */
   theme?: ThemeProp;
+  /**
+   * testID to be used on tests.
+   */
+  testID?: string;
 };
 
 const INDETERMINATE_DURATION = 2000;
@@ -67,11 +75,13 @@ const { isRTL } = I18nManager;
 const ProgressBar = ({
   color,
   indeterminate,
-  style,
   progress = 0,
   visible = true,
   theme: themeOverrides,
   animatedValue,
+  style,
+  fillStyle,
+  testID = 'progress-bar',
   ...rest
 }: Props) => {
   const isWeb = Platform.OS === 'web';
@@ -196,6 +206,7 @@ const ProgressBar = ({
         indeterminate ? {} : { min: 0, max: 100, now: progress * 100 }
       }
       style={isWeb && styles.webContainer}
+      testID={testID}
     >
       <Animated.View
         style={[
@@ -206,6 +217,7 @@ const ProgressBar = ({
       >
         {width ? (
           <Animated.View
+            testID={`${testID}-fill`}
             style={[
               styles.progressBar,
               {
@@ -252,6 +264,7 @@ const ProgressBar = ({
                   },
                 ],
               },
+              fillStyle,
             ]}
           />
         ) : null}

src/components/__tests__/ProgressBar.test.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Animated, Platform } from 'react-native';
+import { Animated, Platform, StyleSheet } from 'react-native';
 
 import { render, waitFor } from '@testing-library/react-native';
 
@@ -13,6 +13,12 @@ const layoutEvent = {
   },
 };
 
+const styles = StyleSheet.create({
+  fill: {
+    borderRadius: 4,
+  },
+});
+
 const a11yRole = 'progressbar';
 
 class ClassProgressBar extends React.Component<Props> {
@@ -73,3 +79,14 @@ it('renders progress bar with full height on web', () => {
     height: '100%',
   });
 });
+
+it('renders progress bar with custom style of filled part', async () => {
+  const tree = render(
+    <ProgressBar progress={0.2} fillStyle={styles.fill} testID="progress-bar" />
+  );
+  await waitFor(() => tree.getByRole(a11yRole).props.onLayout(layoutEvent));
+
+  expect(tree.getByTestId('progress-bar-fill')).toHaveStyle({
+    borderRadius: 4,
+  });
+});

src/components/__tests__/__snapshots__/ProgressBar.test.tsx.snap

@@ -18,6 +18,7 @@ exports[`renders colored progress bar 1`] = `
   accessible={true}
   onLayout={[Function]}
   style={false}
+  testID="progress-bar"
 >
   <View
     collapsable={false}
@@ -47,6 +48,7 @@ exports[`renders colored progress bar 1`] = `
           "width": 100,
         }
       }
+      testID="progress-bar-fill"
     />
   </View>
 </View>
@@ -70,6 +72,7 @@ exports[`renders hidden progress bar 1`] = `
   accessible={true}
   onLayout={[Function]}
   style={false}
+  testID="progress-bar"
 >
   <View
     collapsable={false}
@@ -99,6 +102,7 @@ exports[`renders hidden progress bar 1`] = `
           "width": 100,
         }
       }
+      testID="progress-bar-fill"
     />
   </View>
 </View>
@@ -116,6 +120,7 @@ exports[`renders indeterminate progress bar 1`] = `
   accessible={true}
   onLayout={[Function]}
   style={false}
+  testID="progress-bar"
 >
   <View
     collapsable={false}
@@ -145,6 +150,7 @@ exports[`renders indeterminate progress bar 1`] = `
           "width": 100,
         }
       }
+      testID="progress-bar-fill"
     />
   </View>
 </View>
@@ -168,6 +174,7 @@ exports[`renders progress bar with specific progress 1`] = `
   accessible={true}
   onLayout={[Function]}
   style={false}
+  testID="progress-bar"
 >
   <View
     collapsable={false}
@@ -197,6 +204,7 @@ exports[`renders progress bar with specific progress 1`] = `
           "width": 100,
         }
       }
+      testID="progress-bar-fill"
     />
   </View>
 </View>