1. Home
  2. /Developer
  3. /SDK Integrations
  4. /React Native
  5. /Message Center
  6. /Message Center for the React Native Module

Message Center for the React Native Module

The default Message Center is available for React Native with minimal integration required. Basic theming options are supported.

Message Center provides an inbox for rich, HTML-based messages. Learn more about Message Center in our user guide.

Display the Message Center

Display the Message Center with a single method call:

await Airship.messageCenter.display();

To customize the Message Center UI or navigation, see Embedding the Message Center.

Fetch Messages

Retrieve messages from the inbox:

const messages = await Airship.messageCenter.getMessages();

Listen for Message Updates

Subscribe to message updates using event listeners:

Airship.addListener(EventType.MessageCenterUpdated, () => {
  // Update your UI
  Airship.messageCenter.getMessages().then((messages) => {
    // Handle messages
  });
});

Listen for Unread Count Changes

Subscribe to unread count updates:

const unreadCount = await Airship.messageCenter.getUnreadCount();
// Update badge or UI

Refresh Messages

Manually refresh the message list from the server:

try {
  await Airship.messageCenter.refreshMessages();
} catch (error) {
  console.log('Unable to refresh inbox: ', error);
}

Mark Messages as Read

Mark one or more messages as read:

try {
  await Airship.messageCenter.markMessageRead('message-id');
} catch (error) {
  console.log('Unable to mark message as read: ', error);
}

Delete Messages

Delete one or more messages:

try {
  await Airship.messageCenter.deleteMessage('message-id');
} catch (error) {
  console.log('Unable to delete message: ', error);
}