https://github.com/vahissan/react-native-material-loading-button
A simple material style button which supports loading state
https://github.com/vahissan/react-native-material-loading-button
material-design react-native react-native-component
Last synced: 21 days ago
JSON representation
A simple material style button which supports loading state
- Host: GitHub
- URL: https://github.com/vahissan/react-native-material-loading-button
- Owner: vahissan
- License: mit
- Created: 2018-02-23T22:10:27.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-11-27T20:32:47.000Z (over 7 years ago)
- Last Synced: 2026-03-22T22:37:03.736Z (4 months ago)
- Topics: material-design, react-native, react-native-component
- Language: JavaScript
- Size: 252 KB
- Stars: 2
- Watchers: 1
- Forks: 3
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# 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](https://fonts.google.com/specimen/Roboto).
If you need help adding custom font to a React Native project, refer [this article](https://medium.com/@danielskripnik/how-to-add-and-remove-custom-fonts-in-react-native-b2830084b0e4).
## Usage
```javascript
import React, { Component } from 'react';
import MaterialButton from 'react-native-material-loading-button';
...
class Demo extends Component {
...
render() {
return (
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](LICENSE.md).