Awesome Open Source
Awesome Open Source

react-native-material-buttons

npm license

Material buttons with consistent behaviour on iOS and Android

example

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 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

Copyright and License

BSD License

Copyright 2017-2019 Alexander Nazarov. All rights reserved.

Alternatives To React Native Material Buttons
Select To Compare


Alternative Project Comparisons
Related Awesome Lists
Top Programming Languages

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,122,137
Reactjs (171,026
String (41,957
Button (18,729
Animation (17,740
Material (15,844
Rgb (4,993
Material Design (4,726