react-native-spinner-button

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, al

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
react-native-spinner-button
105161.0.92 years ago4 years agoMinified + gzip package size for react-native-spinner-button in KB

Readme

react-native-spinner-button npm version
This is a pure javascript and react-native Button component with a Spinner embeded in it. In many of the react-native projects we have worked on required the button to be disabled when app is processing something on tap of that button, and a loading indicator on it or beside it, so the user can be made aware of app doing some processing.
From a developer perspective, it is very painful to manage two different components: a button and a spinner for lots of buttons! So when we came accross this beautiful component SSspinnerButton, we decided to do something like that in react-native.
By default it will render a Button and you have to pass a boolean isLoading prop to it. When the isLoading will be true, it will render a Spinner in place of the Button and once its false, the Button will be rendered back again.
Example of react-native-spinner-button

Features

  • Drop in replacement for a button and indicator combo
  • Very easy to use
  • Pure javscript component
  • Consistent look and feel on both iOS and Android
  • Any spinner from react-native-indicators can be used with most of its properties
  • The animations fadeIn, flipInX and flipInY can be used from react-native-animatable
  • Give any style to your button

Getting Started

npm i react-native-spinner-button --save

Usage

import SpinnerButton from 'react-native-spinner-button';
...
// Your button component
  <SpinnerButton
    buttonStyle={styles.buttonStyle}
    isLoading={this.state.defaultLoading}
    onPress={() => {
      this.setState({ defaultLoading: true });
    }}
    indicatorCount={10}
  >
    <Text style={styles.buttonText}>Default Or Ball SpinnerButton</Text>
  </SpinnerButton>
Don't forget to set the state variable you have given to isLoading prop false when processing is done for the button tap.

Common properties

  1. animationType
* Type of animation for the button and spinner.
* Default type: string
* Default value: null | undefined
  1. buttonStyle
* Its a stylesheet object.
* Default button style
  ```javascript
    defaultButtonStyle: {
      height: 50
    }
  ```
  1. 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' 
    }
  ```
  1. 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.
  1. spinnerType
* Type of the spinner.
* Default type: string
* Its default value is _BallIndicator_.
* These are all spinner types:
    1. BallIndicator
    2. BarIndicator
    3. DotIndicator
    4. MaterialIndicator
    5. PacmanIndicator
    6. PulseIndicator
    7. SkypeIndicator
    8. UIActivityIndicator
    9. WaveIndicator      
  1. 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_
  1. onPress
* The function to execute on tap of the button.
* Default type: function.
* Default value: _nothing is executed_
  1. indicatorCount
* The count property of react-native-indicators.
* Default type: number
* Default value: null | undefined
  1. size
* The size of the Spinner.
* Default type: number
* Its default value _veries according to the spinnerType_.
  1. 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)
  1. 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. 
  1. 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.
  1. 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%'
  1. 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)
  1. gradientRadialRadius
* This property used for Radial type gradient in set radius of radial gradient.
  1. gradientButtonHeight
* The size of the gradient component.
* Default type: number
  1. radialRadiusx
* The x coordinate of the center of the radial gradient.
  1. radialRadiusy
* The y coordinate of the center of the radial gradient.
  1. radialRadiusRX
* The horizontal radius of the radial gradient defining ellipse.
  1. radialRadiusRY
* The vertical radius of the radial gradient defining ellipse.
  1. animatedDuration
* Used for animation time, how long you have to execute your animation.
  1. customSpinnerComponent
* This props will allow you to add your own custom spinner component.
  1. 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.
  1. 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.
  1. 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.
  1. 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_
  1. 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_
  1. disableStyle
* Its a stylesheet object.
* This style apply when identify button disable or if network connect not available.
* Default value: null | undefined
  1. 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/)
  1. 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

Acknowledgments and Big Thanks to

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 file for details