React Native Inbox

Inbox Feature: Notification Handling

The Inbox feature within our platform manages push notifications in a manner designed to provide users with the most relevant and up-to-date information. One aspect of this functionality involves the handling of notifications sent within a specific time frame. Therefore, notifications sent five minutes ago and earlier will be deleted when a new notification is received. This ensures that only the latest and most pertinent information is retained in the user's inbox.

If your application needs information about the push notifications that are previously sent to device by Netmera, you can use NetmeraInbox class to fetch that information from Netmera.

The most common use case for this would be to show the list of notifications inside your application in an inbox-style interface.

NetmeraInbox is the core class providing methods and properties needed for operations on push notifications like fetching push objects or updating push objects' status, but you can not directly initialize a NetmeraInbox instance. You get an instance from SDK, then operate on that instance for future inbox actions. Here is the common workflow to use inbox feature of Netmera.

Determine properties of push notifications to fetch

You must first define filtering properties by creating a NetmeraInboxFilter instance. You determine which push notifications will be included in the fetched list by setting related properties of this NetmeraInboxFilter instance.

NetmeraInboxFilter class provides filtering according to the following options:

• Inbox Status: Read / Unread / Deleted

• Categories: Categories to which push notifications are belong.

• Including expired push notifications or not.

• Page Size: This is not to filter, but to determine the size of chunks which will be gathered during one request.

import { Netmera, NetmeraInboxFilter } from 'react-native-netmera'

     const netmeraInboxFilter = new NetmeraInboxFilter()
     //Show Read or Unread notifications
     netmeraInboxFilter.status = Netmera.PUSH_OBJECT_STATUS_READ_OR_UNREAD
     netmeraInboxFilter.pageSize = 10
     netmeraInboxFilter.categories = ["category_1", "category_2"]
     netmeraInboxFilter.includeExpiredObjects = true

Fetch the first page and get the NetmeraInbox instance

Now, you can request from Netmera to return the list of push notification objects matching with the filter object using the following code:

fetchInbox = async() => {
   try{
     const netmeraInboxFilter = new NetmeraInboxFilter()
     netmeraInboxFilter.status = Netmera.PUSH_OBJECT_STATUS_READ_OR_UNREAD
     netmeraInboxFilter.pageSize = 10
     netmeraInboxFilter.categories = ["category_1", "category_2"]
     netmeraInboxFilter.includeExpiredObjects = true
     const inbox = await Netmera.fetchInbox(netmeraInboxFilter)
     console.log("inbox", inbox)
   }catch(e){
     console.log("error", e)
   }
 }

Fetch next pages via NetmeraInbox object

After you get NetmeraInbox object which contains first page of the push notifications, you can fetch next pages with a very similar code shown above but this time via your NetmeraInbox instance. New pages are collected on already created NetmeraInbox object, therefore you can use same response handling with fetching first page.

NetmeraInbox has a method named hasNextPage for checking whether there exists more pages or not. You can use that method to decide whether you should fetch next page or not, to change your ui to let user know she has got to the end of list, etc.

Here is the sample code:

fetchNextPage = async() => {
   try{
     const inbox = await Netmera.fetchNextPage()
     console.log("inbox", inbox)
   }catch(e){
     console.log("error", e)
   }
 }

Update the status of push notifications

Push notifications may have 3 different states, which are the followings:

• Unread (PUSH_OBJECT_STATUS_UNREAD)

• Read (PUSH_OBJECT_STATUS_READ)

• Deleted (PUSH_OBJECT_STATUS_DELETED)

These three states allows you to implement a simple notification inbox interface for your users where they can read messages, mark previously read message as unread, delete messages and restore them again if needed.

You can make transitions among states for push notifications inside inbox using updateStatus method. Calling this method will start an asynchronous request to update status for given push objects, and given callback will be called upon the result of the request.

Here is a sample implementation which deleted the first 5 push objects from inbox:

await Netmera.inboxUpdateStatus(0, 5, Netmera.PUSH_OBJECT_STATUS_DELETED)

After React Native 1.5.0 Update:

With the React Native version 1.5.0 update, the usage of d.ts (declaration) files is no longer necessary in TypeScript projects.

Additionally, to access Inbox statuses, it is now done through the NMInboxStatus enum instead of the Netmera class.

For example,

import {NMInboxStatus} from "react-native-netmera";

Netmera.PUSH_OBJECT_STATUS_ALL
// becomes
NMInboxStatus.STATUS_ALL

Update the status of all pushes

You can update the status of all pushes inside inbox using updateAll method.

await Netmera.updateAll(Netmera.PUSH_OBJECT_STATUS_READ)

await Netmera.updateAll(Netmera.PUSH_OBJECT_STATUS_DELETED)

Get count for one or more status

You can get total count of push objects according to the status info among the push objects that matches given filter. Count can be get only for one specific status as well as for combined set of status values.

//get count of unread push objects
const count = await Netmera.countForStatus(Netmera.PUSH_OBJECT_STATUS_UNREAD)

//get count of read push objects
const count = await Netmera.countForStatus(Netmera.PUSH_OBJECT_STATUS_READ)

After React Native 1.5.0 Update:

With the React Native version 1.5.0 update, NMInboxStatusCountFilter is now directly imported:

import {NMInboxStatusCountFilter} from "react-native-netmera";

Inbox Examples

constructor() {
    super();
    this.state = {
        inbox: [],
        inboxState: Netmera.PUSH_OBJECT_STATUS_ALL,
        countForStatus: 0
    }
}

fetchInbox = async () => {
    try {
        const netmeraInboxFilter = new NetmeraInboxFilter();
        netmeraInboxFilter.status = this.state.inboxState;
        netmeraInboxFilter.pageSize = 2;
        const inbox = await Netmera.fetchInbox(netmeraInboxFilter);
        console.log("inbox", inbox);
        this.setState({inbox: inbox});
    } catch (e) {
        console.log("error", e)
    }
};

fetchNextPage = async () => {
    try {
        const inbox = await Netmera.fetchNextPage();
        this.setState({inbox: inbox});
        console.log("inbox", inbox)
    } catch (e) {
        console.log("error", e)
    }
};

updateAll = async () => {
    if (!this.state.inbox !== undefined) {
        let updateStatus = this.state.inboxState;
        if (updateStatus === Netmera.PUSH_OBJECT_STATUS_ALL) {
            Alert.alert("Error", "Please select different status than all!!")
            console.log("Please select different status than all!!");
            return;
        }

        try {
            Netmera.updateAll(this.state.inboxState).then(() => {
                this.fetchInbox();
            }).catch((error) => {
                console.log("error: " + error)
            })
        } catch (error) {
            console.log("error: " + error)
        }
    }
};

handlePushObject = async () => {
    if (this.state.inbox !== undefined && this.state.inbox.length > 0) {
        Netmera.handlePushObject(this.state.inbox[0].pushId)
    }
};

handleInteractiveAction = async () => {
    if (this.state.inbox !== undefined && this.state.inbox.length > 0) {
        for (let i = 0; i < this.state.inbox.length; i++) {
            const element = this.state.inbox[i];
            if (element.interactiveActions !== undefined && element.interactiveActions.length > 0) {
                const action = JSON.parse(element.interactiveActions)[0]
                Netmera.handleInteractiveAction(action.id);
                return;
            }
        }
    }
};

countForStatus = async () => {
    try {
        const count = await Netmera.countForStatus(this.state.inboxState);
        this.setState({countForStatus: count})
    } catch (e) {
    }
};

inboxUpdateStatus = async () => {
    if (this.state.inboxState === Netmera.PUSH_OBJECT_STATUS_ALL) {
        Alert.alert("Error", "Please select different status than all!!")
        console.log("Please select different status than all!!");
        return;
    }
    if (this.state.inbox === undefined || this.state.inbox < 2) {
        Alert.alert("Error", "Push objects count is less then 2!")
        console.log("Push objects count is less then 2!");
        return;
    }
    Netmera.inboxUpdateStatus(0, 2, this.state.inboxState).then(() => {
        console.log("2 push object status was changed successfully.")
    }).catch((error) => {
        console.log("error: " + error)
    });
};

updateInboxState = (value) => {
    this.setState({inboxState: value})
};

inboxCountForStatus = async () => {
    try {
        const filter = new NMInboxStatusCountFilter();
        filter.nmInboxStatus = this.state.inboxState;
        filter.includeExpired = true;
        const nmInboxStatusCount = await Netmera.getInboxCountForStatus(filter);

        let countStatusText =
            "READ: " +  nmInboxStatusCount[NMInboxStatus.STATUS_READ] + ", " +
            "UNREAD: " +  nmInboxStatusCount[NMInboxStatus.STATUS_UNREAD]

        this.setState({countForStatus: countStatusText})
        console.log("nmInboxStatusCount: ", countStatusText);
    } catch (e) {
        console.log("error", e)
    }
};