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 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.
Feedback
Was this page helpful?
Thank you
Thanks for your feedback!
Tell Us MoreThank you
We will try harder!
Tell Us MoreCategories