# Message Center list view

Show the Message Center message list on its own with MessageCenterListView, add a navigation bar, filter with a predicate, and customize the list item view.

The list view shows the Message Center inbox without the message detail. Use it when you provide your own message display, or when you want the list in one part of your app and the message in another.

- `MessageCenterListView` shows the list with no navigation bar.
- `MessageCenterListViewWithNavigation` adds a navigation bar, title, and edit mode.

## MessageCenterListView

Embed the list anywhere in your SwiftUI hierarchy. Handle selection yourself, typically by presenting a [message view](https://www.airship.com/docs/developer/sdk-integration/apple/message-center/custom/message-view/).


#### Swift


```swift
import SwiftUI
import AirshipMessageCenter

struct MyListScreen: View {
    var body: some View {
        MessageCenterListView()
    }
}
```




To show only a subset of messages, pass a predicate:

```swift
MessageCenterListView(predicate: CustomPredicate())
```


## MessageCenterListViewWithNavigation

`MessageCenterListViewWithNavigation` is the same list wrapped in a navigation bar, with a title and support for edit mode. Use it when the list is the root of its own navigation.

```swift
MessageCenterListViewWithNavigation(predicate: CustomPredicate())
```


## Custom list item view {#custom-list-item-view}

To replace the appearance of each row, implement `MessageCenterListItemViewStyle` and return your own view from `makeBody(configuration:)`. The configuration provides the message for the row.


#### Swift


```swift
struct CustomListItemViewStyle: MessageCenterListItemViewStyle {
    func makeBody(configuration: Configuration) -> some View {
        let message = configuration.message
        HStack {
            Text(message.title)
            Spacer()
            if message.unread {
                Circle()
                    .fill(.blue)
                    .frame(width: 8, height: 8)
            }
        }
    }
}
```




Apply the style with the `.messageCenterItemViewStyle(_:)` modifier:

```swift
MessageCenterListView()
    .messageCenterItemViewStyle(CustomListItemViewStyle())
```