React Native Badges

BadgeStack is a customizable React Native component that allows you to stack multiple badges in any corner of a child view. It supports animation and styling options.

✨ Features

• Display multiple badges in a corner of any wrapped component.
• Customize badge colors and text colors.
• Optional fade-in animation.
• Supports positioning in all four corners.

📦 Installation

Copy the BadgeStack.tsx component into your project. It uses only built-in React Native libraries and requires no external dependencies.

🔧 Props

| Prop | Type | Default | Description | |--------------|------------------|-------------|-------------| | badges | Badge[] | Required| Array of badge objects (label, color, labelColor) | | position | 'top-right' \| 'top-left' \| 'bottom-right' \| 'bottom-left' | 'top-right' | Corner in which badges should appear | | animate | boolean | false | Whether badges should fade in | | badgeStyle | ViewStyle | undefined | Style override for badge container | | textStyle | TextStyle | undefined | Style override for badge text | | children | ReactNode | Required| Child component to wrap |

🧩 Badge Type

type Badge = {
  label: string;
  color?: string;       // Background color of badge
  labelColor?: string;  // Text color of badge
};

🚀 Usage

import React from 'react';
import { View, Text } from 'react-native';
import BadgeStack from './BadgeStack';

const MyComponent = () => {
  const badges = [
    { label: 'New', color: '#28a745' },
    { label: 'Hot', color: '#dc3545', labelColor: '#fff' },
  ];

  return (
    <BadgeStack badges={badges} position="top-left" animate>
      <View style={{ width: 100, height: 100, backgroundColor: '#ddd' }}>
        <Text>Content</Text>
      </View>
    </BadgeStack>
  );
};

export default MyComponent;

🖌️ Customization

You can customize the badges by using the badgeStyle and textStyle props to override padding, font size, border radius, etc.

🎬 Animation

When the animate prop is set to true, each badge fades into view using Animated.View.

📄 License

This component is open for modification and use in any React Native project. No specific license is applied. Add your own if needed.