# Setting up Message Inbox for React Native

The Pushwoosh React Native plugin ships Message Inbox (the "bell icon" App Inbox) as part of the same `pushwoosh-react-native-plugin` package used for push notifications. No extra install step is needed.

## Prerequisites

- The [base Pushwoosh React Native SDK](/developer/pushwoosh-sdk/cross-platform-frameworks/react-native/integration/integrating-react-native-plugin/) already integrated and sending pushes.

## Show the inbox

```javascript
import Pushwoosh from 'pushwoosh-react-native-plugin';

Pushwoosh.presentInboxUI();
```

`presentInboxUI()` presents a native screen (a view controller on iOS, an Activity on Android) outside the React view tree, with the SDK's default appearance.

## Customize the style

Pass a style object to `presentInboxUI()`. Color values must go through React Native's `processColor()`. Every key is optional:

| Key | Customizes |
|---|---|
| `dateFormat` | Date formatting |
| `defaultImageIcon` | The default icon next to a message with no image |
| `unreadImage` | The unread-messages mark (iOS only) |
| `listErrorImage` | Shown when loading the list fails |
| `listEmptyImage` | Shown when the list has no messages |
| `listErrorMessage` | Error text (not localized) |
| `listEmptyMessage` | Empty-list text (not localized) |
| `defaultTextColor` | Default text color (iOS only) |
| `accentColor` | Accent color |
| `backgroundColor` | Background color |
| `highlightColor` | Selection color |
| `titleColor` | Message title color |
| `readTitleColor` | Title color for read messages (Android only) |
| `descriptionColor` | Message description color |
| `readDescriptionColor` | Description color for read messages (Android only) |
| `dateColor` | Message date color |
| `readDateColor` | Date color for read messages (Android only) |
| `dividerColor` | Separator color |
| `barBackgroundColor` | The title bar's background color |
| `barAccentColor` | The title bar's back-button color |
| `barTextColor` | The title bar's text color |

```javascript
import Pushwoosh from 'pushwoosh-react-native-plugin';
import { processColor } from 'react-native';

Pushwoosh.presentInboxUI({
    dateFormat: "dd.MM.yyyy",
    accentColor: processColor('#3498db'),
    backgroundColor: processColor('#ffffff'),
    titleColor: processColor('#333333'),
    descriptionColor: processColor('#666666'),
    listEmptyMessage: "No messages yet"
});
```

## Manage messages programmatically

Load the message list, read counts, and act on individual messages without opening the built-in screen. This is useful for a custom inbox UI or an unread badge:

```javascript
Pushwoosh.loadMessages(
    (messages) => {
        messages.forEach((msg) => {
            console.log(msg.title + ": " + msg.message);
        });
    },
    (error) => console.error("Failed to load: " + error)
);

Pushwoosh.unreadMessagesCount((count) => {
    console.log("Unread messages: " + count);
});

Pushwoosh.messagesCount((count) => { /* total messages */ });
Pushwoosh.messagesWithNoActionPerformedCount((count) => { /* not yet acted on */ });

Pushwoosh.readMessage(messageId);
Pushwoosh.deleteMessage(messageId);
Pushwoosh.performAction(messageId); // runs the message's default action, e.g. opening a URL
```