Message Center

Airship Message Center is a place in your app where you can display persistent rich messages, including HTML, video, etc. The messages are hosted by Airship, and are typically displayed in standard inbox-style within your app.

The default message center can be displayed at any time
UrbanAirship.displayMessageCenter()
The message center can be dismissed
UrbanAirship.dismissMessageCenter()
To display the inbox message
UrbanAirship.displayMessage("message-id")
To dismiss an inbox message
UrbanAirship.dismissMessage()
To delete an inbox message
UrbanAirship.deleteInboxMessage("message-id").then((result) => {
  console.log('Message deleted: ', result)
}).catch((err) => {
  console.log('Unable to delete message: ', err)
})
To mark an inbox message read
UrbanAirship.markInboxMessageRead("message-id").then((result) => {
  console.log('Message marked as read: ', result)
}).catch((err) => {
  console.log('Unable to mark message as read: ', err)
})
To refresh the inbox
UrbanAirship.refreshInbox().then((result) => {
  console.log('Inbox refreshed: ', result)
}).catch((err) => {
  console.log('Unable to refresh inbox: ', err)
})
To set the default behavior when the message center is launched from a push
UrbanAirship.setAutoLaunchDefaultMessageCenter(false)

Getting inbox messages
UrbanAirship.getInboxMessages().then((data) => {
    console.log('Inbox messages: ', data)
});

Using the UAMessageView
<UAMessageView messageId="message-id"
               onLoadStarted={this.startLoading}
               onLoadFinished={this.finishLoading}
               onLoadError={this.failedLoading}
               style={{ flex: 1 }}
 />

An example of a Message Center inbox as a React component
import {
 UrbanAirship,
 UAMessageView
} from 'urbanairship-react-native'

import React, {
  Component,
} from 'react';

export default class MessageCenterScreen extends React.Component {

  constructor(props) {
    super (props);
    this.state = {
      messages: [],
    }

    this.handleUpdateMessageList();
  }

  startLoading() {
    console.log('Message center: startLoading');
  }

  finishLoading() {
    console.log('Message center: finishLoading');
  }

  failedLoading() {
    console.log('Message center: failedLoading');
  }

  handleUpdateMessageList() {
    UrbanAirship.getInboxMessages().then((data) => {
        this.setState({
            messages: data,
        });
    });
  }

  render() {
    const message = this.state.messages[0];
    const messageId = message ? message.id : "";
    return (
        <UAMessageView messageId={messageId}
                       onLoadStarted={this.startLoading}
                       onLoadFinished={this.finishLoading}
                       onLoadError={this.failedLoading}
                       style={{ flex: 1 }}
        />
    );
  }
}

Look at our sample app for more details.