https://github.com/n4kz/react-native-material-buttons

Material buttons
https://github.com/n4kz/react-native-material-buttons

android ios material material-design react react-native

Last synced: 5 days ago
JSON representation

Material buttons

• Host: GitHub
• URL: https://github.com/n4kz/react-native-material-buttons
• Owner: n4kz
• License: other
• Created: 2017-03-05T12:58:33.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2021-09-14T11:27:56.000Z (over 3 years ago)
• Last Synced: 2024-04-24T13:44:24.873Z (10 months ago)
• Topics: android, ios, material, material-design, react, react-native
• Language: JavaScript
• Homepage:
• Size: 268 KB
• Stars: 67
• Watchers: 4
• Forks: 80
• Open Issues: 6
• Metadata Files:
  • Readme: readme.md
  • License: license.txt

Awesome Lists containing this project

• awesome-material-design - react-native-material-buttons - Material Buttons with Ripple for React Native (React Native / Components React Native)

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.