React Native Animated Loading Button

React Native Animated Loading Button is a button component that animates to a loading button and vice versa.

Installation

$ npm install react-native-animated-loading-button

$ yarn add react-native-animated-loading-button

Usage

import AnimatedLoadingButton from "react-native-animated-loading-button";

export default class View extends React.Component {

  loadingButton = React.createRef();

  showLoadingButton() {
    this.loadingButton.setLoading(true);
  }

  showButtonWithTitle() {
    this.loadingButton.setLoading(false);
  }

  render() {
    return <AnimatedLoadingButton
        ref={loadingButton => this.loadingButton = loadingButton}
        containerStyle={{
          width: "100%",
          height: 50
        }}
        buttonStyle={{
          backgroundColor: "#424242",
          borderRadius: 4,
          paddingHorizontal: 16
        }}
        title="Login"
        titleStyle={{
          color: "white"
        }}
        onPress={this.handleLoadingButtonPress}
      />
  }
}

Features

• [X] Animate to Loading State and vice versa.
• [X] Support Title.
• [ ] Support Icon Left.
• [ ] Support Icon Right.
• [X] Support Disabled button.
• [X] Support Raised button.
• [X] Supports Accessibility.

License

React Native Animated Loading Button is available under the MIT license. See LICENSE for details.