diff --git a/README.md b/README.md index fce8936..dbbe15e 100644 --- a/README.md +++ b/README.md @@ -72,18 +72,20 @@ The `animate`-function returns the timing animation so you can chain, run in par You can configure the CircularProgress-component by passing the following props: -Name | Type | Default value | Description ------------------|------------------------|-------------------------|-------------- -size | number\|Animated.Value | **required** | Width and height of circle -width | number | **required** | Thickness of the progress line -backgroundWidth | number | width | Thickness of background circle -fill | number (0-100) | 0 | Current progress / fill -tintColor | string | black | Color of the progress line -backgroundColor | string | | If unspecified, no background line will be rendered -rotation | number (-360 - 360) | 90 | Angle from which the progress starts from -lineCap | string | butt | Shape used at ends of progress line. Possible values: butt, round, square -arcSweepAngle | number (0-360) | 360 | If you don't want a full circle, specify the arc angle -children | function | | Pass a function as a child. It receiveds the current fill-value as an argument +Name | Type | Default value | Description +----------------------|------------------------|-------------------------|-------------- +size | number\|Animated.Value | **required** | Width and height of circle +width | number | **required** | Thickness of the progress line +backgroundWidth | number | width | Thickness of background circle +fill | number (0-100) | 0 | Current progress / fill +tintColor | string | black | Color of the progress line +backgroundColor | string | | If unspecified, no background line will be rendered +rotation | number (-360 - 360) | 90 | Angle from which the progress starts from +lineCap | string | butt | Shape used at ends of progress line. Possible values: butt, round, square +arcSweepAngle | number (0-360) | 360 | If you don't want a full circle, specify the arc angle +style | ViewPropTypes.style | | Extra styling for the main container +children | function | | Pass a function as a child. It receiveds the current fill-value as an argument +childrenContainerStyle| ViewPropTypes.style | | Extra styling for the children container The following props can further be used on `AnimatedCircularProgress`: diff --git a/index.d.ts b/index.d.ts index 4de811c..f0be0a2 100644 --- a/index.d.ts +++ b/index.d.ts @@ -1,6 +1,6 @@ declare module 'react-native-circular-progress' { import * as React from 'react'; - import { Animated, Easing } from 'react-native'; + import { Animated, Easing, ViewPropTypes } from 'react-native'; export interface AnimatedCircularProgressProps { /** @@ -72,6 +72,13 @@ declare module 'react-native-circular-progress' { */ arcSweepAngle?: number; + /** + * Style of the entire progress container + * + * @type {ViewPropTypes.style} + */ + style?: ViewPropTypes.style; + /** * Pass a function as a child. It receiveds the current fill-value as an argument * @@ -81,6 +88,13 @@ declare module 'react-native-circular-progress' { */ children?: (fill: number) => JSX.Element; + /** + * Style of the children container + * + * @type {ViewPropTypes.style} + */ + childrenContainerStyle?: ViewPropTypes.style; + /** * Initial fill-value before animation starts * diff --git a/src/CircularProgress.js b/src/CircularProgress.js index 04384ba..ab9d0ff 100644 --- a/src/CircularProgress.js +++ b/src/CircularProgress.js @@ -35,6 +35,7 @@ export default class CircularProgress extends React.PureComponent { arcSweepAngle, fill, children, + childrenContainerStyle, } = this.props; const maxWidthCircle = backgroundWidth ? Math.max(width, backgroundWidth) : width; @@ -55,17 +56,20 @@ export default class CircularProgress extends React.PureComponent { ); const offset = size - maxWidthCircle * 2; - const childContainerStyle = { - position: 'absolute', - left: maxWidthCircle, - top: maxWidthCircle, - width: offset, - height: offset, - borderRadius: offset / 2, - alignItems: 'center', - justifyContent: 'center', - overflow: 'hidden', - }; + const localChildrenContainerStyle = { + ...{ + position: 'absolute', + left: maxWidthCircle, + top: maxWidthCircle, + width: offset, + height: offset, + borderRadius: offset / 2, + alignItems: 'center', + justifyContent: 'center', + overflow: 'hidden', + }, + ...childrenContainerStyle, + } return ( @@ -91,7 +95,7 @@ export default class CircularProgress extends React.PureComponent { )} - {children && {children(fill)}} + {children && {children(fill)}} ); } @@ -109,6 +113,7 @@ CircularProgress.propTypes = { lineCap: PropTypes.string, arcSweepAngle: PropTypes.number, children: PropTypes.func, + childrenContainerStyle: ViewPropTypes.style, }; CircularProgress.defaultProps = {