# Channel Pinning and Archiving

## Channel Pinning and Archiving

Channel pinning and archiving let users pin channels to the top or hide them from lists.

## Best Practices

- Use `pinned_at` and `archived_at` from membership to drive UI state reliably.
- When customizing `ChannelList`, keep `onChannelMemberUpdated` wired up so membership changes for pinning and archiving are reflected.
- Keep pin/unpin and archive/unarchive actions idempotent and optimistic.
- Filter or sort consistently so pinned channels don’t disappear on updates.
- Avoid mixing pinned and archived filters in the same list unless clearly labeled.
- Provide clear affordances so users can undo pin/archive actions easily.

<table>
  <tr>
  <td align='center' width='50%'>

![168006715 Acae4b85 00cb 4b45 A127 Aa8f94c13895](@chat-sdk/react-native/v9-latest/_assets/guides/channel-pinning-and-archiving/without_pinned.png)

  </td>
  <td align='center' width='50%'>

![168006193 8fd4ad85 7553 4956 A7c6 5d6979e15ee4](@chat-sdk/react-native/v9-latest/_assets/guides/channel-pinning-and-archiving/with_pinned.png)

  </td>
  </tr>
  <tr></tr>
  <tr>
  <td align='center'>
      <strong>Chat screen with customize background button</strong>
  </td>
  <td align='center'>
      <strong>Wallpaper overview screen with background image options</strong>
  </td>
  </tr>
</table>

### Channel Pinning

Pinning moves a channel to the top of the list (when sorted accordingly).

To pin a channel, you can use the `channel.pin()` method.

```tsx
await channel.pin();
```

To unpin a channel, you can use the `channel.unpin()` method.

```tsx
await channel.unpin();
```

Read pinned status via `membership?.pinned_at` from `useChannelMembershipState`.

An example of how to implement channel pinning is shown below:

```tsx
import { Pressable } from "react-native";
import {
  Pin,
  Unpin,
  useChannelMembershipState,
} from "stream-chat-react-native";

const CustomChannelPreview = ({ channel }) => {
  const membership = useChannelMembershipState(channel);

  return (
    <Pressable
      onPress={async () => {
        if (membership?.pinned_at) {
          await channel.unpin();
        } else {
          await channel.pin();
        }
      }}
    >
      {membership?.pinned_at ? (
        <Unpin height={24} width={24} pathFill="red" />
      ) : (
        <Pin size={24} />
      )}
    </Pressable>
  );
};
```

### Channel Archiving

Archiving hides a channel and can be filtered by archived status.

To archive a channel, you can use the `channel.archive()` method.

```tsx
await channel.archive();
```

To unarchive a channel, you can use the `channel.unarchive()` method.

```tsx
await channel.unarchive();
```

Read archived status via `membership?.archived_at` from `useChannelMembershipState`.

An example of how to implement channel archiving is shown below:

```tsx
import { Pressable } from "react-native";
import {
  Archive,
  Unarchive,
  useChannelMembershipState,
} from "stream-chat-react-native";

const CustomChannelPreview = ({ channel }) => {
  const membership = useChannelMembershipState(channel);

  return (
    <Pressable
      onPress={async () => {
        if (membership?.archived_at) {
          await channel.unarchive();
        } else {
          await channel.archive();
        }
      }}
    >
      {membership?.archived_at ? (
        <Unarchive height={24} width={24} pathFill="red" />
      ) : (
        <Archive height={24} width={24} />
      )}
    </Pressable>
  );
};
```

### Filtering Channels

Filter by pinned/archived status using the `filters` prop on `ChannelList`.

For archived channels, you can use the `archived` filter.

```tsx
const filters = {
  archived: true,
};
<ChannelList filters={filters} />;
```

For pinned channels, you can use the `pinned` filter.

```tsx
const filters = {
  pinned: true,
};
<ChannelList filters={filters} />;
```

### Sorting Channels

Sort by pinned status using the `sort` prop on `ChannelList`.

For pinned channels, you can use the `pinned_at` field.

```tsx
const sort = [{ pinned_at: -1 }, { last_message_at: -1 }, { updated_at: -1 }];

<ChannelList sort={sort} />;
```

This sorts by pinned status, then last message date, then updated date.


---

This page was last updated at 2026-05-20T11:18:18.135Z.

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react-native/guides/channel-pinning-and-archiving/](https://getstream.io/chat/docs/sdk/react-native/guides/channel-pinning-and-archiving/).