Linear gradient

[Jip-bot]

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch [email protected] for the project I'm working on.

For my project i needed your exact progress bar except i needed it to be a gradient so i added that myself, since all the gradient variants i could find where circular. Hope i can help anyone else looking for this.

Here is the diff that solved my problem:

diff --git a/node_modules/react-native-progress-bar-animated/src/.AnimatedProgressBar.js.swp b/node_modules/react-native-progress-bar-animated/src/.AnimatedProgressBar.js.swp
new file mode 100644
index 0000000..54c096d
Binary files /dev/null and b/node_modules/react-native-progress-bar-animated/src/.AnimatedProgressBar.js.swp differ
diff --git a/node_modules/react-native-progress-bar-animated/src/AnimatedProgressBar.js b/node_modules/react-native-progress-bar-animated/src/AnimatedProgressBar.js
index 29a0f82..221f065 100644
--- a/node_modules/react-native-progress-bar-animated/src/AnimatedProgressBar.js
+++ b/node_modules/react-native-progress-bar-animated/src/AnimatedProgressBar.js
@@ -1,5 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { LinearGradient } from 'expo-linear-gradient';
+import { StyleSheet } from 'react-native';
 
 import {
   View,
@@ -13,6 +15,7 @@ class ProgressBar extends React.Component {
 
     this.state = {
       progress: props.value,
+      colorGradientArray : props.colorGradientArray
     };
     
     this.widthAnimation = new Animated.Value(0);
@@ -61,6 +64,7 @@ class ProgressBar extends React.Component {
       easing: Easing[this.props.barEasing],
       toValue: toValue > 0 ? toValue : 0,
       duration: this.props.barAnimationDuration,
+      useNativeDriver: false
     }).start();
   }
 
@@ -68,6 +72,7 @@ class ProgressBar extends React.Component {
     Animated.timing(this.backgroundAnimation, {
       toValue: 1,
       duration: this.props.backgroundAnimationDuration,
+      useNativeDriver: false
     }).start();
   }
 
@@ -92,9 +97,16 @@ class ProgressBar extends React.Component {
           height: this.props.height - (this.props.borderWidth * 2),
           width: this.widthAnimation,
           backgroundColor: this.backgroundInterpolationValue || this.props.backgroundColor,
-          borderRadius: this.props.borderRadius,
+          useNativeDriver: false
         }}
-        />
+        >
+        <LinearGradient
+        colors={this.props.colorGradientArray}
+        start={[0, 1]} 
+        end={[1, 0]}
+        style={[styles.background, {height: this.props.height}]}
+      />
+        </Animated.View>
       </View>
     );
   }
@@ -159,4 +171,14 @@ ProgressBar.defaultProps = {
   onComplete: null,
 };
 
+const styles = StyleSheet.create({
+  background: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    top: 0,
+  }
+});
+
 export default ProgressBar;
+

This issue body was partially generated by patch-package.