Material Button

it's a small react native component with the right behavior for both android and ios.

Usage

import React, { Component } from 'react'
import { TouchableNativeFeedback } from 'react-native';
import { Button } from 'react-native-ae-button'

export default class Example extends Component {

  render() {
    return (
      <Button icon="facebook"
        iconColor="white"
        iconPosition="left"
        text="Login With Facebook"
        textStyle={{color: 'white'}}
        style={{backgroundColor: '#000',
                borderColor: '#000',
                width: 300}}
        background= {TouchableNativeFeedback.Ripple('#6473f3', true)} // android only (first param for color, second param set true if button has radius)
        activeOpacity={.5} // ios only (set button opacity when clicked)
        loading={false} // if true button set to disable mood and content converted to loading indicator
        indicatorColor="white"
        iconType="material"
        disabled />
    )
  }
}

Screenshoot

Supported Icons

Ionicons by Ben Sperry (v4.2.4, 696 icons)
Octicons by Github, Inc. (v8.0.0, 177 icons)
Evilicons by Alexander Madyankin & Roman Shamin (v1.10.1, 70 icons)
FontAwesome by Dave Gandy (v4.7.0, 675 icons)
MaterialCommunityIcons by MaterialDesignIcons.com (v2.8.94, 2894 icons)

Installation

1- Run yarn add react-native-ae-button

  #OR
  #npm install --save react-native-ae-button

2- Run react-native link react-native-vector-icons

Properties

Button

name | type | default | :------------------- |:--------------------------------------| :------------------| style | Number | | disabled | Bool | false | onPress | Function | | onPressIn | Function | | onPressOut | Function | | onLongPress | Function | | delayPressIn | Number | | delayPressOut | Number | | delayLongPress | Number | | loading | Bool | false | indicatorColor | Color | #000 | activeOpacity | Number (IOS Only) | 0.5 | background | TouchableNativeFeedback (Android Only) | TouchableNativeFeedback.Ripple('#777777', true)|

Text

name | type | default :-------------------- |:------------------ |:------------------ text | String | textStyle | Object |

Icon

Name | Type | Default :-------------------- |:------------------ |:---------- iconType | String | ion icon | String | iconSize | Number | 20 iconColor | String | #000 iconPosition | String | left iconStyle | Object |

## License

The MIT License.

See [LICENSE](LICENSE)