0.1.1 • Published 6 years ago
react-native-material-loading-button v0.1.1
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.