Merge pull request #212 from fcortezmaira/master

Add dashed type for bar background
bartgryszko · Sep 27, 2019 · dbb1e63 · dbb1e63
2 parents 59d8e17 + cab7637
commit dbb1e63
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -101,9 +101,9 @@ style                 | ViewPropTypes.style    |                         | Extra
 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
 padding               | number                 | 0                       | Padding applied around the circle to allow for a cap that bleeds outside its boundary
+dashedBackground      | object                 | { width: 0, gap: 0 }    | Bar background as dashed type
 renderCap             | function               | undefined               | Function that's invoked during rendering to draw at the tip of the progress circle
 
-
 The following props can further be used on `AnimatedCircularProgress`:
 
 Name                | Type                   | Default value           | Description

diff --git a/index.d.ts b/index.d.ts
@@ -145,6 +145,14 @@ declare module 'react-native-circular-progress' {
     renderCap?: (payload: {
       center: { x: number; y: number };
     }) => React.ReactNode;
+
+    /**
+     * Use dashed type for background
+     *
+     * @type { width: number; gap: number }
+     * @default '{ width: 0, gap: 0 }'
+     */
+    dashedBackground?: { width: number; gap: number };
   }
 
   export class AnimatedCircularProgress extends React.Component<

diff --git a/src/CircularProgress.js b/src/CircularProgress.js
@@ -38,6 +38,7 @@ export default class CircularProgress extends React.PureComponent {
       childrenContainerStyle,
       padding,
       renderCap,
+      dashedBackground,
     } = this.props;
 
     const maxWidthCircle = backgroundWidth ? Math.max(width, backgroundWidth) : width;
@@ -80,10 +81,14 @@ export default class CircularProgress extends React.PureComponent {
         alignItems: 'center',
         justifyContent: 'center',
         overflow: 'hidden',
-      }, 
+      },
       ...childrenContainerStyle,
     }
 
+    const dashedBackgroundStyle = dashedBackground.gap > 0
+      ? `${dashedBackground.width}, ${dashedBackground.gap}`
+      : dashedBackground;
+
     return (
       <View style={style}>
         <Svg width={size + padding} height={size + padding}>
@@ -94,6 +99,7 @@ export default class CircularProgress extends React.PureComponent {
                 stroke={backgroundColor}
                 strokeWidth={backgroundWidth || width}
                 strokeLinecap={lineCap}
+                strokeDasharray={dashedBackgroundStyle}
                 fill="transparent"
               />
             )}
@@ -130,12 +136,14 @@ CircularProgress.propTypes = {
   childrenContainerStyle: ViewPropTypes.style,
   padding: PropTypes.number,
   renderCap: PropTypes.func,
+  dashedBackground: PropTypes.object,
 };
 
 CircularProgress.defaultProps = {
   tintColor: 'black',
   rotation: 90,
   lineCap: 'butt',
   arcSweepAngle: 360,
-  paddinig: 0,
+  padding: 0,
+  dashedBackground: { width: 0, gap: 0 },
 };