react-native-spinner-button

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

GitHub