Skip to main content
The useCounts hook provides a way to fetch various notification counts, including unread, unseen, and total counts. This hook is useful for displaying notification badges and indicators in your application.

​
Hook Parameters

ParameterTypeRequiredDescription
storeIdstringNoFilter counts by a specific store ID
queryobjectNoAdditional query parameters for filtering

​
Return Value

type CountsReturn = {
  data: {
    unreadCount: number;
    unseenCount: number;
    total: number;
  };
  isLoading: boolean;
  error: Error | null;
  refetch: () => void;
};

​
Example Usage

Here’s how to use the useCounts hook to fetch and display notification counts: 
import { View, Text, ActivityIndicator } from 'react-native';
import { useCounts } from '@novu/react-native';

function NotificationBadge() {
  const { data, isLoading, error } = useCounts();

  if (isLoading) return <ActivityIndicator />;
  if (error) return <Text>Error: {error.message}</Text>;

  return (
    <View>
      <Text>Unread: {data?.unreadCount}</Text>
      <Text>Unseen: {data?.unseenCount}</Text>
      <Text>Total: {data?.total}</Text>
    </View>
  );
}

​
With Store ID

You can filter counts for a specific store: 
import { View, Text, ActivityIndicator } from 'react-native';
function StoreNotifications({ storeId }) {
  const { data, isLoading } = useCounts({
    storeId: storeId,
  });

  if (isLoading) return <ActivityIndicator />;

  return (
    <View>
      <Text>Store Notifications: {data?.total}</Text>
      <Text>Unread: {data?.unreadCount}</Text>
    </View>
  );
}

​
With Query Filters

You can also apply additional filters using the query parameter: 
import { View, Text, ActivityIndicator } from 'react-native';
function FilteredNotifications() {
  const { data, isLoading } = useCounts({
    query: {
      templates: ['welcome-template', 'order-update'],
      emails: ['user@example.com'],
    },
  });

  if (isLoading) return <ActivityIndicator />;

  return (
    <View>
      <Text>Filtered Notifications: {data?.total}</Text>
      <Text>Unread: {data?.unreadCount}</Text>
    </View>
  );
}
refetch function can be used to refetch updated counts after notifications are marked as read/unread/archived etc.