Component highly inspired by Button component from react-native-elements. However, it has no external dependencies, so there is no out-of-the-box support for Icon component from react-native-vector-icons

Usage

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

<Button
  title="My button"
  styleName="round"
/>

Predefined styles

Some styles are predefined within the plugin. You can add your in your own theme file. Only thing you need is to extend it through zero.ui.Button key

Usage

const theme = {
    'zero.ui.Button': {
        // my global custom styling and props for Button
        '.myStyle': {
            // custom styling for myStyle class
        },
        defaultProps: {
            // default props for Button component
        }
    }
}

<Button styleName="myStyle" />

List of styles

• flex
• fill
• round

flex

Makes button fill parent flexbox

containerViewStyle: {
  flex: 1,
}

fill

Makes button as wide as the container allows it to be

containerViewStyle: {
  width: '100%',
}

round

Adds borderRadius to button. It also adds borderRadius to all selection modes (highlight, ripple), as well as shadows

rounded: true,
borderRadius: 100,
containerViewStyle: {
  borderRadius: 100,
},
style: {
  borderRadius: 100,
}

Props

All properties are optional

Also, receives all TouchableNativeFeedback (Android) or TouchableOpacity (iOS) props

• Component
• activityIndicatorStyle
• allowFontScaling
• background
• backgroundColor
• borderRadius
• buttonStyle
• containerViewStyle
• color
• disabled
• disabledStyle
• disabledTextStyle
• fontFamily
• fontSize
• fontWeight
• icon
• iconRight
• loading
• loadingRight
• outline
• raised
• rounded
• textEllipsizeMode
• textNumberOfLines
• textStyle
• title
• transparent
• underlayColor

Reference

Component

component for user interaction

activityIndicatorStyle

add additional styling for ActivityIndicator component used for displaying loading state of the button (optional)

allowFontScaling

flag that disables or enables font scaling for the button title

background

prop used for TouchableNativeFeedback

backgroundColor

color used for buttons background.

It is recommended to use this prop for configuring background color instead of doing it through styles

borderRadius

radius used for button border

It is recommended to use this prop instead going through usual styling, because this way shadow and highlight / ripple will be styled as well

buttonStyle

additional styling for button component

color

color used for buttons text and loading indicator.

It is recommended to use this prop for configuring color instead of doing it through styles

containerViewStyle

additional styling for button container component

disabledStyle

additional styling for button component in disabled state

disabledTextStyle

additional styling for button text in disabled state

fontFamily

font family used for button text

It is recommended to use this prop for configuring font family instead of doing it through styles

fontSize

font size used for button text

It is recommended to use this prop for configuring font family instead of doing it through styles

fontWeight

font weight used for button text

It is recommended to use this prop for configuring font weight instead of doing it through styles

icon

component used for displaying icon in button

iconRight

component used for displaying right icon in button

large

flag that determines if button has bigger height and extra padding

loading

prop to display a loading spinner

loadingRight

prop to display a loading spinner on right size

outline

flag that determines if button has any outline

raised

flag that determines if button is displayed as raised (has shadow / elevation)

It is recommended to use this prop for displaying shadow instead of doing it through styles. However, if you need any further customization of the shadow, you need to do it manually

title

button title (optional)

transparent

flag that removes background from button

underlayColor

same prop from TouchableHighlight with overriden default value