Notifications Section

The Notifications Section feature provides comprehensive notification management within your React Native app. It allows users to view, manage, and interact with push notifications through an in-app notification bell icon interface.

Overview

The Notifications Section enables you to:

Display a list of push notifications received by the user for the last 90 days
Create a notifications section within your app with a bell icon interface
Track notification read/unread status
Update notification read status programmatically
Get unread notifications count for badge display
Present a notifications screen with customizable configuration

1. Notifications List

Upshot.ai provides the list of Push Notifications information received by the user for the last 90 days. This is used to create the Notifications section within the app. While setting up the push notifications, you can exclude certain notifications by adding the bkDeListing key with the end date in the Unix timestamp in the deep link key value.

How to Fetch Notifications List

JavaScriptTypeScript

javascript

import Upshot from "react-native-upshotsdk";
// Fetch notifications list with pagination
Upshot.getNotificationList(
  limit,
  loadmore,
  fromLastDays,
  function (response) {
    // Response is in JSON string, parse it
    const notificationData = JSON.parse(response);
    console.log("Notifications:", notificationData);

    // Process notification data
    if (notificationData.status === "success") {
      console.log("Page ID:", notificationData.pageId);
      console.log("Notifications:", notificationData.data);

      // Display notifications in your UI
      displayNotifications(notificationData.data);
    }
  },
  function (error) {
    console.log("Error fetching notifications:", error);
  }
);

function displayNotifications(notifications) {
  notifications.forEach((notification) => {
    console.log("📱", notification.title, "-", notification.message);
    console.log("Read status:", notification.read === 1 ? "Read" : "Unread");
  });
}

typescript

import Upshot from 'react-native-upshotsdk';
interface NotificationItem {
  message: string;
  title: string;
  emsg: string;
  etitle: string;
  cid: string;
  read: number;
  id: string;
  expiry: number;
  msg_id: string;
  image_url: string;
  appData: any;
}

interface NotificationResponse {
  statusCode: number;
  pageId: string;
  status: string;
  data: NotificationItem[];
}

// Fetch notifications list with pagination
Upshot.getNotificationList(
  limit: number,
  loadmore: boolean,
  fromLastDays: number,
  (response: string) => {
    // Response is in JSON string, parse it
    const notificationData: NotificationResponse = JSON.parse(response);
    console.log("Notifications:", notificationData);

    // Process notification data
    if (notificationData.status === "success") {
      console.log("Page ID:", notificationData.pageId);
      console.log("Notifications:", notificationData.data);

      // Display notifications in your UI
      displayNotifications(notificationData.data);
    }
  },
  (error: string) => {
    console.log("Error fetching notifications:", error);
  }
);

function displayNotifications(notifications: NotificationItem[]): void {
  notifications.forEach((notification: NotificationItem) => {
    console.log("📱", notification.title, "-", notification.message);
    console.log("Read status:", notification.read === 1 ? "Read" : "Unread");
  });
}

Sample Notifications Response

json

{
  "statusCode": 200,
  "pageId": "1709177173",
  "status": "success",
  "data": [
    {
      "message": "Push Message",
      "title": "Push Title",
      "emsg": "",
      "etitle": "",
      "cid": "65e5bae2f33bdd0a840b1b15",
      "read": 1,
      "id": "65e5bae2f33bdd0a840b1b15",
      "expiry": 1709767800000,
      "msg_id": "65e5ba5b0807ed84fba786f4",
      "image_url": "",
      "appData": {}
    }
  ]
}

Response Field Descriptions

Field	Description
`message`	Main notification message content
`title`	Notification title
`emsg`	Extended message (if available)
`etitle`	Extended title (if available)
`cid`	Campaign ID
`read`	Read status (1 = read, 0 = unread)
`id`	Unique notification identifier
`expiry`	Notification expiry timestamp
`msg_id`	Message ID
`image_url`	Notification image URL (if available)
`appData`	Additional app-specific data

2. Update Notification Read Status

The updateNotificationReadStatus method allows you to update the notification read status when users interact with notifications.

How to Update Notification Read Status

JavaScriptTypeScript

javascript

// Update notification read status
function markNotificationAsRead(notificationId) {
  Upshot.updateNotificationReadStatus(notificationId, function (status, error) {
    if (error) {
      console.log("Error updating read status:", error);
    } else {
      console.log("Notification marked as read:", status);
      // Update your UI to reflect the change
      updateNotificationUI(notificationId, true);
    }
  });
}

function updateNotificationUI(notificationId, isRead) {
  // Update your notification UI to show read/unread status
  console.log(
    `Notification ${notificationId} is now ${isRead ? "read" : "unread"}`
  );
  // Implement your UI update logic here
}

typescript

// Update notification read status
function markNotificationAsRead(notificationId: string): void {
  Upshot.updateNotificationReadStatus(
    notificationId,
    (status: any, error: string | null) => {
      if (error) {
        console.log("Error updating read status:", error);
      } else {
        console.log("Notification marked as read:", status);
        // Update your UI to reflect the change
        updateNotificationUI(notificationId, true);
      }
    }
  );
}

function updateNotificationUI(notificationId: string, isRead: boolean): void {
  // Update your notification UI to show read/unread status
  console.log(
    `Notification ${notificationId} is now ${isRead ? "read" : "unread"}`
  );
  // Implement your UI update logic here
}

3. Unread Notifications Count

Upshot.ai provides the count of unread notifications based on notification type. This is perfect for displaying badge counts on your notification bell icon.

Notification Types

OnlyInAppNudges (1): Count of In-App Notifications
OnlyPushNotifications (2): Count of Push Notifications
AllNotifications (3): Combined count of Push & In-App notifications

How to Fetch Unread Notifications Count

JavaScriptTypeScript

javascript

// Get unread notifications count
Upshot.getUnreadNotificationsCount(
  notificationType,
  fromLastDays,
  function (count) {
    console.log("Unread notifications count:", count);
    // Update notification bell badge
    updateNotificationBellBadge(count);
  }
);

typescript

// Notification type enum
enum NotificationType {
  OnlyInAppNudges = 1,
  OnlyPushNotifications = 2,
  AllNotifications = 3,
}

// Get unread notifications count
Upshot.getUnreadNotificationsCount(
  notificationType,
  fromLastDays,
  (count: number) => {
    console.log("Unread notifications count:", count);

    // Update notification bell badge
    updateNotificationBellBadge(count);
  }
);

4. Present Notifications Screen

Upshot.ai presents a pre-built Notifications Screen on top of your application based on notification type and configuration setup. This provides a complete notifications interface without building custom UI.

Configuration Options

Option	Description
`DisplayMsgCount`	If true, shows UnreadNotifications Count / Total Notifications
`DisplayTime`	If true, notification time is displayed
`EnableLoadMore`	If true, enables pagination for loading more notifications
`PushLimit`	Integer defining the number of notifications to fetch from server
`ShowReadNotifications`	If true, shows both read and unread notifications
`Type`	Notification type (1, 2, or 3)

How to Show Notifications Screen

JavaScriptTypeScript

javascript

import { Upshot, UpshotInboxConfigOptions } from "react-native-upshotsdk";

// Configure and show notifications screen
function showNotificationsScreen() {
  const options = {
    [UpshotInboxConfigOptions.DisplayMsgCount]: true,
    [UpshotInboxConfigOptions.DisplayTime]: true,
    [UpshotInboxConfigOptions.EnableLoadMore]: true,
    [UpshotInboxConfigOptions.PushLimit]: 100,
    [UpshotInboxConfigOptions.ShowReadNotifications]: true,
    [UpshotInboxConfigOptions.Type]: 3, // All notifications
  };

  // Show the notifications screen
  Upshot.showInboxNotificationScreen(JSON.stringify(options));
}

typescript

import { Upshot, UpshotInboxConfigOptions } from "react-native-upshotsdk";

interface NotificationScreenOptions {
  [UpshotInboxConfigOptions.DisplayMsgCount]: boolean;
  [UpshotInboxConfigOptions.DisplayTime]: boolean;
  [UpshotInboxConfigOptions.EnableLoadMore]: boolean;
  [UpshotInboxConfigOptions.PushLimit]: number;
  [UpshotInboxConfigOptions.ShowReadNotifications]: boolean;
  [UpshotInboxConfigOptions.Type]: number;
}

// Configure and show notifications screen
function showNotificationsScreen(): void {
  const options: NotificationScreenOptions = {
    [UpshotInboxConfigOptions.DisplayMsgCount]: true,
    [UpshotInboxConfigOptions.DisplayTime]: true,
    [UpshotInboxConfigOptions.EnableLoadMore]: true,
    [UpshotInboxConfigOptions.PushLimit]: 100,
    [UpshotInboxConfigOptions.ShowReadNotifications]: true,
    [UpshotInboxConfigOptions.Type]: 3, // All notifications
  };

  // Show the notifications screen
  Upshot.showInboxNotificationScreen(JSON.stringify(options));
}

Building a Notification Bell Interface

Complete Notification Bell Implementation

Create a comprehensive notification bell icon with badge and click handling:

JavaScriptTypeScript

javascript

import React, { useState, useEffect } from "react";
import { View, TouchableOpacity, Text, StyleSheet } from "react-native";
import { Upshot, UpshotInboxConfigOptions } from "react-native-upshotsdk";

const NotificationBell = () => {
  const [unreadCount, setUnreadCount] = useState(0);

  useEffect(() => {
    // Load unread count on component mount
    loadUnreadCount();

    // Set up periodic updates (optional)
    const interval = setInterval(loadUnreadCount, 60000); // Update every minute

    return () => clearInterval(interval);
  }, []);

  const loadUnreadCount = () => {
    Upshot.getUnreadNotificationsCount(3, 5, (count) => {
      setUnreadCount(count);
    });
  };

  const handleBellPress = () => {
    // Show notifications screen
    showNotificationsScreen();

    // Refresh count after showing notifications
    setTimeout(() => {
      loadUnreadCount();
    }, 1000);
  };

  const showNotificationsScreen = () => {
    const options = {
      [UpshotInboxConfigOptions.DisplayMsgCount]: true,
      [UpshotInboxConfigOptions.DisplayTime]: true,
      [UpshotInboxConfigOptions.EnableLoadMore]: true,
      [UpshotInboxConfigOptions.PushLimit]: 100,
      [UpshotInboxConfigOptions.ShowReadNotifications]: true,
      [UpshotInboxConfigOptions.Type]: 3,
    };

    Upshot.showInboxNotificationScreen(JSON.stringify(options));
  };

  return (
    <TouchableOpacity style={styles.bellContainer} onPress={handleBellPress}>
      <View style={styles.bellIcon}>
        <Text style={styles.bellText}>🔔</Text>
        {unreadCount > 0 && (
          <View style={styles.badge}>
            <Text style={styles.badgeText}>
              {unreadCount > 99 ? "99+" : unreadCount.toString()}
            </Text>
          </View>
        )}
      </View>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  bellContainer: {
    padding: 8,
  },
  bellIcon: {
    position: "relative",
    width: 24,
    height: 24,
    justifyContent: "center",
    alignItems: "center",
  },
  bellText: {
    fontSize: 20,
  },
  badge: {
    position: "absolute",
    top: -5,
    right: -5,
    backgroundColor: "#FF3B30",
    borderRadius: 10,
    minWidth: 20,
    height: 20,
    justifyContent: "center",
    alignItems: "center",
    paddingHorizontal: 4,
  },
  badgeText: {
    color: "white",
    fontSize: 12,
    fontWeight: "bold",
  },
});

export default NotificationBell;

typescript

import React, { useState, useEffect } from "react";
import { View, TouchableOpacity, Text, StyleSheet } from "react-native";
import { Upshot, UpshotInboxConfigOptions } from "react-native-upshotsdk";

const NotificationBell: React.FC = () => {
  const [unreadCount, setUnreadCount] = useState<number>(0);

  useEffect(() => {
    // Load unread count on component mount
    loadUnreadCount();

    // Set up periodic updates (optional)
    const interval = setInterval(loadUnreadCount, 60000); // Update every minute

    return () => clearInterval(interval);
  }, []);

  const loadUnreadCount = (): void => {
    Upshot.getUnreadNotificationsCount(3, 5, (count: number) => {
      setUnreadCount(count);
    });
  };

  const handleBellPress = (): void => {
    // Show notifications screen
    showNotificationsScreen();

    // Refresh count after showing notifications
    setTimeout(() => {
      loadUnreadCount();
    }, 1000);
  };

  const showNotificationsScreen = (): void => {
    const options = {
      [UpshotInboxConfigOptions.DisplayMsgCount]: true,
      [UpshotInboxConfigOptions.DisplayTime]: true,
      [UpshotInboxConfigOptions.EnableLoadMore]: true,
      [UpshotInboxConfigOptions.PushLimit]: 100,
      [UpshotInboxConfigOptions.ShowReadNotifications]: true,
      [UpshotInboxConfigOptions.Type]: 3,
    };

    Upshot.showInboxNotificationScreen(JSON.stringify(options));
  };

  return (
    <TouchableOpacity style={styles.bellContainer} onPress={handleBellPress}>
      <View style={styles.bellIcon}>
        <Text style={styles.bellText}>🔔</Text>
        {unreadCount > 0 && (
          <View style={styles.badge}>
            <Text style={styles.badgeText}>
              {unreadCount > 99 ? "99+" : unreadCount.toString()}
            </Text>
          </View>
        )}
      </View>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  bellContainer: {
    padding: 8,
  },
  bellIcon: {
    position: "relative",
    width: 24,
    height: 24,
    justifyContent: "center",
    alignItems: "center",
  },
  bellText: {
    fontSize: 20,
  },
  badge: {
    position: "absolute",
    top: -5,
    right: -5,
    backgroundColor: "#FF3B30",
    borderRadius: 10,
    minWidth: 20,
    height: 20,
    justifyContent: "center",
    alignItems: "center",
    paddingHorizontal: 4,
  },
  badgeText: {
    color: "white",
    fontSize: 12,
    fontWeight: "bold",
  },
});

export default NotificationBell;

Notifications Section ​

Overview ​

1. Notifications List ​

How to Fetch Notifications List ​

Sample Notifications Response ​

Response Field Descriptions ​

2. Update Notification Read Status ​

How to Update Notification Read Status ​

3. Unread Notifications Count ​

Notification Types ​

How to Fetch Unread Notifications Count ​

4. Present Notifications Screen ​

Configuration Options ​

How to Show Notifications Screen ​

Building a Notification Bell Interface ​

Complete Notification Bell Implementation ​

Notifications Section

Overview

1. Notifications List

How to Fetch Notifications List

Sample Notifications Response

Response Field Descriptions

2. Update Notification Read Status

How to Update Notification Read Status

3. Unread Notifications Count

Notification Types

How to Fetch Unread Notifications Count

4. Present Notifications Screen

Configuration Options

How to Show Notifications Screen

Building a Notification Bell Interface

Complete Notification Bell Implementation