Logo

Badge

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

Usage

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

const MyComponent = () => (
  <Badge>3</Badge>
);

export default MyComponent;

Props

visible
Type: boolean
Default value: true

Whether the badge is visible

children
Type: string | number

Content of the Badge.

size
Type: number
Default value: 20

Size of the Badge.

style
Type: StyleProp<TextStyle>
ref
Type: React.RefObject<typeof Animated.Text>
theme
Type: ReactNativePaper.Theme
Edit this page