https://github.com/taimoorsultani/react-native-spinkit-button
React-Native Button, with the collection of animated loading indicators (react-native-spinkit)
https://github.com/taimoorsultani/react-native-spinkit-button
button indicator loading loading-button react react-native react-native-button react-native-buttons spinner spinners
Last synced: 30 days ago
JSON representation
React-Native Button, with the collection of animated loading indicators (react-native-spinkit)
- Host: GitHub
- URL: https://github.com/taimoorsultani/react-native-spinkit-button
- Owner: taimoorsultani
- License: mit
- Created: 2021-06-01T14:15:22.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2022-06-22T20:17:06.000Z (almost 4 years ago)
- Last Synced: 2025-08-02T17:43:36.869Z (10 months ago)
- Topics: button, indicator, loading, loading-button, react, react-native, react-native-button, react-native-buttons, spinner, spinners
- Language: JavaScript
- Homepage:
- Size: 638 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-spinkit-button [](https://badge.fury.io/js/react-native-spinkit-button)
`React-Native` `Button`, with collection of animated loading indicators `(react-native-spinkit)`.
# Preview
## 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 (
);
};
```
### 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 (
}
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 (
}
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).