react-native-spinkit-button

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

Preview

Getting Started

Using npm

1npm i react-native-spinkit react-native-spinkit-button react-native-vector-icons

Using yarn

1yarn add react-native-spinkit react-native-spinkit-button react-native-vector-icons

react-native-spinkit react-native-vector-icons

Usage

Text Only

1import React, {useState} from 'react';
2import SpinkitButton from 'react-native-spinkit-button';
3
4const App = () => {
5  const [onlyTextLoading, setOnlyTextLoading] = useState(false);
6
7  const onTextClick = () => {
8    setOnlyTextLoading(true);
9    setTimeout(() => {
10      setOnlyTextLoading(false);
11    }, 3000);
12  };
13
14  return (
15    <SpinkitButton
16      width={270}
17      height={40}
18      borderRadius={11}
19      onPress={onTextClick}
20      buttonStyle={styles.button}
21      label={'ONLY TEXT'}
22      labelStyle={styles.textButtonStyle}
23      loading={onlyTextLoading}
24      size={15}
25      type={'CircleFlip'}
26      color={'#FFFFFF'}
27      animationDuration={300}
28    />
29  );
30};

Icon & Text

1import React, {useState} from 'react';
2import SpinkitButton from 'react-native-spinkit-button';
3import Icon from 'react-native-vector-icons/dist/FontAwesome';
4
5const App = () => {
6  const [iconAndTextLoading, setIconAndTextLoading] = useState(false);
7
8  const iconWithTextClick = () => {
9    setIconAndTextLoading(true);
10    setTimeout(() => {
11      setIconAndTextLoading(false);
12    }, 3000);
13  };
14
15  return (
16    <SpinkitButton
17      width={270}
18      height={40}
19      borderRadius={11}
20      onPress={iconWithTextClick}
21      buttonStyle={styles.button}
22      label={'TEXT with ICON'}
23      labelStyle={styles.textButtonStyle}
24      loading={iconAndTextLoading}
25      labelAndTextContainer={styles.labelAndTextContainer}
26      iconComponent={
27        <Icon name="rocket" size={20} color="#FFFFFF" style={styles.icon} />
28      }
29      size={15}
30      type={'Bounce'}
31      color={'#FFFFFF'}
32      animationDuration={300}
33    />
34  );
35};

Icon only

1import React, {useState} from 'react';
2import SpinkitButton from 'react-native-spinkit-button';
3import Icon from 'react-native-vector-icons/dist/FontAwesome';
4
5const App = () => {
6  const [onlyIconLoading, setOnlyIconLoading] = useState(false);
7
8  const onIconClick = () => {
9    setOnlyIconLoading(true);
10    setTimeout(() => {
11      setOnlyIconLoading(false);
12    }, 3000);
13  };
14
15  return (
16    <SpinkitButton
17      width={270}
18      height={40}
19      borderRadius={11}
20      onPress={onIconClick}
21      buttonStyle={styles.button}
22      labelStyle={styles.textButtonStyle}
23      loading={onlyIconLoading}
24      labelAndTextContainer={styles.labelAndTextContainer}
25      iconComponent={
26        <Icon name="rocket" size={20} color="#FFFFFF" style={styles.icon} />
27      }
28      size={15}
29      type={'Wave'}
30      color={'#FFFFFF'}
31      animationDuration={300}
32    />
33  );
34};

Example

A full working example project is here react-native-spinkit-button/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 react-native-vector-icons

License

This project is licensed under the MIT License - (c) 2021 Muhammad Taimoor Sultani, MIT license.