English | 中文

Small numerical value or status descriptor for UI elements. It supports the following features:

• pure dot and number within dot two styles
• customize color
• friendly animation

⚠️ NOTE

Badge supports <Badge>{your component}</Badge> and <Badge/> two kinds of usages. When you pass a component as children to Badge (namely the first usage), the red point would be placed at the upper-right corner of your component automatically.

However, as the problem of overflow: visible is not supported on Android was not resolved until react-native@0.57 (change log and commit b81c8b5), Badge would be clipped on Android. Therefore, if your react-native's version is smaller than 0.57, you can use the second usage which renders a red point so that you can place it by yourself.

npm install @rn-components-kit/badge --save

Preview	Code
	Demo1 Code
	Demo2 Code
	Demo3 Code
	Demo4 Code

• style
• dot
• color
• count
• overflowCount
• showZero
• offsetX
• offsetY

Allow you to customize style

Determines whether it is rendered as a dot without number in it

Determines the dot's color

If you specify the count prop, you should set dot prop false as well (they are two exclusive modes). And in this case, this number would be rendered at the center of dot

Max count to show. If count is greater than overflowCount, it will be displayed as ${overflowCount}+

Determines whether it should be shown when count is 0

If you are not satisfied with the dot's position (upper-right corner), you can adjust it through offsetX/offsetY

If you are not satisfied with the dot's position (upper-right corner), you can adjust it through offsetX/offsetY