react-native-ui-lib
Version:
<p align="center"> <img src="https://user-images.githubusercontent.com/1780255/105469025-56759000-5ca0-11eb-993d-3568c1fd54f4.png" height="250px" style="display:block"/> </p> <p align="center">UI Toolset & Components Library for React Native</p> <p a
44 lines (43 loc) • 2.62 kB
JSON
{
"name": "Badge",
"category": "basic",
"description": "Round colored badge, typically used to show a number",
"extends": ["TouchableOpacity", "View"],
"extendsLink": [
"https://github.com/wix/react-native-ui-lib/blob/master/src/components/touchableOpacity/index.tsx",
"https://github.com/wix/react-native-ui-lib/blob/master/src/components/view/index.tsx"
],
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/BadgesScreen.tsx",
"images": ["https://user-images.githubusercontent.com/33805983/34480753-df7a868a-efb6-11e7-9072-80f5c110a4f3.png"],
"props": [
{"name": "size", "type": "number", "description": "Badge's size"},
{
"name": "label",
"type": "string",
"description": "Text to show inside the badge",
"note": "Passing a label (undefined) will present a pimple badge"
},
{"name": "labelStyle", "type": "TextStyle", "description": "Additional styles for the badge label"},
{"name": "onPress", "type": "(props: any) => void", "description": "Called when the badge is pressed"},
{
"name": "hitSlop",
"type": "ViewProps['hitSlop']",
"description": "Defines how far a touch event can start away from the badge"
},
{"name": "backgroundColor", "type": "string", "description": "Background color"},
{"name": "borderWidth", "type": "number", "description": "Width of border around the badge"},
{"name": "borderRadius", "type": "number", "description": "Radius of border around the badge"},
{"name": "borderColor", "type": "ImageStyle['borderColor']", "description": "Color of border around the badge"},
{
"name": "labelFormatterLimit",
"type": "LabelFormatterValues",
"description": "Receives a number from 1 to 4, representing the label's max digit length",
"note": "Beyond the max number for that digit length, a '+' will show at the end. \nIf set to a value not included in LABEL_FORMATTER_VALUES, no formatting will occur. \nExample: labelLengthFormatter={2}, label={124}, label will present '99+'"
},
{"name": "icon", "type": "ImageSourcePropType", "description": "Renders an icon badge"},
{"name": "iconStyle", "type": "ImageStyle", "description": "Additional styling to badge icon"},
{"name": "iconProps", "type": "ImageProps", "description": "Additional props passed to icon"},
{"name": "customElement", "type": "JSX.Element", "description": "Custom element to render instead of an icon"},
{"name": "containerStyle", "type": "ViewStyle", "description": "Additional styles for the top container"}
]
}