Badges are small status descriptors for UI elements. A badge consists of a small circle, typically containing a number or other short set of characters, that appears in proximity to another object.

Badge with content
Badge without content


import * as React from 'react';
import { Badge } from 'react-native-paper';

const MyComponent = () => (

export default MyComponent;


Type: boolean
Default value: true

Whether the badge is visible

Type: string | number

Content of the Badge.

Type: number
Default value: 20

Size of the Badge.

Type: React.RefObject<typeof Animated.Text>
Type: ThemeProp
Edit this page