Buttons

Buttons allow users to take actions, and make choices, with a single tap. Button is basicly a Touchable component I customized

buttons

<Button/> have three behaviour :

TouchableOpacity
TouchableHighlight
TouchableWithoutFeedback

Usage#

Simple Usage#

The default behaviour of Button is TouchableOpacity

buttonSimple

If the parent component of the button have flexDirection:'column' the button width will have follow the parent component

import { Button } from 'react-native-rapi-ui';

<Button text="Tap me" onPress={() => console.log('Button tapped')} />;

Button Color Status#

buttonStatus

import { Button } from 'react-native-rapi-ui';

<Button text="Primary" status="primary" />
<Button text="Success" status="success" />
<Button text="Info" status="info" />
<Button text="Warning" status="warning" />
<Button text="Danger" status="danger" />

Outline Button#

outlineButton

import { Button } from 'react-native-rapi-ui';

<Button text="Primary" status="primary" outline/>
<Button text="Success" status="success" outline/>
<Button text="Info" status="info" outline/>
<Button text="Warning" status="warning" outline/>
<Button text="Danger" status="danger" outline/>

Button Size#

buttonSize

import { Button } from 'react-native-rapi-ui';

<Button text="Large lg" size="lg" />
<Button text="Medium md" size="md" />
<Button text="Small sm" size="sm" />

With Left or Right Content#

You can fill the left or right side of the text with components. ex:Icons or Image buttonContent

import { Button } from 'react-native-rapi-ui';
import { Ionicons } from '@expo/vector-icons';

// Left Content

<Button
    text="Continue with twitter"
    leftContent={
        <Ionicons name="logo-twitter" size={20} color={theme.white} />
    }
    status="primary"
    type="TouchableOpacity"
/>

// Right Content

<Button
    text="Continue"
    rightContent={
        <Ionicons
            name="arrow-forward"
            size={20}
            color={theme.white}
        />
    }
    status="primary"
    type="TouchableOpacity"
/>

Properties#

props	required	value	Default Value
TouchableWithoutFeedbackProps
type The Touchable behaviour	No	`TouchableOpacity` `TouchableHighlight` `TouchableWithoutFeedback`	`TouchableOpacity`
text	No	`string`	`null`
color The primary color of the button	No	`string`	#3366FF
inverseColor The secondary color of the button	No	`string`	#FFFFFF
status You can set the color button from this prop	No	`primary` `success` `warning` `info` `danger`
outline	No	`boolean`	`false`
outlineWidth	No	`number`	2
leftContent	No	`React.Node`
rightContent	No	`React.Node`
size	No	`lg` `md` `sm`	`lg`
disabled	No	`boolean`	`false`
width	No	`number` If the parent component have `flexDirection:'row'` the width of the button will follow the text
textStyle	No	TextStyle
style	No	ViewStyle