How to set the Progress content to rounded corners

[FTD-ZF]

How to set the Progress content to rounded corners

[FTD-ZF]

From the Progress Bar

[raphaelpinel]

Is there a way to give a round corner to the progress content like in this screenshot?

[FTD-ZF]

Yes, I didn't find out how to set up this component

[krakz999]

Here is a patch I created that you can use with patch-package for rounded corner progress. This is untested, so might break other things in Progress.Bar but works perfectly in my case.

diff --git a/node_modules/react-native-progress/Bar.js b/node_modules/react-native-progress/Bar.js
index dd8e877..4e2a40a 100644
--- a/node_modules/react-native-progress/Bar.js
+++ b/node_modules/react-native-progress/Bar.js
@@ -142,26 +142,18 @@ export default class ProgressBar extends Component {
     const progressStyle = {
       backgroundColor: color,
       height,
+      borderRadius: 1000,
+      width: this.state.progress.interpolate({
+        inputRange: [0, 1],
+        outputRange: [0.0001, innerWidth]
+      }),
       transform: [
         {
           translateX: this.state.animationValue.interpolate({
             inputRange: [0, 1],
             outputRange: [innerWidth * -INDETERMINATE_WIDTH_FACTOR, innerWidth],
           }),
-        },
-        {
-          translateX: this.state.progress.interpolate({
-            inputRange: [0, 1],
-            outputRange: [innerWidth / (I18nManager.isRTL ? 2 : -2), 0],
-          }),
-        },
-        {
-          // Interpolation a temp workaround for https://github.com/facebook/react-native/issues/6278
-          scaleX: this.state.progress.interpolate({
-            inputRange: [0, 1],
-            outputRange: [0.0001, 1],
-          }),
-        },
+        }
       ],
     };