Badge
Badges are used as a small numerical value or status descriptor for UI elements.
import { Badge } from '@redshank/native';
Examples
Default
Badge with default styles, used in standalone when content prop is empty.
Sizes
Badge with different sizes.
Dot variant
Badge with dot Variant.
Bordered
Bordered badge.
Flat / Pressable
Badge flat variant and pressable element.
Square
Badge square type.
Solid Bordered
Badge with solid Bordered.
With children
Badge with children element.
Placement
Badge with different placement positions.
Enable Shadow
Badge with shadow enable.
Toggle Badge
Badge control visibility.
APIs
Badge Props
Api props extends from View or Touchable Opacity
| Attribute | Type | Accepted values | Description | Default |
|---|---|---|---|---|
| background | ThemeColor string | ThemeColor | Change background color | border |
| bold | boolean | true false | Text bold in the badge | true |
| children | StyleProp<any> | object | Accessory as a child for the component | - |
| childrenStyle | string ReactNode | any | Style for children wrapper | - |
| color | ThemeColor string | ThemeColor | Change icon color | primrary |
| content | number string | Number Text | Number or text for show in badge | - |
| disableOutline | boolean | true false | Disable outline border to badge | false |
| enableShadow | boolean | true false | Enable shadow badge effect | false |
| isInvisible | boolean | true false | Hidden or Show badge | - |
| isPressable | boolean | true false | Pressable effect animation | false |
| placement | Placement | Placement | The position of the badge | top-right |
| size | SizeType | SizeType | Size element for show | small or middle |
| style | object | StyleProp<ViewStyle> | Style for bbadge | - |
| type | BadgeType | BadgeType | Badge shape type | rounded |
| variant | BadgeVariant | BadgeVariant | Variant to show badge | default |
| wrapperStyle | object | StyleProp<ViewStyle> | Style for wrapper component | - |
| Other Props | any | Other props | Interactive props for element | - |
Base Properties
type BaseProperties = {
onBlur?: ((e: NativeSyntheticEvent<TargetedEvent>) => void) | undefined;
onFocus?: ((e: NativeSyntheticEvent<TargetedEvent>) => void) | undefined;
onLayout?: ((event: LayoutChangeEvent) => void) | undefined;
onLongPress?: ((event: GestureResponderEvent) => void) | undefined;
onPress?: ((event: GestureResponderEvent) => void) | undefined;
onPressIn?: ((event: GestureResponderEvent) => void) | undefined;
onPressOut?: ((event: GestureResponderEvent) => void) | undefined;
};
Placement Type
type PlacementType = | 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
Size Type
type SizeType = 'small' | 'middle' | 'large';
Badge Type
type BadgeType = 'rounded' | 'square'
Badge Variant
type BadgeVariant = 'default' | 'flat' | 'dot' | 'bordered';
Community:
We're excited to see the community adopt @redshank/native, raise issues, and provide feedback. Whether it's a feature request, bug report, or a project to showcase, please get involved!
DiscordGithubContributing:
PR's on @redshank/native are always welcome, please see our contribution guidelines to learn how you can contribute to this project.