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

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