Setting up Message Inbox for React Native

The Pushwoosh React Native plugin ships Message Inbox (the “bell icon” App Inbox) as part of the same pushwoosh-react-native-plugin package used for push notifications. No extra install step is needed.

Prerequisites

• The base Pushwoosh React Native SDK already integrated and sending pushes.

Show the inbox

import Pushwoosh from 'pushwoosh-react-native-plugin';

Pushwoosh.presentInboxUI();

presentInboxUI() presents a native screen (a view controller on iOS, an Activity on Android) outside the React view tree, with the SDK’s default appearance.

Customize the style

Pass a style object to presentInboxUI(). Color values must go through React Native’s processColor(). Every key is optional:

Key	Customizes
dateFormat	Date formatting
defaultImageIcon	The default icon next to a message with no image
unreadImage	The unread-messages mark (iOS only)
listErrorImage	Shown when loading the list fails
listEmptyImage	Shown when the list has no messages
listErrorMessage	Error text (not localized)
listEmptyMessage	Empty-list text (not localized)
defaultTextColor	Default text color (iOS only)
accentColor	Accent color
backgroundColor	Background color
highlightColor	Selection color
titleColor	Message title color
readTitleColor	Title color for read messages (Android only)
descriptionColor	Message description color
readDescriptionColor	Description color for read messages (Android only)
dateColor	Message date color
readDateColor	Date color for read messages (Android only)
dividerColor	Separator color
barBackgroundColor	The title bar’s background color
barAccentColor	The title bar’s back-button color
barTextColor	The title bar’s text color

import Pushwoosh from 'pushwoosh-react-native-plugin';
import { processColor } from 'react-native';

Pushwoosh.presentInboxUI({
    dateFormat: "dd.MM.yyyy",
    accentColor: processColor('#3498db'),
    backgroundColor: processColor('#ffffff'),
    titleColor: processColor('#333333'),
    descriptionColor: processColor('#666666'),
    listEmptyMessage: "No messages yet"
});

Manage messages programmatically

Load the message list, read counts, and act on individual messages without opening the built-in screen. This is useful for a custom inbox UI or an unread badge:

Pushwoosh.loadMessages(
    (messages) => {
        messages.forEach((msg) => {
            console.log(msg.title + ": " + msg.message);
        });
    },
    (error) => console.error("Failed to load: " + error)
);

Pushwoosh.unreadMessagesCount((count) => {
    console.log("Unread messages: " + count);
});

Pushwoosh.messagesCount((count) => { /* total messages */ });
Pushwoosh.messagesWithNoActionPerformedCount((count) => { /* not yet acted on */ });

Pushwoosh.readMessage(messageId);
Pushwoosh.deleteMessage(messageId);
Pushwoosh.performAction(messageId); // runs the message's default action, e.g. opening a URL