fix(progress-bar): preserve fill border radius while animating progress (#4950)

Author: MichaelSebsbe

src/components/ProgressBar.tsx

@@ -194,6 +194,42 @@ const ProgressBar = ({
   const trackTintColor = theme.isV3
     ? theme.colors.surfaceVariant
     : setColor(tintColor).alpha(0.38).rgb().string();
+  const progressBarStyle = indeterminate
+    ? {
+        width,
+        backgroundColor: tintColor,
+        transform: [
+          {
+            translateX: timer.interpolate({
+              inputRange: [0, 0.5, 1],
+              outputRange: [
+                (isRTL ? 1 : -1) * 0.5 * width,
+                (isRTL ? 1 : -1) * 0.5 * INDETERMINATE_MAX_WIDTH * width,
+                (isRTL ? -1 : 1) * 0.7 * width,
+              ],
+            }),
+          },
+          {
+            // Workaround for workaround for https://github.com/facebook/react-native/issues/6278
+            scaleX: timer.interpolate({
+              inputRange: [0, 0.5, 1],
+              outputRange: [0.0001, INDETERMINATE_MAX_WIDTH, 0.0001],
+            }),
+          },
+        ],
+      }
+    : {
+        width,
+        backgroundColor: tintColor,
+        transform: [
+          {
+            translateX: timer.interpolate({
+              inputRange: [0, 1],
+              outputRange: [(isRTL ? 1 : -1) * width, 0],
+            }),
+          },
+        ],
+      };
 
   return (
     <View
@@ -220,54 +256,7 @@ const ProgressBar = ({
         {width ? (
           <Animated.View
             testID={`${testID}-fill`}
-            style={[
-              styles.progressBar,
-              {
-                width,
-                backgroundColor: tintColor,
-                transform: [
-                  {
-                    translateX: timer.interpolate(
-                      indeterminate
-                        ? {
-                            inputRange: [0, 0.5, 1],
-                            outputRange: [
-                              (isRTL ? 1 : -1) * 0.5 * width,
-                              (isRTL ? 1 : -1) *
-                                0.5 *
-                                INDETERMINATE_MAX_WIDTH *
-                                width,
-                              (isRTL ? -1 : 1) * 0.7 * width,
-                            ],
-                          }
-                        : {
-                            inputRange: [0, 1],
-                            outputRange: [(isRTL ? 1 : -1) * 0.5 * width, 0],
-                          }
-                    ),
-                  },
-                  {
-                    // Workaround for workaround for https://github.com/facebook/react-native/issues/6278
-                    scaleX: timer.interpolate(
-                      indeterminate
-                        ? {
-                            inputRange: [0, 0.5, 1],
-                            outputRange: [
-                              0.0001,
-                              INDETERMINATE_MAX_WIDTH,
-                              0.0001,
-                            ],
-                          }
-                        : {
-                            inputRange: [0, 1],
-                            outputRange: [0.0001, 1],
-                          }
-                    ),
-                  },
-                ],
-              },
-              fillStyle,
-            ]}
+            style={[styles.progressBar, progressBarStyle, fillStyle]}
           />
         ) : null}
       </Animated.View>

src/components/__tests__/ProgressBar.test.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { Animated, Platform, StyleSheet } from 'react-native';
+import type { ViewStyle } from 'react-native';
 
 import { act, render } from '@testing-library/react-native';
 
@@ -97,3 +98,17 @@ it('renders progress bar with custom style of filled part', async () => {
     borderRadius: 4,
   });
 });
+
+it('does not scale the determinate fill width', async () => {
+  const tree = render(<ProgressBar progress={0.2} testID="progress-bar" />);
+  await triggerLayout(tree);
+
+  const fillStyle = StyleSheet.flatten(
+    tree.getByTestId('progress-bar-fill').props.style
+  ) as ViewStyle;
+  const transform = fillStyle.transform;
+
+  expect(
+    Array.isArray(transform) && transform.some((value) => 'scaleX' in value)
+  ).toBe(false);
+});

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

@@ -39,10 +39,7 @@ exports[`renders colored progress bar 1`] = `
           "flex": 1,
           "transform": [
             {
-              "translateX": -50,
-            },
-            {
-              "scaleX": 0.0001,
+              "translateX": -100,
             },
           ],
           "width": 100,
@@ -93,10 +90,7 @@ exports[`renders hidden progress bar 1`] = `
           "flex": 1,
           "transform": [
             {
-              "translateX": -50,
-            },
-            {
-              "scaleX": 0.0001,
+              "translateX": -100,
             },
           ],
           "width": 100,
@@ -195,10 +189,7 @@ exports[`renders progress bar with specific progress 1`] = `
           "flex": 1,
           "transform": [
             {
-              "translateX": -50,
-            },
-            {
-              "scaleX": 0.0001,
+              "translateX": -100,
             },
           ],
           "width": 100,