Merge pull request #22 from SimformSolutionsPvtLtd/feature/disable_color

feat: add gradient disable color.

Author: Krunal-K-SimformSolutions

README.md

@@ -152,7 +152,7 @@ Don't forget to set the state variable you have given to _isLoading_ prop false
     * The flag to identify network connection and based on flag set user iteration. _false_ will render button with disable mode and _true_ will render button with normal mode.
     * Default type: boolean
     * Default value: _true_
-27. **isDisable**
+27. **disabled**
     * The flag to identify button enable/disable. _true_ will render button with disable mode and _false_ will render button with normal mode.
     * Default type: boolean
     * Default value: _false_
@@ -166,6 +166,10 @@ Don't forget to set the state variable you have given to _isLoading_ prop false
     * 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/)
+30. **disableGradientColors**
+    * This is how we pass the colors we want to be displayed when button disable, colors can be passed in a different format, name, rgba, hex etc. 
+    * The colors should be ordered the way we want them to be displayed. 
+    * Eg. colors={[ “purple”, “white” ]} the gradient will move from purple to white.
 
 ## Example
   A full working example project is here [Example](https://github.com/simformsolutions/react-native-spinner-button/tree/master/Example)

components/SpinnerButton.js

@@ -42,10 +42,12 @@ const SpinnerButton = ({
   isLoading,
   isConnected = true,
   disabled = false,
-  disableStyle
+  disableStyle,
+  disableGradientColors
 }) => {
   const isDisable = disabled || !isConnected;
   const isAnimationType = animationType !== null && animationType !== undefined;
+  const gradientColor = isDisable ? (disableGradientColors || gradientColors) : gradientColors;
   const style = [styles.defaultButton, styles.centerAlign, buttonStyle, borderStyle, isDisable && disableStyle];
   const { height } = getSpinnerStyle(style, styles.defaultButton);
   const { handleLayout, animatedStyles, animatedChildHideStyle, animatedChildShowStyle } = useAnimatedValues({ 
@@ -69,7 +71,7 @@ const SpinnerButton = ({
         <ChildrenView
           animatedStyles={animatedStyles}
           gradientType={gradientType}
-          gradientColors={gradientColors}
+          gradientColors={gradientColor}
           gradientColoroffset={gradientColoroffset}
           gradientColorAngle={gradientColorAngle}
           gradientRadialRadius={gradientRadialRadius}
@@ -152,6 +154,7 @@ SpinnerButton.propTypes = {
   isLoading: PropTypes.bool,
   isConnected: PropTypes.bool,
   disableStyle: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
+  disableGradientColors: PropTypes.array,
   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"])
 }
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-spinner-button",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "description": "This is a react-native button component with a spinner. You can load a spinner or a button from the same component depending on a flag. for eg, you have a button. And on press of that button you are doing something and wants the user to show a spinner, all you have to do is use this component. You can pass along a boolean flag. The component will render a spinner if the flag is true and button if the flag is false.",
   "author": "Rupal Patel <[email protected]>",
   "main": "index.js",