Feat: Added default gradient(168 count) and it's like as https://fx-gradient-previewer.netlify.app/

Author: Krunal-K-SimformSolutions

Example/App/DotSpinnerButton.js

@@ -26,9 +26,7 @@ const DotSpinnerButton = () => {
           onPress={handleButtonPress}
           animationType={'bounceIn'}
           gradientType={'Radial'}
-          gradientColors={['#231557', '#44107A', '#FF1361', '#FFF800']}
-          gradientColoroffset={['0%', '29%', '67%', '100%']}
-          gradientColorAngle={90}
+          gradientName={'Night Fade'}
           gradientRadialRadius={10}
           gradientButtonHeight={50}
           radialRadiusx={"50%"}

Example/App/SkypeSpinnerButton.js

@@ -26,7 +26,7 @@ const SkypeSpinnerButton = () => {
           }}
           onPress={handleButtonPress}
           gradientType={'Radial'}
-          gradientColors={['#231557', '#44107A', '#FF1361', '#FFF800']}
+          gradientColors={['#44107A', '#FF1361', '#dead00', '#231557']}
           gradientColoroffset={['0%', '29%', '67%', '100%']}
           gradientColorAngle={90}
           gradientRadialRadius={10}

Example/package-lock.json

@@ -19,7 +19,7 @@
     "react-native-animatable": "^1.3.3",
     "react-native-gradients": "^1.1.1",
     "react-native-indicators": "^0.17.0",
-    "react-native-spinner-button": "^1.0.4",
+    "react-native-spinner-button": "^1.0.5",
     "react-native-svg": "^12.1.0"
   },
   "devDependencies": {

Example/package.json

@@ -160,6 +160,12 @@ Don't forget to set the state variable you have given to _isLoading_ prop false
     * Its a stylesheet object.
     * This style apply when identify button disable or if network connect not available.
     * Default value: null | undefined
+29. **gradientName**
+    * Its a sample gradient name. 
+    * Default type: string
+    * Its default value is null | undefined.
+    * This properties used whenever you want to need gradient but not pass __gradientColors__, __gradientColoroffset__ and __gradientColorAngle__ properties.
+    * if you want to see color combination of [Sample gradient](https://fx-gradient-previewer.netlify.app/)
 
 ## Example
   A full working example project is here [Example](https://github.com/simformsolutions/react-native-spinner-button/tree/master/Example)

README.md

@@ -15,7 +15,8 @@ const ChildrenView = ({
     radialRadiusy,
     radialRadiusRX,
     radialRadiusRY, 
-    children 
+    children,
+    gradientName
 }) => {
     const isLinearGradient = gradientType?.trim()?.toLowerCase() === 'linear'; 
     const isRadialGradient = gradientType?.trim()?.toLowerCase() === 'radial';
@@ -28,6 +29,7 @@ const ChildrenView = ({
                 animatedStyles={animatedStyles}
                 gradientColoroffset={gradientColoroffset}
                 gradientColors={gradientColors}
+                gradientName={gradientName}
                 gradientRadialRadius={gradientRadialRadius}
                 gradientButtonHeight={gradientButtonHeight}
             />
@@ -40,6 +42,7 @@ const ChildrenView = ({
                 radialRadiusRX={radialRadiusRX}
                 radialRadiusRY={radialRadiusRY}
                 children={children}
+                gradientName={gradientName}
                 animatedStyles={animatedStyles}
                 gradientColoroffset={gradientColoroffset}
                 gradientColors={gradientColors}
@@ -63,7 +66,8 @@ ChildrenView.propTypes = {
     radialRadiusy: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     radialRadiusRX: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     radialRadiusRY: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    children: PropTypes.any.isRequired
+    children: PropTypes.any.isRequired,
+    gradientName: PropTypes.string
 }
 
 export default ChildrenView;

components/ChildrenView.js

@@ -4,6 +4,7 @@ import { Animated, View } from 'react-native';
 import styles from './styles/SpinnerButtonStyle';
 import { getColorList, getAnglePercentageObject } from './utils'
 import Svg, { Defs, LinearGradient as SVGLinearGradient, Rect, Stop } from 'react-native-svg'
+import { getGradientFromName } from './utils/getAnglePercentageObject';
 
 const AnimatedRect = Animated.createAnimatedComponent(Rect);
 
@@ -14,11 +15,13 @@ const LinearGradient = ({
   gradientRadialRadius, 
   gradientColoroffset = [], 
   gradientColors = [], 
-  gradientButtonHeight
+  gradientButtonHeight,
+  gradientName
 }) => {
   const rectWidth = animatedStyles.width;  
-  const angleObj = getAnglePercentageObject(angle)
-  const colorList = getColorList(gradientColoroffset, gradientColors);
+  const gradientData = getGradientFromName(gradientName);
+  const angleObj = getAnglePercentageObject(gradientData?.angle || angle)
+  const colorList = getColorList(gradientData?.offset || gradientColoroffset, gradientData?.colors || gradientColors);
   return (
       <View style={[styles.defaultGradientContainerStyle, styles.centerAlign, { height: gradientButtonHeight }]}>
         <View style={styles.absoluteView}>
@@ -61,7 +64,8 @@ LinearGradient.propTypes = {
   gradientRadialRadius: PropTypes.number, 
   gradientColoroffset: PropTypes.array, 
   gradientColors: PropTypes.array, 
-  gradientButtonHeight: PropTypes.number
+  gradientButtonHeight: PropTypes.number,
+  gradientName: PropTypes.string
 }
 
 export default LinearGradient

components/LinearGradient.js

@@ -4,6 +4,7 @@ import { getColorList } from './utils';
 import { Animated, View } from 'react-native';
 import styles from './styles/SpinnerButtonStyle';
 import Svg, { Defs, RadialGradient as SVGRadialGradient, Rect, Stop } from 'react-native-svg'
+import { getGradientFromName } from './utils/getAnglePercentageObject';
 
 const AnimatedRect = Animated.createAnimatedComponent(Rect);
 
@@ -17,10 +18,12 @@ const RadialGradient = ({
   radialRadiusx, 
   radialRadiusy, 
   radialRadiusRX, 
-  radialRadiusRY
+  radialRadiusRY,
+  gradientName
 }) => {
   const rectWidth = animatedStyles.width;  
-  const colorList = getColorList(gradientColoroffset, gradientColors);
+  const gradientData = getGradientFromName(gradientName);
+  const colorList = getColorList(gradientData?.offset || gradientColoroffset, gradientData?.colors || gradientColors);
   return (
     <View style={[styles.defaultGradientContainerStyle, styles.centerAlign, { height: gradientButtonHeight }]}>
         <View style={styles.absoluteView}>
@@ -63,6 +66,7 @@ RadialGradient.propTypes = {
   gradientColoroffset: PropTypes.array, 
   gradientColors: PropTypes.array, 
   gradientButtonHeight: PropTypes.number,
+  gradientName: PropTypes.string,
   radialRadiusRX: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
   radialRadiusRY: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
   radialRadiusx: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,

components/RadialGradient.js

@@ -22,6 +22,7 @@ const SpinnerButton = ({
   indicatorCount,
   size,
   spinnerOptions,
+  gradientName,
   gradientType,
   gradientColors,
   gradientColoroffset,
@@ -76,6 +77,7 @@ const SpinnerButton = ({
           radialRadiusy={radialRadiusy}
           radialRadiusRX={radialRadiusRX}
           radialRadiusRY={radialRadiusRY}
+          gradientName={gradientName}
           children={
             <>
               {isAnimationType && 
@@ -147,7 +149,8 @@ SpinnerButton.propTypes = {
   disabled: PropTypes.bool,
   isLoading: PropTypes.bool,
   isConnected: PropTypes.bool,
-  disableStyle: PropTypes.oneOfType([PropTypes.array, PropTypes.object])
+  disableStyle: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
+  gradientName: PropTypes.oneOf(["Warm Flame", "Night Fade", "Spring Warmth", "Juicy Peach", "Young Passion", "Lady Lips", "Sunny Morning", "Rainy Ashville", "Frozen Dreams", "Winter Neva", "Dusty Grass", "Tempting Azure", "Heavy Rain", "Amy Crisp", "Mean Fruit", "Deep Blue", "Ripe Malinka", "Cloudy Knoxville", "Malibu Beach", "New Life", "True Sunset", "Morpheus Den", "Rare Wind", "Near Moon", "Wild Apple", "Saint Petersburg", "Plum Plate", "Everlasting Sky", "Happy Fisher", "Blessing", "Sharpeye Eagle", "Ladoga Bottom", "Lemon Gate", "Itmeo Branding", "Zeus Miracle", "Old Hat", "Star Wine", "Happy Acid", "Awesome Pine", "New York", "Shy Rainbow", "Mixed Hopes", "Fly High", "Strong Bliss", "Fresh Milk", "Snow Again", "February Ink", "Kind Steel", "Soft Grass", "Grown Early", "Sharp Blues", "Shady Water", "Dirty Beauty", "Great Whale", "Teen Notebook", "Polite Rumors", "Sweet Period", "Wide Matrix", "Soft Cherish", "Red Salvation", "Burning Spring", "Night Party", "Sky Glider", "Heaven Peach", "Purple Division", "Aqua Splash", "Spiky Naga", "Love Kiss", "Clean Mirror", "Premium Dark", "Cold Evening", "Cochiti Lake", "Summer Games", "Passionate Bed", "Mountain Rock", "Desert Hump", "Jungle Day", "Phoenix Start", "October Silence", "Faraway River", "Alchemist Lab", "Over Sun", "Premium White", "Mars Party", "Eternal Constance", "Japan Blush", "Smiling Rain", "Cloudy Apple", "Big Mango", "Healthy Water", "Amour Amour", "Risky Concrete", "Strong Stick", "Vicious Stance", "Palo Alto", "Happy Memories", "Midnight Bloom", "Crystalline", "Party Bliss", "Confident Cloud", "Le Cocktail", "River City", "Frozen Berry", "Child Care", "Flying Lemon", "New Retrowave", "Hidden Jaguar", "Above The Sky", "Nega", "Dense Water", "Seashore", "Marble Wall", "Cheerful Caramel", "Night Sky", "Magic Lake", "Young Grass", "Colorful Peach", "Gentle Care", "Plum Bath", "Happy Unicorn", "African Field", "Solid Stone", "Orange Juice", "Glass Water", "North Miracle", "Fruit Blend", "Millennium Pine", "High Flight", "Mole Hall", "Space Shift", "Forest Inei", "Royal Garden", "Rich Metal", "Juicy Cake", "Smart Indigo", "Sand Strike", "Norse Beauty", "Aqua Guidance", "Sun Veggie", "Sea Lord", "Black Sea", "Grass Shampoo", "Landing Aircraft", "Witch Dance", "Sleepless Night", "Angel Care", "Crystal River", "Soft Lipstick", "Salt Mountain", "Perfect White", "Fresh Oasis", "Strict November", "Morning Salad", "Deep Relief", "Sea Strike", "Night Call", "Supreme Sky", "Light Blue", "Mind Crawl", "Lily Meadow", "Sugar Lollipop", "Sweet Dessert", "Magic Ray", "Teen Party", "Frozen Heat", "Gagarin View", "Fabled Sunset", "Perfect Blue"])
 }
 
 export default SpinnerButton;