UNPKG

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
{ "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"} ] }