This is documentation for the next SDK version. For up-to-date documentation, see the latest version (SDK 55).

For the complete documentation index, see llms.txt. Use this file to discover all available pages.

Expo UI Badge matches the official Jetpack Compose Badge API. It renders as a small colored indicator dot, or with content such as a count number.

Installation

If you are installing this in an existing React Native app, make sure to install expo in your project.

Usage

Indicator dot

A badge with no children renders as a small dot indicator.

import { Host, Badge } from '@expo/ui/jetpack-compose';

export default function BadgeDot() {
  return (
    <Host matchContents>
      <Badge />
    </Host>
  );
}

Badge with count

Pass a Text child to display a number or label.

import { Host, Badge, Text } from '@expo/ui/jetpack-compose';

export default function BadgeCount() {
  return (
    <Host matchContents>
      <Badge containerColor="#EF5350" contentColor="#FFFFFF">
        <Text>3</Text>
      </Badge>
    </Host>
  );
}

API

import { Badge } from '@expo/ui/jetpack-compose';

Component