I have been using the ui kit for a while. It has very good features, but it also has a lot of shortcomings. One of these the Badge component. That’s why I prepared a simple but functional component. You can use the code below until you see the Badge component in the official library.
Create badge component
// badge.js
import React from "react";
import { View } from "react-native";
import { Text, styled } from "@ui-kitten/components";
import styles from "./badge.style";
@styled("Badge")
class Badge extends React.Component {
rendeBadgeComponent = () => {
const { eva, style, count, children, …restProps } = this.props;
switch (typeof count) {
case "number":
case "string":
return (
<View style={[eva.style, styles.badge, style]} {…restProps}>
<Text
style={{
color: eva.style.textColor,
fontSize: eva.style.textFontSize,
fontWeight: eva.style.textFontWeight,
}}
>
{this.props.count}
</Text>
</View>
);
case "function":
return count();
}
};
render() {
const { children } = this.props;
return (
<View style={styles.badgeContainer}>
<View style={children ? styles.badgeContainerAbsolute : null}>
{this.rendeBadgeComponent()}
</View>
{children}
</View>
);
}
}
Add badge styles
// badge.style.js
import { StyleSheet } from "react-native";
export default StyleSheet.create({
badgeContainer: {
position: "relative",
},
badgeContainerAbsolute: {
position: "absolute",
zIndex: 1,
right: 0,
top: 0,
transform: [{ translateX: "5%" }, { translateY: "-5%" }],
},
badge: {
alignItems: "center",
justifyContent: "center",
},
});
Add mapping to mapping.json
// mapping.json
{
"Badge": {
"meta": {
"scope": "all",
"parameters": {
"height": {
"type": "number"
},
"paddingHorizontal": {
"type": "number"
},
"textColor": {
"type": "string"
},
"textFontSize": {
"type": "number"
},
"textFontWeight": {
"type": "string"
},
"textFontFamily": {
"type": "string"
},
"borderRadius": {
"type": "number"
},
"borderColor": {
"type": "string"
},
"borderWidth": {
"type": "number"
},
"backgroundColor": {
"type": "string"
}
},
"appearances": {
"filled": {
"default": true
},
"outline": {
"default": false
}
},
"variantGroups": {
"status": {
"primary": {
"default": true
},
"success": {
"default": false
},
"info": {
"default": false
},
"warning": {
"default": false
},
"danger": {
"default": false
}
},
"size": {
"small": {
"default": false
},
"medium": {
"default": true
},
"large": {
"default": false
}
}
},
"states": {
"active": {
"default": false,
"priority": 2,
"scope": "all"
}
}
},
"appearances": {
"filled": {
"mapping": {
"borderRadius": "border-radius-full",
"textFontFamily": "$text-font-family"
},
"variantGroups": {
"status": {
"primary": {
"borderColor": "color-primary-default-border",
"backgroundColor": "color-primary-default",
"textColor": "text-control-color"
},
"success": {
"borderColor": "color-success-default-border",
"backgroundColor": "color-success-default",
"textColor": "text-control-color"
},
"info": {
"borderColor": "color-info-default-border",
"backgroundColor": "color-info-default",
"textColor": "text-control-color"
},
"warning": {
"borderColor": "color-warning-default-border",
"backgroundColor": "color-warning-default",
"textColor": "text-control-color"
},
"danger": {
"borderColor": "color-danger-default-border",
"backgroundColor": "color-danger-default",
"textColor": "text-control-color"
}
},
"size": {
"small": {
"height": 15,
"paddingHorizontal": 4,
"borderWidth": "border-width",
"textFontSize": 10,
"textFontWeight": "text-caption-1-font-weight"
},
"medium": {
"height": 20,
"paddingHorizontal": 6,
"borderWidth": "border-width",
"textFontSize": 12,
"textFontWeight": "bold"
},
"large": {
"height": 25,
"paddingHorizontal": 8,
"borderWidth": "border-width",
"textFontSize": 14,
"textFontWeight": "bold"
}
}
}
},
"outline": {
"variantGroups": {
"status": {
"primary": {
"borderColor": "color-primary-default-border",
"backgroundColor": "transparent",
"textColor": "color-primary-default"
},
"success": {
"borderColor": "color-success-default-border",
"backgroundColor": "transparent",
"textColor": "color-success-default"
},
"info": {
"borderColor": "color-info-default-border",
"backgroundColor": "transparent",
"textColor": "color-info-default"
},
"warning": {
"borderColor": "color-warning-default-border",
"backgroundColor": "transparent",
"textColor": "color-warning-default"
},
"danger": {
"borderColor": "color-danger-default-border",
"backgroundColor": "transparent",
"textColor": "color-danger-default"
}
}
}
}
}
}
}
Usage
<Badge count={1} appearance=”filled” status=”danger” size=”medium” />
//or
<Badge count={1} appearance=”filled” status=”danger” size=”medium”>
<CustomComponent />
</Badge>
//or
<Badge count={() => <CustomIcon />} />Optional. If you want to show badge props on code editor then create badge.d.ts
// badge.d.ts
import React from ‘react’;
export interface BadgeProps {
count: any;
status: ‘primary’ | ‘success’ | ‘danger’ | ‘warning’ | ‘info’ | string;
appearance: ‘filled’ | ‘outline’ | string;
size: ‘small’ | ‘medium’ | ‘large’ | string;
}
export default class Badge extends React.Component<BadgeProps> {}
