fix: button width change

Author: Krunal-K-SimformSolutions

components/SpinnerButton.js

@@ -1,15 +1,14 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import ChildrenView from './ChildrenView';
-import styles from './styles/SpinnerButtonStyle';
-import AnimatedView from './AnimatedView';
-import AnimatableView from './AnimatableView';
-import { useAnimatedValues, getSpinnerStyle } from './utils'
-import { Animated, View, TouchableOpacity } from 'react-native';
+import PropTypes from "prop-types";
+import React from "react";
+import { Animated, TouchableOpacity, View } from "react-native";
+import AnimatableView from "./AnimatableView";
+import AnimatedView from "./AnimatedView";
+import ChildrenView from "./ChildrenView";
+import styles from "./styles/SpinnerButtonStyle";
+import { getSpinnerStyle, useAnimatedValues } from "./utils";
 
-const AnimatedTouchablesOpacity = Animated.createAnimatedComponent(
-  TouchableOpacity,
-);
+const AnimatedTouchablesOpacity =
+  Animated.createAnimatedComponent(TouchableOpacity);
 
 const SpinnerButton = ({
   animationType,
@@ -43,30 +42,45 @@ const SpinnerButton = ({
   isConnected = true,
   disabled = false,
   disableStyle,
-  disableGradientColors
+  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 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({ 
-    isLoading, 
-    style, 
-    animatedDuration, 
+  const {
+    handleLayout,
+    animatedStyles,
+    animatedChildHideStyle,
+    animatedChildShowStyle,
+  } = useAnimatedValues({
+    isLoading,
+    style,
+    animatedDuration,
     animateWidth,
     animateHeight,
-    animateRadius
+    animateRadius,
   });
-  
+
   return (
-    <View style={[styles.buttonContainer, styles.centerAlign, buttonContainer]}>
+    <View
+      style={[styles.buttonContainer, styles.centerAlign, buttonContainer]}
+      onLayout={handleLayout}
+    >
       <AnimatedTouchablesOpacity
         activeOpacity={1}
         style={[style, animatedStyles]}
         onPress={onPress}
         disabled={isDisable || isLoading}
-        onLayout={handleLayout}
       >
         <ChildrenView
           animatedStyles={animatedStyles}
@@ -83,7 +97,7 @@ const SpinnerButton = ({
           gradientName={gradientName}
           children={
             <>
-              {isAnimationType && 
+              {isAnimationType && (
                 <AnimatableView
                   animationType={animationType}
                   children={children}
@@ -97,8 +111,8 @@ const SpinnerButton = ({
                   indicatorCount={indicatorCount}
                   spinnerOptions={spinnerOptions}
                 />
-              }
-              {!isAnimationType && 
+              )}
+              {!isAnimationType && (
                 <AnimatedView
                   animatedChildHideStyle={animatedChildHideStyle}
                   animatedChildShowStyle={animatedChildShowStyle}
@@ -111,9 +125,9 @@ const SpinnerButton = ({
                   indicatorCount={indicatorCount}
                   spinnerOptions={spinnerOptions}
                 />
-              }
+              )}
             </>
-          } 
+          }
         />
       </AnimatedTouchablesOpacity>
     </View>
@@ -133,7 +147,7 @@ SpinnerButton.propTypes = {
   size: PropTypes.number,
   spinnerOptions: PropTypes.shape({
     waveFactor: PropTypes.number,
-    waveMode: PropTypes.string
+    waveMode: PropTypes.string,
   }),
   gradientType: PropTypes.string,
   gradientColors: PropTypes.array,
@@ -155,7 +169,176 @@ SpinnerButton.propTypes = {
   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"])
-}
+  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;
+export default SpinnerButton;