archive-gh-me/react-native-circular-progress
1
0
Fork 0
mirror of https://github.com/bartgryszko/react-native-circular-progress.git synced 2026-01-18 16:13:10 +00:00
Code Issues Projects Releases Wiki Activity

progressBar to align centre (#1)

Browse Source
This commit is contained in:
ayushi nigam 2017-09-19 18:35:34 +05:30 committed by GitHub
parent 91f15f5a53
commit a2aabc8cb0
1 changed files with 17 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/CircularProgress.js
View File

@ -28,9 +28,9 @@ export default class CircularProgress extends React.Component {
const { size, width, tintColor, backgroundColor, style, rotation, linecap, children } = this.props;
const backgroundPath = this.circlePath(size / 2, size / 2, size / 2 - width / 2, 0, 360 * .9999);
const fill = this.extractFill(this.props.fill);
const fill = this.extractFill(this.props.fill);
const circlePath = this.circlePath(size / 2, size / 2, size / 2 - width / 2, 0, (360 * .9999) * fill / 100);
const offset = size - (width * 2);
return (
<View style={style}>
<Surface
@ -46,9 +46,20 @@ export default class CircularProgress extends React.Component {
strokeCap={linecap}/>
</Group>
</Surface>
{
children && children(fill)
}
{children && <View
style={{
position: 'absolute',
left: width,
top: width,
width: offset,
height: offset,
borderRadius: offset / 2,
alignItems: 'center',
justifyContent: 'center'
}}
>
{children}
</View>}
</View>
)
}
@ -63,7 +74,7 @@ CircularProgress.propTypes = {
backgroundColor: PropTypes.string,
rotation: PropTypes.number,
linecap: PropTypes.string,
children: PropTypes.func
children: PropTypes.object
}
CircularProgress.defaultProps = {