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}
/>
+
+
+ Custom Border Radius 0
+
+
+
+
+ Custom Border Radius 10
+
+
+
+
+ Custom Border Radius 0 for FullWidth
+
+
);
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 {
static displayName = 'ProgressBar';
static defaultProps: Partial = {
- progress: 0
+ progress: 0,
+ borderRadius: BorderRadiuses.br100
};
progressAnimation: Animated.Value;
@@ -100,29 +105,27 @@ class ProgressBar extends PureComponent {
}
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(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": [