https://github.com/philip-bui/react-native-animated-loading-button

React Native Animated Loading Button.
https://github.com/philip-bui/react-native-animated-loading-button

button-animation github-actions loading loading-animations react-native react-native-animation react-native-component

Last synced: 8 months ago
JSON representation

React Native Animated Loading Button.

• Host: GitHub
• URL: https://github.com/philip-bui/react-native-animated-loading-button
• Owner: philip-bui
• License: mit
• Created: 2019-11-03T00:15:13.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2023-01-06T02:19:36.000Z (almost 3 years ago)
• Last Synced: 2025-03-28T01:25:51.958Z (9 months ago)
• Topics: button-animation, github-actions, loading, loading-animations, react-native, react-native-animation, react-native-component
• Language: JavaScript
• Homepage:
• Size: 1.24 MB
• Stars: 3
• Watchers: 1
• Forks: 1
• Open Issues: 14
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          






# React Native Animated Loading Button

[![Actions Status](https://github.com/philip-bui/react-native-animated-loading-button/workflows/build/badge.svg)](https://github.com/philip-bui/react-native-animated-loading-button/actions)

[![npm](https://img.shields.io/npm/v/react-native-animated-loading-button.svg?style=flat)](https://www.npmjs.com/package/react-native-animated-loading-button)

![Downloads](https://img.shields.io/npm/dt/react-native-animated-loading-button.svg?style=flat)

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

## Installation

```bash

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

```

```

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

```

## Usage

```javascript

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  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](https://github.com/philip-bui/react-native-animated-loading-button/blob/master/LICENSE) for details.