Merge pull request #238 from aboveyunhai/master

fix PropTypes and update README

Author: Markus Lindqvist

README.md

@@ -93,15 +93,17 @@ width                 | number                 | **required**            | Thick
 backgroundWidth       | number                 | width                   | Thickness of background circle
 fill                  | number (0-100)         | 0                       | Current progress / fill
 tintColor             | string                 | black                   | Color of the progress line
+tintTransparency      | boolean                | true                    | Transparency 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
+children              | function               |                         | Pass a function as a child. It received 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
+dashedTint            | object                 | { width: 0, gap: 0 }    | Bar tint 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`:

index.d.ts

@@ -39,14 +39,6 @@ declare module 'react-native-circular-progress' {
      */
     fill?: number;
 
-    /**
-     * Current progress / fillTransparency
-     *
-     * @type {boolean}
-     * @default true
-     */
-    fillTransparency?: boolean;
-
     /**
      * Color of the progress line
      *
@@ -63,6 +55,14 @@ declare module 'react-native-circular-progress' {
      */
     tintColorSecondary?: string;
 
+    /**
+     * Current progress / tint transparency
+     *
+     * @type {boolean}
+     * @default true
+     */
+    tintTransparency?: boolean;
+
     /**
      * If unspecified, no background line will be rendered
      *
@@ -163,12 +163,12 @@ declare module 'react-native-circular-progress' {
     }) => React.ReactNode;
 
     /**
-     * Use dashed type for fill
+     * Use dashed type for tint/progress line
      *
      * @type { width: number; gap: number }
      * @default '{ width: 0, gap: 0 }'
      */
-    dashedFill?: { width: number; gap: number };
+    dashedTint?: { width: number; gap: number };
 
     /**
      * Use dashed type for background

src/CircularProgress.js

@@ -28,19 +28,19 @@ export default class CircularProgress extends React.PureComponent {
       width,
       backgroundWidth,
       tintColor,
+      tintTransparency,
       backgroundColor,
       style,
       rotation,
       lineCap,
       arcSweepAngle,
       fill,
-      fillTransparency,
       children,
       childrenContainerStyle,
       padding,
       renderCap,
       dashedBackground,
-      dashedFill
+      dashedTint
     } = this.props;
 
     const maxWidthCircle = backgroundWidth ? Math.max(width, backgroundWidth) : width;
@@ -52,7 +52,7 @@ export default class CircularProgress extends React.PureComponent {
       sizeWithPadding,
       sizeWithPadding,
       radius,
-      fillTransparency ? 0 : currentFillAngle,
+      tintTransparency ? 0 : currentFillAngle,
       arcSweepAngle
     );
     const circlePath = this.circlePath(
@@ -87,8 +87,8 @@ export default class CircularProgress extends React.PureComponent {
       ...childrenContainerStyle,
     }
 
-    const strokeDasharrayFill = dashedFill.gap > 0 ?
-      Object.values(dashedFill)
+    const strokeDasharrayTint = dashedTint.gap > 0 ?
+      Object.values(dashedTint)
       .map(value => parseInt(value))
       : null;
 
@@ -117,7 +117,7 @@ export default class CircularProgress extends React.PureComponent {
                 stroke={tintColor}
                 strokeWidth={width}
                 strokeLinecap={lineCap}
-                strokeDasharray={strokeDasharrayFill}
+                strokeDasharray={strokeDasharrayTint}
                 fill="transparent"
               />
             )}
@@ -134,10 +134,10 @@ CircularProgress.propTypes = {
   style: ViewPropTypes.style,
   size: PropTypes.number.isRequired,
   fill: PropTypes.number.isRequired,
-  fillTransparency: PropTypes.boolean,
   width: PropTypes.number.isRequired,
   backgroundWidth: PropTypes.number,
   tintColor: PropTypes.string,
+  tintTransparency: PropTypes.bool,
   backgroundColor: PropTypes.string,
   rotation: PropTypes.number,
   lineCap: PropTypes.string,
@@ -147,16 +147,16 @@ CircularProgress.propTypes = {
   padding: PropTypes.number,
   renderCap: PropTypes.func,
   dashedBackground: PropTypes.object,
-  dashedFill: PropTypes.object
+  dashedTint: PropTypes.object
 };
 
 CircularProgress.defaultProps = {
   tintColor: 'black',
+  tintTransparency: true,
   rotation: 90,
   lineCap: 'butt',
   arcSweepAngle: 360,
   padding: 0,
   dashedBackground: { width: 0, gap: 0 },
-  dashedFill: { width: 0, gap: 0 },
-  fillTransparency: true
+  dashedTint: { width: 0, gap: 0 },
 };