Channel Pinning and Archiving

Channel pinning and archiving is a feature that allows users to pin and archive channels.

Channel Pinning

Channel pinning is a feature that allows users to pin a channel to the top of the channel list, if sort is enabled.

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

await channel.pin();

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

await channel.unpin();

You can get the channel pinned status by using the membership.pinned_at field from the useChannelMembershipState hook which can be imported from stream-chat-react-native.

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

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

Channel archiving is a feature that allows users to archive a channel. If filtering is enabled, you can filter channels by their archived status.

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

await channel.archive();

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

await channel.unarchive();

You can get the channel archived status by using the membership.archived_at field from the useChannelMembershipState hook which can be imported from stream-chat-react-native.

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

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

You can filter channels by their pinned and archived status using the filters prop of the ChannelList component.

For archived channels, you can use the archived filter.

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

For pinned channels, you can use the pinned filter.

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

Sorting Channels

You can sort channels by their pinned status using the sort prop of the ChannelList component.

For pinned channels, you can use the pinned_at field.

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

<ChannelList sort={sort} />;

This will sort the channels by pinned status, then by last message date, and then by updated date.

Customize Message Reactions

State Overview