# Message Center

Implement Message Center to provide an inbox for rich HTML-based messages.

<!-- PAGE: Get started with Message Center on React Native, PATH: https://www.airship.com/docs/developer/sdk-integration/react-native/message-center/getting-started/ -->

# Get started with Message Center on React Native

> 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 [feature guide](https://www.airship.com/docs/guides/features/messaging/message-center/).

## Display the Message Center

Display the Message Center with a single method call:

```ts
await Airship.messageCenter.display();
```


To customize the Message Center UI or navigation, see [Embedding the Message Center](https://www.airship.com/docs/developer/sdk-integration/react-native/message-center/embedding/).

## Fetch Messages

Retrieve messages from the inbox:

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


## Listen for Message Updates

Subscribe to message updates using event listeners:

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


## Listen for Unread Count Changes

Subscribe to unread count updates:

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


## Refresh Messages

Manually refresh the message list from the server:

```ts
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:

```ts
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:

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



<!-- /PAGE: Get started with Message Center on React Native -->

<!-- PAGE: Embed the Message Center, PATH: https://www.airship.com/docs/developer/sdk-integration/react-native/message-center/embedding/ -->

# Embed the Message Center

> Airship's SDK provides a simple interface for managing the Message Center within your application.
This guide covers creating custom Message Center implementations for React Native applications.

## Override Default Display Behavior

To use a custom Message Center implementation instead of the default UI, disable auto-launch and add a listener to handle display events:

```ts
// Disable the default UI
Airship.messageCenter.setAutoLaunchDefaultMessageCenter(false);

// Add a listener to handle display events
Airship.addListener(EventType.DisplayMessageCenter, (event) => {
  if (event.messageId) {
    // Navigate to specific message
  } else {
    // Navigate to message center
  }
});
```


## Custom Message Center Implementation

For complete control over Message Center placement and navigation, create a custom implementation using the Message Center components.

### Using the MessageView

The `MessageView` component can be used to display individual messages:

```ts
<MessageView 
  messageId="message-id"
  onLoadStarted={this.startLoading}
  onLoadFinished={this.finishLoading}
  onLoadError={this.failedLoading}
  style={{ flex: 1 }}
/>
```


### Example: Custom Message Center Inbox

Here's an example of a complete Message Center inbox implementation:

```ts
import * as React from 'react';
import {
  Text,
  View,
  FlatList,
  TouchableHighlight,
  RefreshControl,
} from 'react-native';
import Moment from 'moment';
import Airship, { Subscription, EventType, InboxMessage } from '@ua/react-native-airship';

interface MessageCenterScreenProps {
  navigation: any;
}

function Item({ message, navigation }: { message: any; navigation: any }) {
  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>
    </TouchableHighlight>
  );
}

export default class MessageCenterScreen extends React.Component<
  MessageCenterScreenProps,
  {
    messages: InboxMessage[];
    refreshing: boolean;
  }
> {
  private updateSubscription?: Subscription;

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

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

  componentDidMount(): void {
    this.updateSubscription = Airship.addListener(
      EventType.MessageCenterUpdated,
      this.handleUpdateMessageList
    );
    this.handleUpdateMessageList();
  }

  componentWillUnmount(): void {
    this.updateSubscription?.remove();
  }

  handleUpdateMessageList() {
    Airship.messageCenter.getMessages().then((data) => {
      this.setState({
        messages: data,
        refreshing: false,
      });
    });
  }

  refreshMessageCenter() {
    Airship.messageCenter
      .refreshMessages()
      .then(() => {
        this.setState({
          refreshing: false,
        });
      })
      .catch((error) => {
        console.log('failed to refresh', error);
      });
  }

  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>
    );
  }
}
```


### Example: Message Detail Screen

Here's an example of a message detail screen:

```ts
import * as React from 'react';
import { View, ActivityIndicator, Alert } from 'react-native';
import { MessageView } from '@ua/react-native-airship';

interface MessageScreenProps {
  navigation: any;
  route: any;
}

export default class MessageScreen extends React.Component<
  MessageScreenProps,
  {
    animating: boolean;
  }
> {
  constructor(props: MessageScreenProps) {
    super(props);
    this.state = {
      animating: true,
    };

    this.startLoading = this.startLoading.bind(this);
    this.finishLoading = this.finishLoading.bind(this);
    this.failedLoading = this.failedLoading.bind(this);
  }

  startLoading() {
    this.setState({ animating: true });
  }

  finishLoading() {
    this.setState({ animating: false });
  }

  failedLoading() {
    this.setState({ animating: false });
    Alert.alert('Error', 'Unable to load message. Please try again later', [
      { text: 'OK', onPress: () => this.props.navigation.goBack() },
    ]);
  }

  render() {
    const { params } = this.props.route;
    const messageId = params ? params.messageId : '';

    return (
      <View style={styles.backgroundContainer}>
        <MessageView
          messageId={messageId}
          onLoadStarted={this.startLoading}
          onLoadFinished={this.finishLoading}
          onLoadError={this.failedLoading}
          style={{ flex: 1 }}
        />
        {this.state.animating && (
          <View style={styles.loadingIndicator}>
            <ActivityIndicator size="large" animating={this.state.animating} />
          </View>
        )}
      </View>
    );
  }
}
```


For more examples, see our [sample app](https://github.com/urbanairship/react-native-module/tree/main/example).



<!-- /PAGE: Embed the Message Center -->