Notification Feed - CometChat Docs

AI Integration Quick Reference

{
  "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"
  ]
}

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.

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

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:

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()
      }
    />
  );
}

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.

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

onActionClick

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

<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).

<CometChatNotificationFeed
  onError={(error) => {
    console.error("Feed error:", error.message);
  }}
/>

onBackPress

Fires when the back button in the header is tapped.

<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:

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

State Views

<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.

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

<CometChatNotificationFeed
  notificationFeedRequestBuilder={
    new CometChat.NotificationFeedRequestBuilder()
      .setReadState(CometChat.FeedReadState.UNREAD)
      .build()
  }
/>

Hide filter chips and header

<CometChatNotificationFeed
  showHeader={false}
  showFilterChips={false}
/>

Deep link to a specific notification

<CometChatNotificationFeed
  scrollToItemId="notification-item-id-123"
/>

Next Steps

Campaigns Feature

Overview of how campaigns work end-to-end

SDK Campaigns API

Low-level SDK APIs for feed items, categories, and engagement

Component Styling

Full styling reference for all components

Theming

Customize colors, fonts, and appearance

​Where It Fits

​Minimal Render

​Filtering Feed Items

​Filter Options

​Actions and Events

​Callback Props

​onItemClick

​onActionClick

​onError

​onBackPress

​Automatic Behaviors

​Custom View Slots

​HeaderView

​State Views

​Styling

​Style Properties

​Props

​cardThemeMode

​cardThemeOverride

​EmptyView

​ErrorView

​HeaderView

​LoadingView

​notificationCategoriesRequestBuilder

​notificationFeedRequestBuilder

​onActionClick

​onBackPress

​onError

​onItemClick

​scrollToItemId

​showBackButton

​showFilterChips

​showHeader

​title

​Common Patterns

​Show only unread items

​Hide filter chips and header

​Deep link to a specific notification

​Next Steps

Campaigns Feature

SDK Campaigns API

Component Styling

Theming

Where It Fits

Minimal Render

Filtering Feed Items

Filter Options

Actions and Events

Callback Props

onItemClick

onActionClick

onError

onBackPress

Automatic Behaviors

Custom View Slots

HeaderView

State Views

Styling

Style Properties

Props

cardThemeMode

cardThemeOverride

EmptyView

ErrorView

HeaderView

LoadingView

notificationCategoriesRequestBuilder

notificationFeedRequestBuilder

onActionClick

onBackPress

onError

onItemClick

scrollToItemId

showBackButton

showFilterChips

showHeader

title

Common Patterns

Show only unread items

Hide filter chips and header

Deep link to a specific notification

Next Steps