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.
npm install react-native-material-loading-buttonA 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.
npm install -S react-native-material-loading-button
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.
``javascript
import React, { Component } from 'react';
import MaterialButton from 'react-native-material-loading-button';
...
class Demo extends Component {
...
render() {
return (
loadingText="Uploading"
isLoading={this.state.loading}
onPress={() => this.onBtnPress()} />
);
}
}
...
`
| Name | Description | Type | Default |
| ---- |------------ | :---:| ------- |
| text | Button text | string | Button |
| flat | true if you want a flat button. Renders a raised button otherwise | boolean | false |true
| 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 | if the button should be rendered in a "loading" state (like in the animation at the top). | boolean | false |true` | 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
| style | Add a custom style to outer container of the button | object | - |
| textStyle | Add a custom style to the button text | object | - |
© 2018 Vahissan Nandakumar, MIT license.