be-button

---

title: Button description: How to add interactive quizzes to your site.

Button

An advance button component that should render nicely on any platform. Supports a great level of customization.

Installation

Since the library is a JS-based solution, to install the latest version of be-button you only need to run:

npm install --save be-button

or

yarn add be-button

Examples

Basic :

import Button from "be-button";
---
<Button onPress={() => console.log("Button Pressed")}>
    Learn More
</Button>

Outline :

import Button from "be-button";
---
<Button outline onPress={() => console.log("Button Pressed")}>
    Learn More
</Button>

advance :

import Button from "be-button";
---
 <Button
    color="error"
    textColor="black"
    textStyle={ { fontSize: 30 } }
    containerStyle={ { padding: 60, borderStyle: "dashed" } }
    borderColor="#666"
    borderWidth={6}
    radius={25}
    opacity={0.5}
    textTransform="uppercase"
    onPress={() => console.log("Button Pressed")}
    >
    Learn More
</Button>

With Icon :

import Button from "be-button";
import Icon, { RegularIcons } from "be-icon";
---
<Button
    icon={<Icon icon={RegularIcons.smileWink} style={ { paddingRight: 10 } } />}
    color="transparent"
    containerStyle={ {  width: "100%", height: 100 } }
    borderColor="primary"
    borderWidth={1}
    textColor="primary"
    onPress={() => console.log("Button Pressed")}
    >
    NICE !!
</Button>

loading :

import Button from "be-button";
---
<Button
    loading
    loadingColor="error"
    loadingSize="large"
    color="transparent"
    containerStyle={ { borderStyle: "dashed" } }
    borderColor="error"
    borderWidth={1}
    radius={40}
    onPress={() => console.log("Button Pressed")}
/>

Custom Content :

import Button from "be-button";
import { Image } from "react-native";
---
<Button
    color="transparent"
    containerStyle={ { width: 100, height: 100 } }
    borderColor="#ff9900"
    borderWidth={1}
    onPress={() => console.log("Button Pressed")}
    >
    <Image style={ { width: 50, height: 50 } } source={ { uri: "https://i.imgur.com/Ksp1jHy.png" } } />
</Button>

TouchableHighlight :

import Button from "be-button";
import { Image } from "react-native";
---
<Button
    type="TouchableHighlight"
    opacity={1}
    onShowUnderlay={() =>
    <Image style={ { width: 50, height: 50 } } source={ { uri: "https://i.imgur.com/dNSN9D7.png" } } />}
    underlayStyle={ { width: 105, height: 105 } }
    containerStyle={ { width: 100, height: 100 } }
    borderColor="#ff9900"
    underlayColor="success"
    borderWidth={1}
    onPress={() => console.log("Button Pressed")}
    >
    <Image style={ { width: 50, height: 50 } } source={ { uri: "https://i.imgur.com/LgkZkOG.png" } } />
</Button>

Unpressed	Pressed

Props

• onPress
• type
• containerStyle
• color
• textColor
• textTransform
• textStyle
• borderColor
• borderWidth
• radius
• disabled
• shadow
• outline
• opacity
• loading
• loadingColor
• loadingSize
• underlayColor
• underlayStyle

---

Reference

onPress

Handler to be called when the user taps the button

Type	Required
function	Yes

type

TouchableOpacity selected by default, so when press Button down, the opacity of the wrapped view is decreased, dimming it. if you want to change the background color or even the entire component when you press the button down then you need to change the type to TouchableHighlight

Type	Required	Default
TouchableOpacity,TouchableHighlight	No	TouchableOpacity

containerStyle

override button container style for example if you want to change width,height,padding,....

Type	Required
style	No

color

Background color of the button

Type	Required	Default
be-color	No	primary

textColor

Text color of the button ( only if the children is string)

Type	Required	Default
be-color	No	white in default case, primary in outline mode

textTransform

set Text Transform ( only if the children is string)

Type	Required	Default
'lowercase', 'uppercase','capitalize'	No	Not Set

textStyle

override button text style for example if you want to change fontSize,... ( only if the children is string)

Type	Required
style	No

borderColor

border color of the button , will active if the borderWidth prop great than 0 or the button outline prop set to true

Type	Required	Default
be-color	No	primary

borderWidth

border width of the button you can change border style using containerStyle prop

Type	Required	Default
Number	No	BETheme.SIZES.BORDER_WIDTH

radius

Button border radius of the button to make it circle you need to set width = height & radius = button width / 2

Type	Required	Default
Number	No	BETheme.SIZES.BORDER_RADIUS

disabled

If true, disable all interactions for this component.

Type	Required	Default
bool	No	false

shadow

If true, show shadow effect for this component.

Type	Required	Default
bool	No	false

outline

If true make an outline button,by set the default text color to primary set background color to transparent and finally set border width to 1, you can ovveride these styles.

Type	Required	Default
bool	No	false

opacity

Determines what the opacity of the Button should be when touch is active.

Type	Required	Default
Number	No	BETheme.SIZES.OPACITY

loading

If true we show react native activity indicator instead of the button content.

Type	Required	Default
bool	No	false

loadingColor

set Loading indicator color , will active if loading prop set to true

Type	Required	Default
be-color	No	primary

loadingSize

Size of the indicator (default is 'small'). Passing a number to the size prop is only supported on Android.

Type	Required	Default
enum('small', 'large'),number	No	small

underlayColor

Background color of the button when pressed , only if the button type is TouchableHighlight

Type	Required	Default
be-color	No	primary

underlayStyle

override button container style when pressed this will keep the container styles and push the new style , only if the button type is TouchableHighlight

Type	Required
style	No