Skip to content

n4kz/react-native-material-buttons

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

89 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.