react-native-icon-button

A simple button component allowing you to create customisable and visually appealing buttons, utilising images, text or a combination of both depending on the desired result.

Installation

To install simply enter the following...

$ npm install react-native-icon-button

Then require it in your project wherever you need it...

var Button = require('react-native-icon-button');

Properties

| Prop | Type | Opt/Required | Default | Note | |---|---|---|---|---| |icon|Image|Optional|N/A|The image resource (must be required directly). |iconSize|Number|Optional|N/A|Scales the icon / image to the specified size. |text|String|Optional|N/A|The text that will be displayed on the button. |onPress|Function|Required|N/A|A function that will be called when the accordion is pressed. |underlayColor|String|Optional|transparent|The underlay color of the TouchableHighlight. |style|Object|Optional|(See Example)|Custom button styling, colors, border radius etc...

Example

  
var Button = require('react-native-icon-button');

var testing = React.createClass({

  action: function() {
    //Do stuff! :)
  },
  
  render: function() {
    return (
      <View style={styles.container}>
        <Button 
          style={styles.button}
          onPress={this.action}
          icon={require('image!my_icon')}
          iconSize={20}
          color={"white"}
          text={"Press me!"}
        />
      </View>
    );
  }
  
});

var styles = StyleSheet.create({

  button: {
  	padding: 10,
  	borderRadius: 5,
  	backgroundColor: '#272822',
  	color: 'white'
  }
  
});