Feat: Support height and width dynamic.

Author: Krunal-K-SimformSolutions

Example/package.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.5",
+    "react-native-spinner-button": "^1.0.7",
     "react-native-svg": "^12.1.0"
   },
   "devDependencies": {

components/SpinnerButton.js

@@ -13,6 +13,7 @@ const AnimatedTouchablesOpacity = Animated.createAnimatedComponent(
 
 const SpinnerButton = ({
   animationType,
+  buttonContainer,
   buttonStyle,
   borderStyle,
   spinnerColor,
@@ -57,7 +58,7 @@ const SpinnerButton = ({
   });
 
   return (
-    <View style={[styles.buttonContainer, styles.centerAlign]}>
+    <View style={[styles.buttonContainer, styles.centerAlign, buttonContainer]}>
       <AnimatedTouchablesOpacity
         activeOpacity={1}
         style={[style, animatedStyles]}
@@ -119,6 +120,7 @@ const SpinnerButton = ({
 
 SpinnerButton.propTypes = {
   animationType: PropTypes.string,
+  buttonContainer: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
   buttonStyle: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
   borderStyle: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
   spinnerColor: PropTypes.string,

components/utils/useAnimatedValues.js

@@ -13,9 +13,9 @@ const useAnimatedValues = ({
   const [size, setSize] = useState(null);
   const defaultStyle = StyleSheet.flatten(style);
   const margin = defaultStyle.margin || defaultStyle.marginLeft || defaultStyle.marginRight || defaultStyle.marginHorizontal || 0;
-  const defaultWidth = (size?.width || defaulButtonWidth) - (margin * 2);
+  const defaultWidth = (defaultStyle.width || size?.width || defaulButtonWidth) - (margin * 2);
   const defaultRadius = defaultStyle.borderRadius || 0;
-  const defaultHeight = size?.height || defaulButtonHeight;
+  const defaultHeight = defaultStyle.height || size?.height || defaulButtonHeight;
   const animatedHeight = animateHeight || Math.min(defaultWidth, defaultHeight);
   const animatedWidth = animateWidth || Math.min(defaultWidth, defaultHeight);
   const animatedRadius = animateRadius || (Math.min(defaultWidth, defaultHeight)/2);

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-spinner-button",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "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",