# rn-notifications-panel
URL: /docs/native/docyrus/notifications-panel

Notification list panel with underline tabs, icon badges, pill action buttons and a customizable header and footer.

## Installation

```bash
pnpm dlx @docyrus/cli add @docyrus/rn-notifications-panel
```

**Dependencies:**
- [react-native-svg](https://www.npmjs.com/package/react-native-svg)
- [tailwind-variants](https://www.npmjs.com/package/tailwind-variants)

## Usage

```tsx
import { NotificationsPanel } from '@/components/docyrus-native/notifications-panel';
import type { NotificationItem } from '@/components/docyrus-native/notifications-panel';

const notifications: NotificationItem[] = [
  {
    id: '1',
    type: 'comment',
    icon: 'fal comment',          // DocyrusIcon string, a node, or short text / emoji
    badge: 3,                     // overlay on the icon circle
    title: 'New comment on your post',
    subtitle: 'John left a comment',
    timestamp: '2m ago',
  },
  {
    id: '2',
    type: 'approval',
    variant: 'unread',
    title: 'Approval requested',
    content: .,
    showUnreadIndicator: true,
    actions: [
      { label: 'Approve', variant: 'primary', icon: 'fal check' },
      { label: 'Reject', variant: 'danger' },
      { label: 'Open', variant: 'link' },
    ],
  },
];