---
title: Appearance
description: Customising the appearance of your iOS notifications with Notify Kit.
---

## Attachments

Using the `attachments` property on a notification, you can attach a media file which can be viewed when the user expands
the notification or as a thumbnail on the notification itself.

<Vimeo id="435859031" caption="iOS Attachments Example" />

When a notification is collapsed, a thumbnail will be shown in the notification, unless `thumbnailHidden` is set to true.

Only a single media file can be shown on the notification, if you provide many then the first attachment that can be successfully resolved will be displayed.

To add attachments, provide an `attachments` array to the `ios` object:

```js
import notifee from 'react-native-notify-kit';

notifee.displayNotification({
  title: 'Media uploaded',
  body: 'Your media has been successfully uploaded',
  ios: {
    attachments: [
      {
        // iOS resource
        url: 'local-image.png',
        thumbnailHidden: true,
      },
      {
        // Local file path.
        url: '/Path/on/device/to/local/file.mp4',
        thumbnailTime: 3, // optional
      },
      {
        // React Native asset.
        url: require('./assets/my-image.gif'),
      },
      {
        // Remote image
        url: 'https://my-cdn.com/images/123456.png',
      },
    ],
  },
});
```

Audio, image and video files are supported.

Advanced attachment options — `typeHint` (the [Uniform Type Identifier](https://developer.apple.com/library/archive/documentation/Miscellaneous/Reference/UTIRef/Articles/System-DeclaredUniformTypeIdentifiers.html), e.g. `'public.jpeg'`, used when iOS can't infer the content type from the URL) and `thumbnailClippingRect` (to crop the thumbnail shown when the notification is collapsed) — are documented in the [`IOSNotificationAttachment`](/react-native/reference/iosnotificationattachment) reference along with every available field.

## Communication Notifications

Use `ios.communicationInfo` to provide the sender and conversation context for Communication Notifications. In a direct conversation, `sender.avatar` represents the sender avatar:

```js
import notifee from 'react-native-notify-kit';

await notifee.displayNotification({
  title: 'Maya Chen',
  body: 'Can you review the PR?',
  ios: {
    communicationInfo: {
      conversationId: 'dm-maya',
      body: 'Can you review the PR?',
      sender: {
        id: 'user_maya',
        displayName: 'Maya Chen',
        avatar: 'https://cdn.example.com/avatars/maya.png',
      },
    },
  },
});
```

For a group conversation, `sender.avatar` still represents the individual sender, while `groupAvatar` represents the group avatar:

```js
await notifee.displayNotification({
  title: 'Design Team',
  body: 'Maya: The latest mockups are ready.',
  ios: {
    communicationInfo: {
      conversationId: 'design-team',
      body: 'The latest mockups are ready.',
      groupName: 'Design Team',
      groupAvatar: 'https://cdn.example.com/groups/design-team.png',
      sender: {
        id: 'user_maya',
        displayName: 'Maya Chen',
        avatar: 'https://cdn.example.com/avatars/maya.png',
      },
    },
  },
});
```

### Avatar sources

Both `sender.avatar` and `groupAvatar` accept the following image sources. The source must be available to the process that handles the notification:

- An HTTPS URL, which is recommended for remote avatars.
- A valid file URL (`file://`) that points to a real image file which already exists and is accessible to the process handling the notification.
- An absolute local path, which refers to the current device and is not portable between devices.
- A bundle resource, which must be included in the bundle of the process resolving it. A resource in the main app bundle is not automatically available in the Notification Service Extension (NSE) bundle.

For remote avatars processed by an NSE, use an HTTPS URL.

If an avatar cannot be resolved, iOS can fall back to the default communication avatar while the notification is still delivered.

## Foreground Notifications

By default, Notify Kit will show iOS notifications in heads-up mode if your app is currently in the foreground.

This behaviour can be customised using the [`IOSForegroundPresentationOptions`](/react-native/reference/iosforegroundpresentationoptions) options:

```js
import notifee from 'react-native-notify-kit';

await notifee.displayNotification({
  title: 'Your account requires attention',
  body: 'You are overdue payment on one or more of your accounts!',
  ios: {
    foregroundPresentationOptions: {
      badge: true,
      sound: true,
      banner: true,
      list: true,
    },
  },
});
```

## Summary text

After a number of unread notifications have been delivered to the device, iOS will begin to stack (or group) notifications for your
application. The notification on the top of the stack by default will display the summary text, letting the user know how many
unread notifications are available:

<Vimeo id="445185906" caption="Default Summary Text Example" />

You can customize category summary text with a [Category](/react-native/ios/categories) `summaryFormat`.

The legacy `summaryArgument` and `summaryArgumentCount` notification fields are kept for compatibility, but they are
no-ops on supported iOS versions because Apple ignores notification summary arguments on iOS 15+. They may be removed in a
future major release, so avoid relying on them for summary text.

To learn more, view the [Category Summary Text](/react-native/ios/categories#category-summary-text)
documentation.

> This functionality is only available on iOS >= 12.