Feat: UNT-T4799:

Apply animation on button width and corner, like visualized as converting the rectangle to circle shape and visa versa.
Support to border [type(line, dot, dash), width, color].
Support Animation duration, alpha with morphing.
Support custom spinner.

Author: Krunal-K-SimformSolutions

Example/App/App.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ScrollView } from 'react-native';
+import { ScrollView, View } from 'react-native';
 import styles from './styles/AppStyles';
 import DefaultOrBallSpinnerButton from './DefaultOrBallSpinnerButton';
 import BarSpinnerButton from './BarSpinnerButton';
@@ -15,12 +15,12 @@ const App = () => {
   return (
     <ScrollView style={styles.safeArea}>
       <DefaultOrBallSpinnerButton />
-      <BarSpinnerButton />
       <DotSpinnerButton />
-      <MaterialSpinnerButton />
       <PacmanSpinnerButton />
-      <PulseSpinnerButton />
       <SkypeSpinnerButton />
+      <BarSpinnerButton />
+      <MaterialSpinnerButton />
+      <PulseSpinnerButton />
       <UIActivitySpinnerButton />
       <WaveSpinnerButton />
     </ScrollView>

Example/App/BarSpinnerButton.js

@@ -24,6 +24,10 @@ const BarSpinnerButton = () => {
           onPress={handleButtonPress}
           animationType={'flipInY'}
           indicatorCount={10}
+          animateHeight={50}
+          animateWidth={200}
+          animateRadius={10}
+          animatedDuration={700}
         >
           <Text style={styles.buttonText}>Bar SpinnerButton</Text>
         </SpinnerButton>

Example/App/DefaultOrBallSpinnerButton.js

@@ -28,6 +28,7 @@ const DefaultOrBallSpinnerButton = () => {
           gradientColorAngle={90}
           gradientRadialRadius={10}
           gradientButtonHeight={50}
+          borderStyle={styles.borderStyle}
         >
           <Text style={styles.buttonText}>Default Or Ball SpinnerButton</Text>
         </SpinnerButton>

Example/App/DotSpinnerButton.js

@@ -24,7 +24,7 @@ const DotSpinnerButton = () => {
           size={10}
           spinnerType='DotIndicator'
           onPress={handleButtonPress}
-          animationType={'flipInX'}
+          animationType={'bounceIn'}
           gradientType={'Radial'}
           gradientColors={['#231557', '#44107A', '#FF1361', '#FFF800']}
           gradientColoroffset={['0%', '29%', '67%', '100%']}
@@ -35,6 +35,10 @@ const DotSpinnerButton = () => {
           radialRadiusy={"50%"}
           radialRadiusRX={"50%"}
           radialRadiusRY={"50%"}
+          animateHeight={50}
+          animateWidth={220}
+          animateRadius={10}
+          animatedDuration={700}
         >
           <Text style={styles.buttonText}>Dot SpinnerButton</Text>
         </SpinnerButton>

Example/App/PacmanSpinnerButton.js

@@ -28,6 +28,9 @@ const PacmanSpinnerButton = () => {
           gradientColorAngle={90}
           gradientRadialRadius={10}
           gradientButtonHeight={50}
+          animateHeight={70}
+          animateWidth={70}
+          animateRadius={35}
         >
           <Text style={styles.buttonText}>Pacman SpinnerButton</Text>
         </SpinnerButton>

Example/App/styles/AppStyles.js

@@ -17,11 +17,17 @@ export default StyleSheet.create({
   },
   buttonStyle: {
     borderRadius: 10,
-    margin: 20,
+    margin: 5
   },
   instructions: {
     textAlign: 'center',
     color: '#333333',
     marginBottom: 5,
   },
+  borderStyle: { 
+    borderWidth: 2, 
+    borderRadius: 10, 
+    borderColor: 'blue', 
+    borderStyle: 'solid' 
+  }
 });

README.md

@@ -45,7 +45,7 @@ Don't forget to set the state variable you have given to _isLoading_ prop false
 1. **animationType**
     * Type of animation for the button and spinner.
     * Default type: string
-    * Default value: _fadeIn_
+    * Default value: null | undefined
 2. **buttonStyle**
     * Its a stylesheet object.
     * Default button style
@@ -57,27 +57,22 @@ Don't forget to set the state variable you have given to _isLoading_ prop false
           backgroundColor: '#25CAC6',
         }
       ```
-3. **indicatorCount**
-    * The count property of react-native-indicators.
-    * Default type: number
-    * Default value: _fadeIn_
-4. **isLoading**
-    * The flag to render a Button or a Spinner. _false_ will render button and _true_ will render button.
-    * Default type: boolean
-    * Default value: _false_
-5. **onPress**
-    * The function to execute on tap of the button.
-    * Default type: functin.
-    * Default value: _nothing is executed_
-6. **size**
-    * The size of the Spinner.
-    * Default type: number
-    * Its default value _veries according to the spinnerType_.
-7. **spinnerColor**
+3. **borderStyle**
+    * Its a stylesheet object with support all basic border property like width, radius, color and style(solid, dotted and dashed) etc.
+    * If you want to need to apply border in your button then you should used like 
+      ```javascript
+        buttonBorderStyle: {
+          borderWidth: 2, 
+          borderRadius: 10, 
+          borderColor: 'blue', 
+          borderStyle: 'solid' 
+        }
+      ```
+4. **spinnerColor**
     * The color of the Spinner.
     * Default type: string
     * Its default value is _white_. You can give spinnerColor in all react-native acceptable formats of color.
-8. **spinnerType**
+5. **spinnerType**
     * Type of the spinner.
     * Default type: string
     * Its default value is _BallIndicator_.
@@ -90,11 +85,81 @@ Don't forget to set the state variable you have given to _isLoading_ prop false
         6. PulseIndicator
         7. SkypeIndicator
         8. UIActivityIndicator
-        9. WaveIndicator
-9. **spinnerOptions**
+        9. WaveIndicator      
+6. **isLoading**
+    * The flag to render a Button or a Spinner. _false_ will render button and _true_ will render spinner.
+    * Default type: boolean
+    * Default value: _false_
+7. **onPress**
+    * The function to execute on tap of the button.
+    * Default type: function.
+    * Default value: _nothing is executed_
+8. **indicatorCount**
+    * The count property of react-native-indicators.
+    * Default type: number
+    * Default value: null | undefined
+9. **size**
+    * The size of the Spinner.
+    * Default type: number
+    * Its default value _veries according to the spinnerType_.
+10. **spinnerOptions**
     * An object of waveMode for WaveIndicator for WaveIndicator.
     * Default type: Object
     * For more details about these properties, refer [react-native-indicators](https://github.com/n4kz/react-native-indicators)
+11. **gradientType**
+    * Gradients allow you to show more than one color with a smooth transition between the colors (think Instagram logo). 
+    * They come in handy when trying to create multi-color backgrounds or custom buttons. You can have gradients in different varieties, horizontally, vertically, diagonally, etc.
+    * Currently, we are supporting two types of gradient 1.Linear Gradient & 2.Radial Gradient. 
+12. **gradientColors**
+    * This is how we pass the colors we want to be displayed, 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.
+13. **gradientColoroffset**
+    * An array of string that define where each color will stop in the gradient. 
+    * These values are also passed as a percentage of the entire gradient from 0% – 100% and have to map the corresponding colors passed in length and position. 
+    * For colors={[“red”, “yellow”, “green”}] then we’ll have locations={['0%', '50%', '80%']} with first color (red) covering '0%' – '50%', second (yellow) going from '50%' – '80%' and yellow '80%' – '100%'
+14. **gradientColorAngle**
+    * The gradient line's angle of direction. A value of 0deg is equivalent to to top; increasing values rotate clockwise from there.
+    * The angle range of 0 to 360.
+    * [More detail to read](https://www.quirksmode.org/css/images/angles.html)
+15. **gradientRadialRadius**
+    * This property used for Radial type gradient in set radius of radial gradient.
+16. **gradientButtonHeight**
+    * The size of the gradient component.
+    * Default type: number
+17. **radialRadiusx**
+    * The x coordinate of the center of the radial gradient.
+18. **radialRadiusy**
+    * The y coordinate of the center of the radial gradient.
+19. **radialRadiusRX**
+    * The horizontal radius of the radial gradient defining ellipse.
+20. **radialRadiusRY**
+    * The vertical radius of the radial gradient defining ellipse.
+21. **animatedDuration**
+    * Used for animation time, how long you have to execute your animation.
+22. **customSpinnerComponent**
+    * This props will allow you to add your own custom spinner component.
+23. **animateWidth**
+    * This props used to set component width when progress/loading will start..
+    * If you want to not set this props then identify  width and height which is minimum and then used that value.
+24. **animateHeight**
+    * This props used to set component height when progress/loading will start.
+    * If you want to not set this props then identify  width and height which is minimum and then used that value.
+25. **animateRadius**
+    * This props used to set component radius when progress/loading will start.
+    * If you want to not set this props then create circle shape.
+26. **isConnected**
+    * 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**
+    * 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_
+28. **disableStyle**
+    * Its a stylesheet object.
+    * This style apply when identify button disable or if network connect not available.
+    * Default value: null | undefined
 
 ## Example
   A full working example project is here [Example](https://github.com/simformsolutions/react-native-spinner-button/tree/master/Example)
@@ -104,6 +169,11 @@ Don't forget to set the state variable you have given to _isLoading_ prop false
 * [react-native-animatable](https://github.com/oblador/react-native-animatable)
 * [SSspinnerButton](https://github.com/simformsolutions/SSSpinnerButton)
 
+## Roadmap (What to do in next)
+1. Support inbuild different gradient with name.
+2. Support result state (InPreogress, InSuccess and InFailure).
+3. Neon style apply
+4. Button shadow 
 ## License
 
 This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details

components/Spinner.js components/AnimatableView.jscomponents/Spinner.js renamed to components/AnimatableView.js

@@ -1,28 +1,34 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { View } from 'react-native';
 import styles from './styles/SpinnerButtonStyle';
 import SpinnerComponent from './SpinnerComponent';
 import * as Animatable from 'react-native-animatable';
-import { DEFAULT_ANIMATION_TYPE, getSpinnerStyle } from './utils';
 
-const Spinner = ({
+const AnimatableView = ({
   animationType,
-  buttonStyle,
+  children,
+  customSpinnerComponent,
+  height,
+  size,
   spinnerColor,
   spinnerType,
-  isLoading,
   indicatorCount,
-  size,
-  spinnerOptions
+  spinnerOptions,
+  isLoading,
+  animatedDuration
 }) => {
-  if (isLoading) {
-    const { height, width, customSpinnerStyle } = getSpinnerStyle(spinnerType, buttonStyle, styles.defaultButtonStyle);
-    return (
-      <View style={[styles.loaderContainer, { width: width }]}>
-        <Animatable.View 
-          animation={animationType || DEFAULT_ANIMATION_TYPE} 
-          style={[styles.defaultSpinnerContainerStyle, customSpinnerStyle]}>
+  const isCustomeSpinner = customSpinnerComponent !== null && customSpinnerComponent !== undefined;
+  return (
+    <>
+      {!isLoading && 
+        <Animatable.View animation={animationType} duration={animatedDuration}>
+          {children}
+        </Animatable.View>
+      }
+      {isLoading && 
+        <Animatable.View animation={animationType} duration={animatedDuration} style={styles.absoluteView}>
+          {isCustomeSpinner && customSpinnerComponent}
+          {!isCustomeSpinner &&
             <SpinnerComponent
               height={height}
               size={size}
@@ -31,24 +37,28 @@ const Spinner = ({
               indicatorCount={indicatorCount}
               spinnerOptions={spinnerOptions}
             />
+          }
         </Animatable.View>
-      </View>
-    );
-  }
+      }
+    </>
+  )
 };
 
-Spinner.propTypes = {
+AnimatableView.propTypes = {
   animationType: PropTypes.string,
-  buttonStyle: PropTypes.object,
+  children: PropTypes.any.isRequired,
+  customSpinnerComponent: PropTypes.node,
+  height: PropTypes.number,
+  size: PropTypes.number,
   spinnerColor: PropTypes.string,
   spinnerType: PropTypes.string,
-  isLoading: PropTypes.bool,
   indicatorCount: PropTypes.number,
-  size: PropTypes.number,
   spinnerOptions: PropTypes.shape({
     waveFactor: PropTypes.number,
     waveMode: PropTypes.string
-  })
-}
+  }),
+  isLoading: PropTypes.bool,
+  animatedDuration: PropTypes.number
+};
 
-export default Spinner;
+export default AnimatableView;

components/AnimatedView.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Animated } from 'react-native';
+import styles from './styles/SpinnerButtonStyle';
+import SpinnerComponent from './SpinnerComponent';
+
+const AnimatedView = ({
+  animatedChildHideStyle,
+  animatedChildShowStyle,
+  children,
+  customSpinnerComponent,
+  height,
+  size,
+  spinnerColor,
+  spinnerType,
+  indicatorCount,
+  spinnerOptions
+}) => {
+  const isCustomeSpinner = customSpinnerComponent !== null && customSpinnerComponent !== undefined;
+  return (
+    <>
+      <Animated.View style={animatedChildHideStyle}>
+        {children}
+      </Animated.View>
+      <Animated.View style={[styles.absoluteView, animatedChildShowStyle]}>
+        {isCustomeSpinner && customSpinnerComponent}
+        {!isCustomeSpinner &&
+          <SpinnerComponent
+            height={height}
+            size={size}
+            spinnerColor={spinnerColor}
+            spinnerType={spinnerType}
+            indicatorCount={indicatorCount}
+            spinnerOptions={spinnerOptions}
+          />
+        }
+      </Animated.View>
+    </>
+  )
+};
+
+AnimatedView.propTypes = {
+  animatedChildHideStyle: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
+  animatedChildShowStyle: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
+  children: PropTypes.any.isRequired,
+  customSpinnerComponent: PropTypes.node,
+  height: PropTypes.number,
+  size: PropTypes.number,
+  spinnerColor: PropTypes.string,
+  spinnerType: PropTypes.string,
+  indicatorCount: PropTypes.number,
+  spinnerOptions: PropTypes.shape({
+    waveFactor: PropTypes.number,
+    waveMode: PropTypes.string
+  })
+};
+
+export default AnimatedView;