From 4e390f1e75b753f9c8c11dbad7e070cf15a27ca9 Mon Sep 17 00:00:00 2001
From: MIchaelZablianov <michaelza@wix.com>
Date: Wed, 24 Dec 2025 13:59:37 +0200
Subject: [PATCH] ProgressBar custom borderRadius

---
 .../componentScreens/ProgressBarScreen.tsx    | 33 ++++++++++++++-
 .../src/components/progressBar/index.tsx      | 40 ++++++++-----------
 .../progressBar/progressBar.api.json          |  6 +++
 3 files changed, 54 insertions(+), 25 deletions(-)

diff --git a/demo/src/screens/componentScreens/ProgressBarScreen.tsx b/demo/src/screens/componentScreens/ProgressBarScreen.tsx
index 1a861dbe46..47140fc24e 100644
--- a/demo/src/screens/componentScreens/ProgressBarScreen.tsx
+++ b/demo/src/screens/componentScreens/ProgressBarScreen.tsx
@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
 import {StyleSheet, ScrollView} from 'react-native';
-import {View, Text, ProgressBar, Colors, Spacings} from 'react-native-ui-lib';//eslint-disable-line
+import {View, Text, ProgressBar, Colors, Spacings, BorderRadiuses} from 'react-native-ui-lib';//eslint-disable-line
 
 
 export default class ProgressBarScreen extends Component {
@@ -82,6 +82,37 @@ export default class ProgressBarScreen extends Component {
             style={styles.progressBar}
             customElement={this.customElement}
           />
+
+          <Text $textDefault text70 style={styles.text}>
+            Custom Border Radius 0
+          </Text>
+          <ProgressBar
+            progress={progresses[3]}
+            style={styles.progressBar}
+            borderRadius={BorderRadiuses.br0}
+            progressColor={Colors.blue50}
+          />
+
+         <Text $textDefault text70 style={styles.text}>
+            Custom Border Radius 10
+          </Text>
+          <ProgressBar
+            progress={progresses[3]}
+            style={styles.progressBar}
+            borderRadius={BorderRadiuses.br10}
+            progressColor={Colors.red20}
+          />
+
+          <Text $textDefault text70 style={styles.text}>
+            Custom Border Radius 0 for FullWidth
+          </Text>
+          <ProgressBar
+            progress={progresses[3]}
+            style={styles.fullWidthProgressBar}
+            borderRadius={BorderRadiuses.br0}
+            progressColor={Colors.blue50}
+            fullWidth
+          />
         </View>
       </ScrollView>
     );
diff --git a/packages/react-native-ui-lib/src/components/progressBar/index.tsx b/packages/react-native-ui-lib/src/components/progressBar/index.tsx
index 86021500bd..c468827886 100644
--- a/packages/react-native-ui-lib/src/components/progressBar/index.tsx
+++ b/packages/react-native-ui-lib/src/components/progressBar/index.tsx
@@ -37,6 +37,10 @@ interface Props {
    * Custom element to render on top of the animated progress
    */
   customElement?: JSX.Element;
+  /**
+   * Custom border radius for the progress bar
+   */
+  borderRadius?: number;
   testID?: string;
 }
 export type ProgressBarProps = Props;
@@ -49,7 +53,8 @@ class ProgressBar extends PureComponent<Props, State> {
   static displayName = 'ProgressBar';
 
   static defaultProps: Partial<Props> = {
-    progress: 0
+    progress: 0,
+    borderRadius: BorderRadiuses.br100
   };
 
   progressAnimation: Animated.Value;
@@ -100,29 +105,27 @@ class ProgressBar extends PureComponent<Props, State> {
   }
 
   getContainerStyle() {
-    const {fullWidth} = this.props;
+    const {fullWidth, borderRadius} = this.props;
     const containerHeight = fullWidth ? FULL_WIDTH_CONTAINER_HEIGHT : CONTAINER_HEIGHT;
     const tabletContainerHeight = fullWidth ? TABLET_FULL_WIDTH_CONTAINER_HEIGHT : TABLET_CONTAINER_HEIGHT;
-    const inlineStyle = fullWidth ? null : styles.inlineContainer;
 
     return {
-      ...inlineStyle,
-      height: Constants.isTablet ? tabletContainerHeight : containerHeight
+      height: Constants.isTablet ? tabletContainerHeight : containerHeight,
+      borderRadius
     };
   }
 
   getProgressStyle() {
-    const {fullWidth, progressColor} = this.props;
-    const borderRadius = fullWidth ? styles.fullWidthProgressBorderRadius : styles.inlineBorderRadius;
+    const {fullWidth, progressColor, borderRadius} = this.props;
     const progressStyle = {
       right: Constants.isRTL ? undefined : this.state.containerWidth,
-      backgroundColor: progressColor || DEFAULT_COLOR
+      backgroundColor: progressColor || DEFAULT_COLOR,
+      borderRadius: fullWidth ? undefined : borderRadius,
+      borderBottomRightRadius: fullWidth ? borderRadius : undefined,
+      borderTopRightRadius: fullWidth ? borderRadius : undefined
     };
 
-    return {
-      ...borderRadius,
-      ...progressStyle
-    };
+    return progressStyle;
   }
 
   renderCustomElement() {
@@ -167,11 +170,7 @@ export default asBaseComponent<ProgressBarProps, typeof ProgressBar>(ProgressBar
 const styles = StyleSheet.create({
   container: {
     backgroundColor: Colors.$backgroundNeutralMedium,
-    overflow: 'hidden',
-    borderRadius: BorderRadiuses.br100
-  },
-  inlineContainer: {
-    borderRadius: BorderRadiuses.br100
+    overflow: 'hidden'
   },
   progress: {
     position: 'absolute',
@@ -184,12 +183,5 @@ const styles = StyleSheet.create({
   customElement: {
     height: '100%',
     width: '100%'
-  },
-  inlineBorderRadius: {
-    borderRadius: BorderRadiuses.br100
-  },
-  fullWidthProgressBorderRadius: {
-    borderBottomRightRadius: BorderRadiuses.br100,
-    borderTopRightRadius: BorderRadiuses.br100
   }
 });
diff --git a/packages/react-native-ui-lib/src/components/progressBar/progressBar.api.json b/packages/react-native-ui-lib/src/components/progressBar/progressBar.api.json
index 23cb723e03..a8a03e7c52 100644
--- a/packages/react-native-ui-lib/src/components/progressBar/progressBar.api.json
+++ b/packages/react-native-ui-lib/src/components/progressBar/progressBar.api.json
@@ -29,6 +29,12 @@
       "name": "customElement",
       "type": "JSX.Element",
       "description": "Custom element to render on top of the animated progress"
+    },
+    {
+      "name": "borderRadius",
+      "type": "number",
+      "description": "Custom border radius for the progress bar",
+      "default": "BorderRadiuses.br100"
     }
   ],
   "snippet": [