> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-llms-scoped-indexes.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Notification Feed

> Full-screen notification feed component with category filtering, card rendering, real-time updates, and engagement reporting.

<Accordion title="AI Integration Quick Reference">
  | Field | Value |
  | - | - |
  | Component | `CometChatNotificationFeed` |
  | Package | `@cometchat/chat-uikit-react-native` |
  | Import | `import { CometChatNotificationFeed } from "@cometchat/chat-uikit-react-native";` |
  | Purpose | Full-screen notification feed with category filtering, timestamp grouping, card rendering via @cometchat/cards-react-native, real-time updates, and automatic engagement reporting. |
  | Data props | `title` · `scrollToItemId` · `notificationFeedRequestBuilder` · `notificationCategoriesRequestBuilder` |
  | Primary output | `onItemClick(notification)` — opens the notification target |
  | Other actions | `onActionClick` · `onError` · `onBackPress` — [details](#actions-and-events) |
  | View slots | `HeaderView` · `EmptyView` · `ErrorView` · `LoadingView` — [details](#custom-view-slots) |
  | Styling | `style` prop — [tokens and overrides](#styling) |
  | Prerequisites | `CometChatUIKit.init()` completed and a user logged in |
  | Full props | See [Props](#props) |
</Accordion>

`CometChatNotificationFeed` displays a scrollable notification feed where each item is rendered as a native card using the CometChat Cards library. It handles fetching, pagination, category filtering, timestamp grouping, real-time updates, and read/delivered/engagement reporting automatically.

***

## Where It Fits

`CometChatNotificationFeed` is a full-screen component. Drop it into a screen or navigation destination. It manages its own data fetching, state, and real-time listeners — you just handle navigation callbacks.

```tsx lines theme={null}
import { CometChatNotificationFeed } from "@cometchat/chat-uikit-react-native";

function NotificationsScreen({ navigation }) {
  return (
    <CometChatNotificationFeed
      showBackButton={true}
      onBackPress={() => navigation.goBack()}
      onItemClick={(item) => {
        // Handle item tap (e.g., open detail or deep link)
      }}
    />
  );
}
```

***

## Minimal Render

```tsx lines theme={null}
import { CometChatNotificationFeed } from "@cometchat/chat-uikit-react-native";

function NotificationsDemo() {
  return <CometChatNotificationFeed />;
}

export default NotificationsDemo;
```

Prerequisites: CometChat SDK initialized with `CometChatUIKit.init()` and a user logged in.

***

## Filtering Feed Items

Control what loads using custom request builders:

```tsx lines theme={null}
import { CometChatNotificationFeed } from "@cometchat/chat-uikit-react-native";
import { CometChat } from "@cometchat/chat-sdk-react-native";

function UnreadNotifications() {
  return (
    <CometChatNotificationFeed
      notificationFeedRequestBuilder={
        new CometChat.NotificationFeedRequestBuilder()
          .setLimit(30)
          .setReadState(CometChat.FeedReadState.UNREAD)
          .setCategory("promotions")
          .build()
      }
    />
  );
}
```

### Filter Options

| Builder Method | Description |
| - | - |
| `.setLimit(number)` | Items per page (default 20, max 100) |
| `.setReadState(FeedReadState)` | `READ`, `UNREAD`, or `ALL` |
| `.setCategory(string)` | Filter by category label |
| `.setChannelId(string)` | Filter by channel |
| `.setTags(string[])` | Filter by tags |
| `.setDateFrom(string)` | ISO 8601 date lower bound |
| `.setDateTo(string)` | ISO 8601 date upper bound |

***

## Actions and Events

### Callback Props

#### onItemClick

Fires when a feed item card is tapped.

```tsx lines theme={null}
<CometChatNotificationFeed
  onItemClick={(item) => {
    console.log("Item tapped:", item.getId());
  }}
/>
```

#### onActionClick

Fires when an interactive element (button, link) inside a card is tapped.

```tsx lines theme={null}
<CometChatNotificationFeed
  onActionClick={(item, action) => {
    const { type, params, elementId } = action;
    switch (type) {
      case "openUrl":
        // Open params.url in browser
        break;
      case "chatWithUser":
        // Navigate to chat with params.uid
        break;
    }
  }}
/>
```

#### onError

Fires when an internal error occurs (network failure, SDK exception).

```tsx lines theme={null}
<CometChatNotificationFeed
  onError={(error) => {
    console.error("Feed error:", error.message);
  }}
/>
```

#### onBackPress

Fires when the back button in the header is tapped.

```tsx lines theme={null}
<CometChatNotificationFeed
  showBackButton={true}
  onBackPress={() => navigation.goBack()}
/>
```

### Automatic Behaviors

The component handles these automatically — no manual setup needed:

| Behavior | Description |
| - | - |
| Real-time updates | New items appear at the top via WebSocket listener |
| Delivery reporting | Items are reported as delivered when fetched |
| Read reporting | Items are reported as read when visible in viewport |
| Unread count polling | Polls unread count every 30 seconds to update badges |
| Infinite scroll | Fetches next page when scrolling near the bottom |
| Pull-to-refresh | Resets and fetches fresh data on pull |
| Timestamp grouping | Groups items as "Today", "Yesterday", day name, or date |
| Category filtering | Filter chips row for category-based filtering |

***

## Custom View Slots

### HeaderView

Replace the entire header:

```tsx lines theme={null}
<CometChatNotificationFeed
  HeaderView={() => (
    <View style={{ padding: 16, flexDirection: "row", alignItems: "center" }}>
      <Text style={{ fontSize: 20, fontWeight: "bold" }}>My Notifications</Text>
    </View>
  )}
/>
```

### State Views

```tsx lines theme={null}
<CometChatNotificationFeed
  EmptyView={() => (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Text>No notifications yet</Text>
    </View>
  )}
  ErrorView={() => (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Text>Something went wrong</Text>
    </View>
  )}
  LoadingView={() => (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <ActivityIndicator size="large" />
    </View>
  )}
/>
```

***

## Styling

The component uses the theme system from `CometChatThemeProvider`. Pass a `style` prop to customize the appearance.

```tsx lines theme={null}
import { CometChatNotificationFeed } from "@cometchat/chat-uikit-react-native";

function StyledNotifications() {
  return (
    <CometChatNotificationFeed
      style={{
        containerStyle: { backgroundColor: "#F5F5F5" },
        chipActiveStyle: {
          containerStyle: { backgroundColor: "#6852D6" },
          textStyle: { color: "#FFFFFF" },
        },
        chipInactiveStyle: {
          containerStyle: { backgroundColor: "#FFFFFF", borderColor: "#E0E0E0" },
          textStyle: { color: "#727272" },
        },
        cardContainerStyle: { backgroundColor: "#FFFFFF" },
        cardBorderColor: "#E0E0E0",
        unreadIndicatorColor: "#6852D6",
      }}
    />
  );
}
```

### Style Properties

| Property | Description |
| - | - |
| `containerStyle` | Root container style |
| `headerContainerStyle` | Header bar style |
| `titleStyle` | Header title text style |
| `chipActiveStyle` | Selected filter chip (containerStyle + textStyle) |
| `chipInactiveStyle` | Unselected filter chip (containerStyle + textStyle) |
| `chipBadgeStyle` | Active chip badge (containerStyle + textStyle) |
| `chipInactiveBadgeStyle` | Inactive chip badge (containerStyle + textStyle) |
| `sectionHeaderStyle` | Timestamp section header (containerStyle + textStyle) |
| `itemHeaderStyle` | Per-item header (containerStyle + categoryTextStyle + timestampTextStyle) |
| `cardContainerStyle` | Card container style |
| `cardBorderColor` | Card border color |
| `cardBorderRadius` | Card corner radius |
| `cardBorderWidth` | Card border width |
| `unreadIndicatorStyle` | Unread dot style |
| `unreadIndicatorColor` | Unread dot color |
| `emptyStateStyle` | Empty state (containerStyle + titleStyle + subTitleStyle) |
| `errorStateStyle` | Error state (containerStyle + titleStyle + subTitleStyle) |
| `separatorStyle` | Separator between cards |

***

## Props

All props are optional.

### cardThemeMode

Theme mode for the card renderer.

| | |
| - | - |
| Type | `"auto" \| "light" \| "dark"` |
| Default | `"auto"` |

***

### cardThemeOverride

Custom theme override for the card renderer.

| | |
| - | - |
| Type | `CometChatCardThemeOverride` |
| Default | `undefined` |

***

### EmptyView

Custom component displayed when there are no notifications.

| | |
| - | - |
| Type | `() => JSX.Element` |
| Default | Built-in empty state |

***

### ErrorView

Custom component displayed when an error occurs.

| | |
| - | - |
| Type | `() => JSX.Element` |
| Default | Built-in error state |

***

### HeaderView

Custom component replacing the entire header.

| | |
| - | - |
| Type | `() => JSX.Element` |
| Default | Built-in header |

***

### LoadingView

Custom component displayed during the loading state.

| | |
| - | - |
| Type | `() => JSX.Element` |
| Default | Built-in loading indicator |

***

### notificationCategoriesRequestBuilder

Custom request builder for fetching categories.

| | |
| - | - |
| Type | `NotificationCategoriesRequestBuilder` |
| Default | SDK default (50 per page) |

***

### notificationFeedRequestBuilder

Custom request builder for fetching feed items.

| | |
| - | - |
| Type | `NotificationFeedRequestBuilder` |
| Default | SDK default (20 per page) |

***

### onActionClick

Callback fired when an interactive element inside a card is tapped.

| | |
| - | - |
| Type | `(feedItem: NotificationFeedItem, action: { type: string, params: object, elementId: string }) => void` |
| Default | `undefined` |

***

### onBackPress

Callback fired when the back button is pressed.

| | |
| - | - |
| Type | `() => void` |
| Default | `undefined` |

***

### onError

Callback fired when the component encounters an error.

| | |
| - | - |
| Type | `(error: CometChat.CometChatException) => void` |
| Default | `undefined` |

***

### onItemClick

Callback fired when a feed item card is tapped.

| | |
| - | - |
| Type | `(feedItem: NotificationFeedItem) => void` |
| Default | `undefined` |

***

### scrollToItemId

Deep link to a specific feed item by ID.

| | |
| - | - |
| Type | `string` |
| Default | `undefined` |

***

### showBackButton

Shows/hides the back button in the header.

| | |
| - | - |
| Type | `boolean` |
| Default | `false` |

***

### showFilterChips

Shows/hides the category filter chips row.

| | |
| - | - |
| Type | `boolean` |
| Default | `true` |

***

### showHeader

Shows/hides the entire header.

| | |
| - | - |
| Type | `boolean` |
| Default | `true` |

***

### title

Header title text.

| | |
| - | - |
| Type | `string` |
| Default | `"Notifications"` |

***

## Common Patterns

### Show only unread items

```tsx lines theme={null}
<CometChatNotificationFeed
  notificationFeedRequestBuilder={
    new CometChat.NotificationFeedRequestBuilder()
      .setReadState(CometChat.FeedReadState.UNREAD)
      .build()
  }
/>
```

### Hide filter chips and header

```tsx lines theme={null}
<CometChatNotificationFeed
  showHeader={false}
  showFilterChips={false}
/>
```

### Deep link to a specific notification

```tsx lines theme={null}
<CometChatNotificationFeed
  scrollToItemId="notification-item-id-123"
/>
```

***

## Next Steps

<CardGroup cols={2}>
  <Card title="Campaigns Feature" icon="bullhorn" href="/ui-kit/react-native/campaigns">
    Overview of how campaigns work end-to-end
  </Card>

  <Card title="SDK Campaigns API" icon="code" href="/sdk/react-native/campaigns">
    Low-level SDK APIs for feed items, categories, and engagement
  </Card>

  <Card title="Component Styling" icon="paintbrush" href="/ui-kit/react-native/component-styling">
    Full styling reference for all components
  </Card>

  <Card title="Theming" icon="palette" href="/ui-kit/react-native/theme">
    Customize colors, fonts, and appearance
  </Card>
</CardGroup>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.