react-native-animate-loading-button

Animated load button for React Native

Usage no npm install needed!

<script type="module">
  import reactNativeAnimateLoadingButton from 'https://cdn.skypack.dev/react-native-animate-loading-button';
</script>

README

Install

Install the package NPM:

$ npm i react-native-animate-loading-button --save

or install the package YARN:

yarn add react-native-animate-loading-button

Example

Demo

Try it with expo

Usage

import React, { PureComponent } from 'react';
import { View } from 'react-native';
import AnimateLoadingButton from 'react-native-animate-loading-button';

export default class LoadingButton extends PureComponent {
  _onPressHandler() {
    this.loadingButton.showLoading(true);

    // mock
    setTimeout(() => {
      this.loadingButton.showLoading(false);
    }, 2000);
  }

  render() {
    return (
      <View style={{ flex: 1, backgroundColor: 'rgb(255,255,255)', justifyContent: 'center' }}>
        <AnimateLoadingButton
          ref={c => (this.loadingButton = c)}
          width={300}
          height={50}
          title="BUTTON"
          titleFontSize={16}
          titleColor="rgb(255,255,255)"
          backgroundColor="rgb(29,18,121)"
          borderRadius={4}
          onPress={this._onPressHandler.bind(this)}
        />
      </View>
    );
  }
}

Properties

NAME DESCRIPTION TYPE REQUIRED
width Button width Number Yes
height Button height Number Yes
title Button title String No
titleColor Button title color String No
titleFontFamily Button title font family String No
titleFontSize Button title font size Number No
backgroundColor Button background color String No
borderWidth Button border width Number No
borderRadius Button border radius Number No
activityIndicatorColor Activity indicator color String No
onPress Button onPress callback Function Yes

Author

Anderson de Carvalho

License

MIT