Button

A Button component will be useful to trigger an operation. This button component have provides a lot of types of buttons to suit a application's needs. It also allows to customize in case the need arises.

Usage

Basic Usage

import {Button} from 'arivaa-basic';
//Large and Primary
<Button
    type="primary"
    size="large"
    text="Primary"
/>
//Small and primary
<Button
    type="primary"
    size="small"
    text="Primary"
/>
//Warning
<Button
    type="warning"
    size="large"
    text="Warning"
/>
//Success button
<Button
    type="success"
    size="large"
    text="Success"
/>
//Bordered
<Button
    type="large"
    size="bordered"
    text="Bordered"
/>

 

Advanced Usage

import {Button,Icon} from 'arivaa-basic';
//Default button with loading icon
<Button
    type="default"
    size="large"
    text="Loading"
    loading = {true}//Loading
/>
//Rounded with icon
<Button
    type="rounded"
    size="large"
    text=<Icon name={'ios-search-outline'} size={25} color="#fff"/>
/>

 

Supported properties

Properties	Description	Type	Default
type	Type of Button ( default , primary , success , warning , bordered , ghost , rounded , ghost )	String	Default
disabled	Whether the button is disabled	Boolean	False
size	size of button( large small )	string	large
text	Text for the button or a React Element	String | React Element	Null
loading	Whether to show loading icon or not	boolean	false
onClick	On click callback for butto	Function	-
onPressIn	On Press in of button	Function
onPressOut	On Press out callback for butto	Function	-
onShowUnderlay	When underlay is shown	Function
onHideUnderlay	When underlay is hidden	Function
style	Style for the button(Refer detailed styles usage below)	React Native Button Styles	-
textStyle	Style for the text of the button(Refer detailed styles usage below)	React Native Text Styles	-
activeStyle	Style for the feedback when button is pressed. (Refer detailed styles usage below)	React Native ButtonStyles	-
styles	For detailed customization of component's internal styles(Refer detailed styles usage below)	Custom	Object( DetailedStyles ) (Refer the format below)

DetailedStyles Usage

Below is the tree structure of React Native's core elements used in this component's view implementation and how styles property is when this component is rendered. So feel free to customize it if you need to.

<TouchableHighlight style = {[style,activeStyle]}>
    <View style = {styles.container}/>
    <ActivityIndicator style = {styles.indicator}/>
     <Text style = {styles.textStyle}/>
</TouchableHighlight>