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",