> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-rn-guide-message-privately.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">
  ```json theme={null}
  {
    "component": "CometChatNotificationFeed",
    "package": "@cometchat/chat-uikit-react-native",
    "import": "import { CometChatNotificationFeed } from \"@cometchat/chat-uikit-react-native\";",
    "description": "Full-screen notification feed with category filtering, timestamp grouping, card rendering via @cometchat/cards-react-native, real-time updates, and automatic engagement reporting.",
    "props": {
      "data": {
        "title": { "type": "string", "default": "\"Notifications\"" },
        "scrollToItemId": { "type": "string", "default": "undefined", "note": "Deep link to a specific feed item" },
        "notificationFeedRequestBuilder": { "type": "NotificationFeedRequestBuilder", "default": "SDK default (20 per page)" },
        "notificationCategoriesRequestBuilder": { "type": "NotificationCategoriesRequestBuilder", "default": "SDK default (50 per page)" }
      },
      "callbacks": {
        "onItemClick": "(feedItem: NotificationFeedItem) => void",
        "onActionClick": "(feedItem: NotificationFeedItem, action: { type: string, params: object, elementId: string }) => void",
        "onError": "(error: CometChat.CometChatException) => void",
        "onBackPress": "() => void"
      },
      "visibility": {
        "showHeader": { "type": "boolean", "default": true },
        "showBackButton": { "type": "boolean", "default": false },
        "showFilterChips": { "type": "boolean", "default": true }
      },
      "viewSlots": {
        "HeaderView": "() => JSX.Element",
        "EmptyView": "() => JSX.Element",
        "ErrorView": "() => JSX.Element",
        "LoadingView": "() => JSX.Element"
      },
      "cards": {
        "cardThemeMode": { "type": "\"auto\" | \"light\" | \"dark\"", "default": "\"auto\"" },
        "cardThemeOverride": { "type": "CometChatCardThemeOverride", "default": "undefined" }
      }
    },
    "automaticBehaviors": [
      "Real-time updates via WebSocket listener",
      "Delivery reporting on fetch",
      "Read reporting on viewport visibility",
      "Unread count polling every 30 seconds",
      "Infinite scroll pagination",
      "Pull-to-refresh",
      "Timestamp grouping (Today, Yesterday, day name, date)",
      "Category filter chips"
    ]
  }
  ```
</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>