Message Center

Airship’s SDK provides a simple interface for managing the Message Center within your application.

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 MessageView
<MessageView 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
/**
 * Sample React Native App
 *
 * MessageCenterScreen: Contains the list of messages.
 */
'use strict';

import {
  UrbanAirship,
  EventType
} from 'urbanairship-react-native'

import React from 'react';

import {
  Text,
  View,
  FlatList,
  TouchableHighlight,
  RefreshControl
} from 'react-native';

import Moment from 'moment';

import styles from './../Styles';

function Item({ message, navigation }) {
  return (
    <TouchableHighlight
      activeOpacity={0.6}
      underlayColor="#DDDDDD"
      onPress={() => navigation.navigate("MessageDetails", { messageId: message.id, title: message.title })}>
      <View style={styles.item}>
        <Text style={styles.itemTitle}>{message.title}</Text>
        <Text style={styles.itemSubtitle}>{Moment(message.sentDate).format('MM/DD/YYYY')}</Text>
        <View style={styles.itemSeparator}></View>
      </View>
    </TouchableHighlight>
  );
}

export default class MessageCenterScreen extends React.Component {

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

    this.refreshMessageCenter = this.refreshMessageCenter.bind(this);

    this.handleUpdateMessageList();

    UrbanAirship.setAutoLaunchDefaultMessageCenter(false);

    UrbanAirship.addListener(EventType.ShowInbox, (event) => {
      console.log(EventType.ShowInbox + ':', event);
      if (event.messageId != null) {
        this.props.navigation.navigate("MessageDetails", { messageId: event.event, title: "" })
      } else {
        this.props.navigation.navigate("MessageCenter")
      }
    });
  }

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

  refreshMessageCenter() {
    this.handleUpdateMessageList();
  }

  render() {
    return (
      <View style={styles.backgroundContainer}>
        <FlatList
          data={this.state.messages}
          renderItem={({ item }) => <Item message={item} navigation={this.props.navigation} />}
          keyExtractor={item => item.id}
          refreshControl={
            <RefreshControl refreshing={this.state.refreshing}
              onRefresh={this.refreshMessageCenter}
            />
          }
        />
      </View>
    );
  }
}

Look at our sample app for more details.