Progress Bar corner radius

demo/src/screens/componentScreens/ProgressBarScreen.tsx

@@ -2,9 +2,7 @@ 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
 
-
 export default class ProgressBarScreen extends Component {
-
   state = {
     progresses: [0, 0, 0, 0]
   };
@@ -53,15 +51,15 @@ export default class ProgressBarScreen extends Component {
           </Text>
           <ProgressBar
             progress={progresses[0]}
-            style={styles.progressBar}
+            containerStyle={styles.progressBar}
           />
 
           <Text $textDefault text70 style={styles.text}>
             FullWidth
           </Text>
           <ProgressBar
             progress={progresses[1]}
-            style={styles.fullWidthProgressBar}
+            containerStyle={styles.fullWidthProgressBar}
             fullWidth
           />
 
@@ -70,7 +68,7 @@ export default class ProgressBarScreen extends Component {
           </Text>
           <ProgressBar
             progress={progresses[2]}
-            style={[styles.progressBar, styles.styledProgressBar]}
+            containerStyle={[styles.progressBar, styles.styledProgressBar]}
             progressColor={Colors.purple70}
           />
 
@@ -79,9 +77,18 @@ export default class ProgressBarScreen extends Component {
           </Text>
           <ProgressBar
             progress={progresses[0]}
-            style={styles.progressBar}
+            containerStyle={styles.progressBar}
             customElement={this.customElement}
           />
+
+          <Text $textDefault text70 style={styles.text}>
+            Custom Style - No Border Radius, 50% progress
+          </Text>
+          <ProgressBar
+            progress={50}
+            containerStyle={[styles.progressBar, styles.styledProgressBar, {borderRadius: 0}]}
+            progressStyle={{borderRadius: 0, backgroundColor: Colors.purple70}}
+          />
         </View>
       </ScrollView>
     );

packages/react-native-ui-lib/src/components/progressBar/index.tsx

@@ -27,8 +27,17 @@ interface Props {
   fullWidth?: boolean;
   /**
    * Override container style
+   * @deprecated Use containerStyle instead
    */
   style?: StyleProp<ViewStyle>;
+  /**
+   * Override container style
+   */
+  containerStyle?: StyleProp<ViewStyle>;
+  /**
+   * Override progress style
+   */
+  progressStyle?: StyleProp<ViewStyle>;
   /**
    * Progress color
    */
@@ -136,23 +145,25 @@ class ProgressBar extends PureComponent<Props, State> {
   }
 
   render() {
-    const {style, testID} = this.props;
+    const {style, containerStyle, testID, progressStyle} = this.props;
     const {containerWidth = 0} = this.state;
     const outputRange = Constants.isRTL ? [containerWidth, 0] : [0, containerWidth];
     const newProgress = this.progressAnimation.interpolate({
       inputRange: [0, 100],
       outputRange
     });
 
+    const animatedStyle = {transform: [{translateX: newProgress}]};
+
     return (
       <View
         onLayout={this.getContainerWidth}
-        style={[styles.container, this.getContainerStyle(), style]}
+        style={[styles.container, this.getContainerStyle(), style, containerStyle]}
         {...this.getAccessibilityProps()}
         testID={testID}
       >
         {!!containerWidth && (
-          <Animated.View style={[styles.progress, this.getProgressStyle(), {transform: [{translateX: newProgress}]}]}>
+          <Animated.View style={[styles.progress, this.getProgressStyle(), progressStyle, animatedStyle]}>
             {this.renderCustomElement()}
           </Animated.View>
         )}

packages/react-native-ui-lib/src/components/progressBar/progressBar.api.json

@@ -16,10 +16,15 @@
       "description": "FullWidth Ui preset"
     },
     {
-      "name": "style",
+      "name": "containerStyle",
       "type": "ViewStyle",
       "description": "Override container style"
     },
+    {
+      "name": "progressStyle",
+      "type": "ViewStyle",
+      "description": "Override progress style"
+    },
     {
       "name": "progressColor",
       "type": "string",