# react-native-material-buttons > Material buttons Latest version **0.6.0** (published 2019-10-01) · BSD-3-Clause license · 0 weekly downloads ## Install ```sh npm install react-native-material-buttons pnpm add react-native-material-buttons yarn add react-native-material-buttons bun add react-native-material-buttons ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.6.0 | | Published | 2019-10-01 | | First published | 2017-03-05 | | Weekly downloads | 0 | | License | BSD-3-Clause | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 2 | | Unpacked size | 16.5 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 68 | | Author | Alexander Nazarov | | Maintainers | n4kz | | Keywords | react, react-component, react-native, ios, android, raised, flat, button, ripple, material | ## Links - npm: https://www.npmjs.com/package/react-native-material-buttons - Repository: https://github.com/n4kz/react-native-material-buttons - npm.io page: https://npm.io/package/react-native-material-buttons ## Dependencies (2) - [prop-types](https://npm.io/package/prop-types.md) ^15.5.9 - [react-native-material-ripple](https://npm.io/package/react-native-material-ripple.md) ^0.9.1 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 0.6.0 (latest) — 2019-10-01 - 0.5.0 — 2017-09-18 - 0.4.1 — 2017-08-08 - 0.4.0 — 2017-05-26 - 0.3.1 — 2017-05-11 - 0.3.0 — 2017-05-06 - 0.2.6 — 2017-04-26 - 0.2.5 — 2017-04-16 - 0.2.4 — 2017-04-10 - 0.2.3 — 2017-04-09 - 0.2.2 — 2017-03-27 - 0.2.1 — 2017-03-16 - 0.2.0 — 2017-03-09 - 0.1.2 — 2017-03-07 - 0.1.1 — 2017-03-06 - … 1 more at https://npm.io/package/react-native-material-buttons/versions ## README [npm-badge]: https://img.shields.io/npm/v/react-native-material-buttons.svg?colorB=ff6d00 [npm-url]: https://npmjs.com/package/react-native-material-buttons [license-badge]: https://img.shields.io/npm/l/react-native-material-buttons.svg?colorB=448aff [license-url]: https://raw.githubusercontent.com/n4kz/react-native-material-buttons/master/license.txt [example-url]: https://cloud.githubusercontent.com/assets/2055622/23826422/df52a53c-06ac-11e7-855f-f6d189c50320.gif [ripple]: https://github.com/n4kz/react-native-material-ripple#properties # react-native-material-buttons [![npm][npm-badge]][npm-url] [![license][license-badge]][license-url] Material buttons with consistent behaviour on iOS and Android ![example][example-url] ## Features * Easy to use * Consistent look and feel on iOS and Android * Animated state transitions * Ripple animation on touch * Pure javascript implementation ## Installation ```bash npm install --save react-native-material-buttons ``` ## Usage ```javascript import React, { Component } from 'react'; import { TextButton, RaisedTextButton } from 'react-native-material-buttons'; class Example extends Component { _onPress = ({ id }) => { console.log(`${id} pressed`); }; render() { let payload = { id: 'button-1' }; return ( ); } } ``` ## Common properties name | description | type | default :------------------------ |:-------------------------------------- | --------------:|:------------------ color | Button color | String | rgb(224, 224, 224) disabledColor | Button color for disabled state | String | rgb(240, 240, 240) shadeColor | Button shade color for focused state | String | rgb(0, 0, 0) shadeOpacity | Button shade opacity for focused state | Number | 0.12 shadeBorderRadius | Button shade border radius | Number | 2 focusAnimation | Focus animation state | Animated.Value | - disableAnimation | Disable animation state | Animated.Value | - focusAnimationDuration | Focus animation duration in ms | Number | 225 disableAnimationDuration | Disable animation duration in ms | Number | 225 disabled | Button availability | Boolean | false onPress | Touch up callback | Function | - payload | Payload object for onPress callback | Any | - Other [Ripple][ripple] properties will also work ## TextButton properties name | description | type | default :------------------ |:------------------------------------- | --------:|:------------------ title | Button title | String | - titleColor | Button title color | String | rgb(0, 0, 0) disabledTitleColor | Button title color for disabled state | String | rgba(0, 0, 0, .26) titleStyle | Button title style | Object | - ## RaisedTextButton properties name | description | type | default :------------------ |:------------------------------------- | --------:|:------------------ title | Button title | String | - titleColor | Button title color | String | rgb(66, 66, 66) disabledTitleColor | Button title color for disabled state | String | rgba(0, 0, 0, .26) titleStyle | Button title style | Object | - ## Example ```bash git clone https://github.com/n4kz/react-native-material-buttons cd react-native-material-buttons/example npm install npm run ios # or npm run android ``` ## Copyright and License BSD License Copyright 2017-2019 Alexander Nazarov. All rights reserved. --- _Source: https://npm.io/package/react-native-material-buttons · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._