react-native-spinkit-button

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

Preview

Getting Started

Using npm

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

Using yarn

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

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

Usage

Text Only

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

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

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

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.