react-native-material-loading-button

A simple material style button with "Raised" (default) and "Flat" styles, which supports a "Loading" state which makes the user wait for the action to complete without affecting the user experience.

Installation

npm install -S react-native-material-loading-button

Adding Roboto-Medium Font

This component requires Roboto-Medium font to be added in the main project. You can download the font from Google Fonts.

If you need help adding custom font to a React Native project, refer this article.

Usage

import React, { Component } from 'react';
import MaterialButton from 'react-native-material-loading-button';

...

class Demo extends Component {
  
  ...

  render() {
    return (
      <MaterialButton
        text="Upload"
        loadingText="Uploading"
        isLoading={this.state.loading} 
        onPress={() => this.onBtnPress()} />
    );
  }
}

...

Props

| Name | Description | Type | Default | | ---- |------------ | :---:| ------- | | text | Button text | string | Button | | flat | true if you want a flat button. Renders a raised button otherwise | boolean | false | | color | Primary color of the button. This will be background color for raised button (default). For flat buttons, this will set the text color. | string | #039be5 | | onPress | Event handler for button onPress | function | - | | isLoading | true if the button should be rendered in a "loading" state (like in the animation at the top). | boolean | false | | loadingText | This is be the button text next to the loading spinner if specified. Otherwise, value of "text" will be shown next to the loading spinner. | string | - | | disabled | Button will not be clickable and visually goes to "disabled" state if set to true | boolean | false | | style | Add a custom style to outer container of the button | object | - | | textStyle | Add a custom style to the button text | object | - |

License

© 2018 Vahissan Nandakumar, MIT license.