> ## Documentation Index
> Fetch the complete documentation index at: https://learn.social.plus/llms.txt
> Use this file to discover all available pages before exploring further.

# Preview Channel Members

> Display lightweight channel member previews where the current SDK exposes preview members.

Preview members are a small set of members attached to a channel object for compact UI surfaces such as channel rows, headers, and avatar stacks. In the current public SDKs, direct channel-level preview members are exposed by TypeScript and iOS. Android and Flutter do not expose a direct `previewMembers` channel property, so use [Query Channel Members](./query-members) and render the first few results when you need the same UI pattern.

## Platform Surface

| Platform   | Direct preview member surface | Notes                                                                                              |
| ---------- | ----------------------------- | -------------------------------------------------------------------------------------------------- |
| TypeScript | `channel.previewMembers`      | Populated on `conversation` and `community` channels from cached channel members, up to 4 members. |
| iOS        | `channel.previewMembers`      | Returns up to 4 members for conversation and enabled community channel previews.                   |
| Android    | Not exposed on `AmityChannel` | Query channel members and render the first few results.                                            |
| Flutter    | Not exposed on `AmityChannel` | Query channel members and render the first few results.                                            |

## Parameters

| Operation              | Parameter           | Required  | Description                                                            |
| ---------------------- | ------------------- | --------- | ---------------------------------------------------------------------- |
| Read preview members   | `channelId`         | Yes       | Channel ID to fetch before reading preview members.                    |
| Read preview members   | `previewMembers`    | Read-only | Lightweight member list exposed on supported channel objects.          |
| Fallback preview query | `channelId`         | Yes       | Channel ID whose members should be queried for preview rendering.      |
| Fallback preview query | `filter`            | No        | Membership filter for the member query.                                |
| Fallback preview query | `includeDeleted`    | No        | Whether deleted users should be included in the fallback member query. |
| Fallback preview query | `sortBy`            | No        | Member ordering for the fallback preview list.                         |
| Fallback preview query | `limit` / page size | No        | Small page size for avatar stacks or compact participant previews.     |

## Read Preview Members

Fetch or observe the channel first, then read the preview members from the returned channel object.

<Info>
  Android and Flutter do not expose a direct channel-level `previewMembers` property. Query channel members and render a small first page when you need avatar-stack style previews.
</Info>

<CodeGroup>
  ```typescript TypeScript theme={null}
  import { ChannelRepository } from '@amityco/ts-sdk';

  const unsubscribe = ChannelRepository.getChannel(
    channelId,
    ({ data: channel, loading, error }) => {
      if (error) handleError(error);

      if (!loading && channel) {
        renderResults(channel.previewMembers);
      }
    },
  );

  unsubscribe();
  ```

  ```swift iOS theme={null}
  var token: AmityNotificationToken?

  token = channelRepository.getChannel(channelId).observe { liveObject, error in
      if let error {
          handleError(error)
          return
      }

      guard let channel = liveObject.snapshot else { return }

      let previewMembers = channel.previewMembers
      showSuccessMessage(previewMembers.count)
  }
  ```
</CodeGroup>

## Fallback Preview Query

Use this approach on Android and Flutter, or anywhere you need filtering that the channel-level preview does not provide.

<CodeGroup>
  ```kotlin Android theme={null}
  val disposable = AmityChatClient.newChannelRepository()
      .membership(channelId = channelId)
      .getMembers()
      .filter(filter = AmityChannelMembershipFilter.ALL)
      .includeDeleted(includeDeleted = false)
      .sortBy(sortOption = AmityChannelMembershipSortOption.LAST_CREATED)
      .build()
      .query()
      .subscribe(
          { members: PagingData<AmityChannelMember> -> showSuccessMessage(members) },
          { error -> handleGeneralError(error) },
      )
  ```

  ```dart Flutter theme={null}
  final controller = PagingController<AmityChannelMember>(
    pageFuture: (token) => AmityChatClient.newChannelRepository()
        .membership(channelId)
        .getMembers()
        .filter(AmityChannelMembershipFilter.ALL)
        .includeDeleted(false)
        .sortBy(AmityMembershipSortOption.LAST_CREATED)
        .getPagingData(token: token, limit: 4),
    pageSize: 4,
  );

  controller.fetchNextPage();
  ```
</CodeGroup>

## Related Topics

<CardGroup cols={2}>
  <Card title="Get Channels" href="../channels/get-channel" icon="info">
    Load the channel object that carries preview members on supported platforms.
  </Card>

  <Card title="Query Members" href="./query-members" icon="users">
    Retrieve paginated members for full member lists and fallback previews.
  </Card>

  <Card title="Message Preview" href="../../engagement-features/message-preview" icon="message-square">
    Display latest-message previews beside member preview UI.
  </Card>

  <Card title="Query Channels" href="../channels/query-channels" icon="list-filter">
    Build channel lists that use preview members in row layouts.
  </Card>
</CardGroup>
