React Native button component with multiple animated spinners
Switch branches/tags
Nothing to show
Clone or download
simformsolutions
simformsolutions 1.0.3
Latest commit 52fbd72 Oct 24, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
Example -Published module on npm Jul 31, 2018
components remove console Oct 21, 2018
.gitignore Example Upload Jul 31, 2018
.npmignore -Published module on npm Jul 31, 2018
LICENSE initial commit Jul 30, 2018
README.md Updated readme Jul 31, 2018
example.gif Example Upload Jul 31, 2018
package-lock.json 1.0.3 Oct 24, 2018
package.json 1.0.3 Oct 24, 2018

README.md

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: fadeIn
  2. buttonStyle
    • Its a stylesheet object.
    • Default button style
        defaultButtonStyle: {
          justifyContent: 'center',
          alignItems: 'center',
          height: 50,
          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
    • 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
    • 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
  9. spinnerOptions
    • An object of waveMode for WaveIndicator for WaveIndicator.
    • Default type: Object
    • For more details about these properties, refer react-native-indicators

Example

A full working example project is here Example

Acknowledgments and Big Thanks to

License

This project is licensed under the MIT License - see the LICENSE file for details