react-native-material-buttons

Material buttons with consistent behaviour on iOS and Android.

react-native-material-buttons

Features

  • Easy to use
  • Consistent look and feel on iOS and Android
  • Animated state transitions
  • Ripple animation on touch
  • Pure javascript implementation

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 {
  _onPress = ({ id }) => {
    console.log(`${id} pressed`);
  };

  render() {
    let payload = { id: 'button-1' };

    return (
      <RaisedTextButton title='touch me' onPress={this._onPress} payload={payload} />
    );
  }
}

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

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

GitHub