react-native-btns

React native buttons for real world apps. Easy to setup, configure and use.

Installation

npm install react-native-btns --save

or

yarn add react-native-btns

Usage

import { LinkButton, IconButton, SuperButton, FooterButton } from 'react-native-btns'

LinkButton

<LinkButton
  uppercase
  labelStyle={styles.label}
  onPress={() => this.doSomethingUseful()}
/>

LinkButton props

Props	Default values	Possible values
label	Link button	any string
labelStyle		style object
uppercase	false	Boolean
leftIcon	none	Icon element e.g react-native-vector-icons
rightIcon	none	Icon element e.g react-native-vector-icons
active	false	Boolean
disabled	false	Boolean
activityIndicatorColor	white	Color string (hex or rbg/a)
onPress	none	function

IconButton

<IconButton
  round
  size={50}
  icon={<Icon size={30} name='fingerprint' style={styles.whiteIcon} />}
  backgroundColor='#F70044'
  onPress={() => this.doSomethingUseful()}
/>

IconButton props

Props	Default values	Possible values
size	50	Integer
round	false	Boolean
active	false	Boolean
disabled	false	Boolean
activityIndicatorColor	white	Color string (hex or rbg/a)
borderColor	none	Color string (hex or rbg/a)
onPress	none	function

SuperButton

<SuperButton
  uppercase
  size='large'
  backgroundColor='#11CD86'
  onPress={() => this.doSomethingUseful()}
/>

SuperButton props

Props	Default values	Possible values
size	'normal'	enum 'tiny', 'normal', 'large'
label	Link button	any string
labelStyle		style object
uppercase	false	Boolean
leftIcon	none	Icon element e.g react-native-vector-icons
rightIcon	none	Icon element e.g react-native-vector-icons
round	false	Boolean
softCorners	false	Boolean
active	false	Boolean
disabled	false	Boolean
backgroundColor	transparent	Color string (hex or rbg/a)
activityIndicatorColor	white	Color string (hex or rbg/a)
borderColor	transparent	Color string (hex or rbg/a)
borderWidth	0	Number
onPress	none	function

FooterButton

<FooterButton
  uppercase
  size='large'
  label='Next'
  backgroundColor='#066FA5'
  labelStyle={{ fontSize: 14, color: '#fff' }}
  rightIcon={<Icon size={20} name='chevron-thin-right' style={styles.whiteIcon} />}
  onPress={() => this.doSomethingUseful()}
/>

FooterButton props

Props	Default values	Possible values
size	'normal'	enum 'tiny', 'normal', 'large'
label	Link button	any string
labelStyle		style object
uppercase	false	Boolean
leftIcon	none	Icon element e.g react-native-vector-icons
rightIcon	none	Icon element e.g react-native-vector-icons
active	false	Boolean
disabled	false	Boolean
backgroundColor	transparent	Color string (hex or rbg/a)
activityIndicatorColor	white	Color string (hex or rbg/a)
onPress	none	function

TODO

• ADD: disabledColor prop
• ADD: elevation prop