Merge pull request #13 from nithinpp69/develop

Add gradient effect

README.md

@@ -15,6 +15,7 @@ This project is inspired from this [Youtube tutorial](https://www.youtube.com/wa
 ![](demo3.gif)
 ![](demo4.gif)
 ![](demo5.gif)
+![](gradient.png)
 
 ## Prerequisites
 
@@ -167,6 +168,23 @@ import CircularProgress from 'react-native-circular-progress-indicator';
 
 ![](demo5.gif)
 
+#### with gradient effect
+
+```
+import CircularProgress from 'react-native-circular-progress-indicator';
+
+....
+
+<CircularProgress
+  value={100}
+  activeStrokeColor={'#2465FD'}
+  activeStrokeSecondaryColor={'#C25AFF'}
+/>
+
+```
+
+![](gradient.png)
+
 ## Props
 | Prop          | Description   | Type   | Default Value | Required |
 | :-----------: |:-------------:| :-----:| :-----: | :-----: |
@@ -187,6 +205,7 @@ import CircularProgress from 'react-native-circular-progress-indicator';
 | valuePrefix  | prefix value | String | '' | false |
 | valueSuffix  | suffix value | String | '' | false |
 | activeStrokeColor  | active progress circle color | String | '#2ecc71' | false |
+| activeStrokeSecondaryColor  | active progress secondary color. Use this to provide a gradient effect | String | '' | false |
 | inActiveStrokeColor  | inactive progress circle color | String | 'rgba(0,0,0,0.3)' | false |
 | showProgressValue  | show or hide the progress text value | Bool | true | false |
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-circular-progress-indicator",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "React Native customizable circular progress indicator",
   "main": "index.js",
   "scripts": {

src/index.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef } from 'react';
 import { StyleSheet, View, TextInput, Animated } from 'react-native';
 import PropTypes from 'prop-types';
-import Svg, { G, Circle } from 'react-native-svg';
+import Svg, { G, Circle, Defs, LinearGradient, Stop } from 'react-native-svg';
 
 const AnimatedCircle = Animated.createAnimatedComponent(Circle);
 const AnimatedInput = Animated.createAnimatedComponent(TextInput);
@@ -22,6 +22,7 @@ const CircularProgress = (props) => {
     valuePrefix,
     valueSuffix,
     activeStrokeColor,
+    activeStrokeSecondaryColor,
     activeStrokeWidth,
     inActiveStrokeColor,
     inActiveStrokeWidth,
@@ -82,6 +83,15 @@ const CircularProgress = (props) => {
         width={radius * 2}
         height={radius * 2}
         viewBox={`0 0 ${halfCircle * 2} ${halfCircle * 2}`}>
+        {activeStrokeSecondaryColor ?
+          <Defs>
+            <LinearGradient id={'grad'} x1="0%" y1="0%" x2="0%" y2="100%">
+              <Stop offset="0%" stopColor={activeStrokeSecondaryColor} />
+              <Stop offset="100%" stopColor={activeStrokeColor} />
+            </LinearGradient>
+          </Defs>
+          : null}
+
         <G rotation={'-90'} origin={`${halfCircle}, ${halfCircle}`}>
           <Circle
             cx="50%"
@@ -96,7 +106,7 @@ const CircularProgress = (props) => {
             ref={circleRef}
             cx="50%"
             cy="50%"
-            stroke={activeStrokeColor}
+            stroke={activeStrokeSecondaryColor ? `url(#grad)` : activeStrokeColor}
             strokeWidth={activeStrokeWidth}
             r={radius}
             fill={'transparent'}
@@ -147,6 +157,7 @@ CircularProgress.propTypes = {
   valuePrefix: PropTypes.string,
   valueSuffix: PropTypes.string,
   activeStrokeColor: PropTypes.string,
+  activeStrokeSecondaryColor: PropTypes.string,
   inActiveStrokeColor: PropTypes.string,
   inActiveStrokeOpacity: PropTypes.number,
   activeStrokeWidth: PropTypes.number,
@@ -167,6 +178,7 @@ CircularProgress.defaultProps = {
   valueSuffix: '',
   textStyle: {},
   activeStrokeColor: '#2ecc71',
+  activeStrokeSecondaryColor: '',
   inActiveStrokeColor: 'rgba(0,0,0,0.3)',
   inActiveStrokeOpacity: 1,
   activeStrokeWidth: 10,