0.0.3 • Published 6 years ago
react-native-statuslabel v0.0.3
react-native-statuslabel
A simple status label control.
Installation
React Native >= 0.49
yarn add react-native-statuslabelAttributes
| 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')}
/>