react-native-material-buttons

Material buttons with consistent behaviour on iOS and Android

Installation

npm install --save react-native-material-buttons

Usage

import React, { Component } from 'react';
import { TextButton, RaisedTextButton } from 'react-native-material-buttons';

class Example extends Component {
  render() {
    return (
      <RaisedTextButton title='touch me' />
      <TextButton title='do not touch me' disabled />
    );
  }
}

Common properties

name | description | type | default :---------------------- |:-------------------------------------- | --------:|:------------------ color | Button color | String | rgb(224, 224, 224) 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 focusAnimationDuration | Button focus animation duration in ms | Number | 225 disabled | Button availability | Boolean | false disabledColor | Button color for disabled state | String | rgba(0, 0, 0, .12) onPress | Touch up callback | Function | -

Other 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 | rgb(153, 153, 153) 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

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 Alexander Nazarov. All rights reserved.