react-native-spinkit-button v1.2.1

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

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.