@flexnative/badges

A set of highly customizable, themeable, and performant badge components for React Native applications. Part of the Flexnative UI ecosystem, these components are designed to provide clear visual indicators for status, counts, or categories.

Installation

Install the package via npm or yarn:

npm install @flexnative/badges @flexnative/theme-context

or

yarn add @flexnative/badges @flexnative/theme-context

Usage

Wrap your application with the ThemeProvider and start using the Badge component.

import React from 'react';
import { View } from 'react-native';
import { Badge } from '@flexnative/badges';
import { ThemeProvider } from '@flexnative/theme-context';

const App = () => {
  return (
    <ThemeProvider>
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', gap: 20 }}>
        <Badge label="New" type="primary" position="top-right">
          <View style={{ width: 50, height: 50, backgroundColor: '#eee', justifyContent: 'center', alignItems: 'center' }}>
            <Text>Item</Text>
          </View>
        </Badge>

        <Badge label={3} type="info" position="bottom-left" radius="sm">
          <View style={{ width: 60, height: 60, backgroundColor: '#ddd', justifyContent: 'center', alignItems: 'center' }}>
            <Text>Cart</Text>
          </View>
        </Badge>
      </View>
    </ThemeProvider>
  );
};

export default App;

Properties

:::info BadgedProps props extends TextProps so any TextProps properties are also applicable in BadgedProps :::

| Prop | Type | Required | Default | Description | | :--- | :--- | :------- | :------ | :---------- | | text | string | ✅ | undefined | The text content to be displayed within the badge. | | textColor | ColorValue | 🔲 | undefined | Custom styles for the badge label text. | | children | React.ReactNode | 🔲 | The content that the badge will be positioned relative to. The badge will appear on top of this content. | | borderWidth | BorderWidth | 🔲 | none | Optional border width for the badge. | | position | BadgePosition | 🔲 | top-right | Specifies the corner where the badge will be positioned relative to its children. | | borderColor | ColorValue | 🔲 | undefined | BCustom border color for the badge. | | size | FontSize | md | 🔲 | Badged Size variable. | | radius | BorderRadius | 🔲 |full | Badged Size variable. | | color | ColorValue | 🔲 | error | Color by theme or a custom color. |

BadgePosition Type

BadgePosition is a type that defines predefined positions for the badge when it's used with children.

| Value | Description | | :---- | :---------- | | 'top-left' | Positions the badge at the top-left corner (e.g., { top: -10, left: -10 }). | | 'top-right' | Positions the badge at the top-right corner (e.g., { top: -10, right: -10 }). | | 'bottom-left' | Positions the badge at the bottom-left corner (e.g., { bottom: -10, left: -10 }). | | 'bottom-right' | Positions the badge at the bottom-right corner (e.g., { bottom: -10, right: -10 }). |

License

Licensed under the MIT License.

Built with ❤️ for the Flexnative ecosystem.