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