1.0.0 • Published 4 years ago

react-native-ae-button v1.0.0

Weekly downloads
-
License
MIT
Repository
-
Last release
4 years ago

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

ScreenShot

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

nametypedefault
styleNumber
disabledBoolfalse
onPressFunction
onPressInFunction
onPressOutFunction
onLongPressFunction
delayPressInNumber
delayPressOutNumber
delayLongPressNumber
loadingBoolfalse
indicatorColorColor#000
activeOpacityNumber (IOS Only)0.5
backgroundTouchableNativeFeedback (Android Only)TouchableNativeFeedback.Ripple('#777777', true)

Text

nametypedefault
textString
textStyleObject

Icon

NameTypeDefault
iconTypeStringion
iconString
iconSizeNumber20
iconColorString#000
iconPositionStringleft
iconStyleObject
## License

The MIT License.

See [LICENSE](LICENSE)