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>

Published On June 6, 2020 6:16 PM

Last Updated October 9, 2020 6:54 AM