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>