react-native-statuslabel

A simple status label control.

Installation

React Native >= 0.49

yarn add react-native-statuslabel

Attributes

| Prop | Description | Default | |---|---|---| |string backgroundColor|Specifies the background color of the component|transparent| |string borderColor|Specifies the border color of the component|#828186| |number borderWidth|Specifies the border width of the component|1| |number borderRadius|Specifies the border radius of the component|3| |number contentPadding|The text inside the box|5 |string textColor|The text color|#ffffff| |string fontFamily|The font family|undefined| |string fontSize|The font size|undefined| |string fontWeight|The font weight|bold| |string label|The text of the label|required| |object style|A standard style object, refer below for more information|undefined| |string theme|One of the following theme strings: red, yellow, blue or green|undefined| |boolean upperCase|Transform label text to uppercase|true|

Events

| Prop | Description | |---|---| |onPress|Executed when the user touches the status label|

Examples

Import the component:

import StatusLabel from 'react-native-statuslabel';

Simple Options

<StatusLabel
    label={'Label Text'}
/>

Theme Styles

<StatusLabel
	theme={'red'}
	label={'Red Label'}
    onPress={() => console.log('pressed')}
/>

<StatusLabel
	theme={'blue'}
	label={'Blue Label'}
    onPress={() => console.log('pressed')}
/>

<StatusLabel
	theme={'yellow'}
	label={'Yellow Label'}
    onPress={() => console.log('pressed')}
/>

<StatusLabel
	theme={'green'}
	label={'Green Label'}
    onPress={() => console.log('pressed')}
/>