diff --git a/demo/src/screens/componentScreens/ProgressBarScreen.tsx b/demo/src/screens/componentScreens/ProgressBarScreen.tsx
index 1a861dbe46..bc87b6bbdb 100644
--- a/demo/src/screens/componentScreens/ProgressBarScreen.tsx
+++ b/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,7 +51,7 @@ export default class ProgressBarScreen extends Component {
@@ -61,7 +59,7 @@ export default class ProgressBarScreen extends Component {
@@ -70,7 +68,7 @@ export default class ProgressBarScreen extends Component {
@@ -79,9 +77,18 @@ export default class ProgressBarScreen extends Component {
+
+
+ Custom Style - No Border Radius, 50% progress
+
+
);
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..27f3e5b117 100644
--- a/packages/react-native-ui-lib/src/components/progressBar/index.tsx
+++ b/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;
+ /**
+ * Override container style
+ */
+ containerStyle?: StyleProp;
+ /**
+ * Override progress style
+ */
+ progressStyle?: StyleProp;
/**
* Progress color
*/
@@ -136,7 +145,7 @@ class ProgressBar extends PureComponent {
}
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({
@@ -144,15 +153,17 @@ class ProgressBar extends PureComponent {
outputRange
});
+ const animatedStyle = {transform: [{translateX: newProgress}]};
+
return (
{!!containerWidth && (
-
+
{this.renderCustomElement()}
)}
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..1700eeb553 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
@@ -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",