# react-native-spinkit-button

> React Native loading buttons, with react-native-spinkit multiple animated loading indicators

Latest version **1.2.1** (published 2022-05-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-spinkit-button
pnpm add react-native-spinkit-button
yarn add react-native-spinkit-button
bun add react-native-spinkit-button
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.1 |
| Published | 2022-05-26 |
| First published | 2021-06-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 12.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Muhammad Taimoor Sultani |
| Maintainers | taimoorsultani |
| Keywords | react-native, react-ntive-spinkit, react-native-spinkit-button, react-native-spinkit-buttons, react-native-spinner-button, react-native-spinner-buttons, react-native-loading-button, react-native-loading-buttons, button, react native, react native button, react native loading button, spinner button, loader button, indicator button, react component |

## Links

- npm: https://www.npmjs.com/package/react-native-spinkit-button
- Repository: https://github.com/taimoorsultani/react-native-spinkit-button
- Homepage: https://github.com/taimoorsultani/react-native-spinkit-button#readme
- Issues: https://github.com/taimoorsultani/react-native-spinkit-button/issues
- npm.io page: https://npm.io/package/react-native-spinkit-button

## Dependencies (2)

- [prop-types](https://npm.io/package/prop-types.md) ^15.8.1
- [react-native-spinkit](https://npm.io/package/react-native-spinkit.md) ^1.5.1

## Recent versions

- 1.2.1 (latest) — 2022-05-26
- 1.2.0 — 2021-06-09
- 1.1.0 — 2021-06-08
- 1.0.0 — 2021-06-04

## README

# react-native-spinkit-button [![npm version](https://badge.fury.io/js/react-native-spinkit-button.svg)](https://badge.fury.io/js/react-native-spinkit-button)

`React-Native` `Button`, with collection of animated loading indicators `(react-native-spinkit)`.

# Preview

![Example of react-native-spinkit-button](https://github.com/taimoorsultani/react-native-spinkit-button/blob/main/example.gif)

## Getting Started

### Using npm

```bash
npm i react-native-spinkit react-native-spinkit-button react-native-vector-icons
```

### Using yarn

```bash
yarn add react-native-spinkit react-native-spinkit-button react-native-vector-icons
```

[react-native-spinkit](https://github.com/maxs15/react-native-spinkit)
[react-native-vector-icons](https://github.com/oblador/react-native-vector-icons)

## Usage

### Text Only

```javascript
import React, {useState} from 'react';
import SpinkitButton from 'react-native-spinkit-button';

const App = () => {
  const [onlyTextLoading, setOnlyTextLoading] = useState(false);

  const onTextClick = () => {
    setOnlyTextLoading(true);
    setTimeout(() => {
      setOnlyTextLoading(false);
    }, 3000);
  };

  return (
    <SpinkitButton
      width={270}
      height={40}
      borderRadius={11}
      onPress={onTextClick}
      buttonStyle={styles.button}
      label={'ONLY TEXT'}
      labelStyle={styles.textButtonStyle}
      loading={onlyTextLoading}
      size={15}
      type={'CircleFlip'}
      color={'#FFFFFF'}
      animationDuration={300}
    />
  );
};
```

### Icon & Text

```javascript
import React, {useState} from 'react';
import SpinkitButton from 'react-native-spinkit-button';
import Icon from 'react-native-vector-icons/dist/FontAwesome';

const App = () => {
  const [iconAndTextLoading, setIconAndTextLoading] = useState(false);

  const iconWithTextClick = () => {
    setIconAndTextLoading(true);
    setTimeout(() => {
      setIconAndTextLoading(false);
    }, 3000);
  };

  return (
    <SpinkitButton
      width={270}
      height={40}
      borderRadius={11}
      onPress={iconWithTextClick}
      buttonStyle={styles.button}
      label={'TEXT with ICON'}
      labelStyle={styles.textButtonStyle}
      loading={iconAndTextLoading}
      labelAndTextContainer={styles.labelAndTextContainer}
      iconComponent={
        <Icon name="rocket" size={20} color="#FFFFFF" style={styles.icon} />
      }
      size={15}
      type={'Bounce'}
      color={'#FFFFFF'}
      animationDuration={300}
    />
  );
};
```

### Icon only

```javascript
import React, {useState} from 'react';
import SpinkitButton from 'react-native-spinkit-button';
import Icon from 'react-native-vector-icons/dist/FontAwesome';

const App = () => {
  const [onlyIconLoading, setOnlyIconLoading] = useState(false);

  const onIconClick = () => {
    setOnlyIconLoading(true);
    setTimeout(() => {
      setOnlyIconLoading(false);
    }, 3000);
  };

  return (
    <SpinkitButton
      width={270}
      height={40}
      borderRadius={11}
      onPress={onIconClick}
      buttonStyle={styles.button}
      labelStyle={styles.textButtonStyle}
      loading={onlyIconLoading}
      labelAndTextContainer={styles.labelAndTextContainer}
      iconComponent={
        <Icon name="rocket" size={20} color="#FFFFFF" style={styles.icon} />
      }
      size={15}
      type={'Wave'}
      color={'#FFFFFF'}
      animationDuration={300}
    />
  );
};
```

## Example

A full working example project is here [react-native-spinkit-button/example](https://github.com/taimoorsultani/react-native-spinkit-button/tree/main/example)

## Properties

| Prop                  |   Default    |     Type      | Description                                      |
| :-------------------- | :----------: | :-----------: | :----------------------------------------------- |
| width                 |    `250`     |   `number`    | width of button                                  |
| height                |     `40`     |   `number`    | height of button                                 |
| borderRadius          |     `10`     |   `number`    | border radius of button                          |
| buttonStyle           |     `{}`     |    `style`    | style of button                                  |
| onPress               |  `() => {}`  |  `function`   | the function to execute on tap                   |
| disabled              |   `false`    |    `bool`     | to disable the button                            |
| labelAndTextContainer |     `{}`     |    `style`    | label container styles                           |
| label                 |    `null`    |   `string`    | label of button                                  |
| labelStyle            |     `{}`     |    `style`    | style of label                                   |
| iconComponent         |    `null`    | `elementType` | `Icon` or `Image` component                      |
| loading               |   `false`    |    `bool`     | bool value to render spinkit indicator or button |
| size                  |     `10`     |   `number`    | size of spinkit indicator                        |
| type                  | `CircleFlip` |    `oneOf`    | type of spinkit indicator                        |
| color                 |  `#FFFFFF`   |   `string`    | color of spinkit indicator                       |
| animationDuration     |    `400`     |   `number`    | duration of animation                            |

### List of available spinkit indicator types

- CircleFlip
- Bounce
- Wave
- WanderingCubes
- Pulse
- ChasingDots
- ThreeBounce
- Circle
- 9CubeGrid
- WordPress (IOS only)
- FadingCircle
- FadingCircleAlt
- Arc (IOS only)
- ArcAlt (IOS only)

## Acknowledgment and Big Thanks to

[react-native-spinkit](https://github.com/maxs15/react-native-spinkit)
[react-native-vector-icons](https://github.com/oblador/react-native-vector-icons)

## License

This project is licensed under the MIT License -
(c) 2021 [Muhammad Taimoor Sultani](https://github.com/taimoorsultani), [MIT license](/LICENSE).

---
_Source: https://npm.io/package/react-native-spinkit-button · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._