Recent Chats (Chat List)

Key Benefit: Provide users with a centralized hub to manage all their chat conversations, featuring real-time updates, unread indicators, and intuitive navigation between active and archived chats.

Feature Overview

The UIKit provides users with an overview of all their active chat channels. It offers a quick glance at the latest conversations and helps users easily stay on top of ongoing discussions.

Channel Management

Conversation Organization

Channel preview with latest messages
Real-time activity sorting
Unread message indicators
Swipe-to-archive functionality

User Navigation

Intuitive Chat Access

Tap to enter conversations
Create new conversations
Access archived chats
Network connectivity indicators

Platform Support: Recent Chats components are available on iOS, Android, React, React Native, and Flutter. On React Native, these screens ship from v4.3.0 as part of AmityUiKitChat, and from v4.3.1 each page can also be rendered on its own inside AmityPageRenderer — see Quick Start. Only pages are exported on React Native; the building-block components shown here (list, bubble, composer, action sheets) aren’t.

Implementation Guide

Chat Home Interface
Chat List
Archived Chat Management
Conversation Creation

Main entry point for chat functionalityThe AmityChatHomePage serves as the central hub for managing and navigating between conversations.

Features

Feature	Description
Chat List Display	Displays a list of available chats for the user
Network Connectivity Indicator	Shows “Waiting for network…” message when device is offline
Create New Conversation	Allows users to create new chat conversations via popup menu
Access Archived Chats	Provides access to archived chats through menu option

Code Examples

Widget chatHomePage() {
  return AmityChatHomePage();
}

<AmityPageRenderer>
  <AmityChatHomePage />
</AmityPageRenderer>

Automatic Management: The chat home page automatically handles real-time updates, sorting, and network connectivity through the underlying SDK.

React Native (v4.3.0+): The chat home page is where AmityUiKitChat opens. It shows unread and mention badges on each chat and lets users swipe a chat to archive it. When push notifications are disabled for the user’s account or for the chat module (for example, by an admin), the list shows a “Push notifications have been disabled by admin” banner.

Core chat conversation listThe ChatListComponent provides a list of chat conversations for the user with real-time updates and navigation capabilities.

Features

Feature	Description
Display Chat Conversations	Shows a list of chat conversations for the user
Real-Time Updates	Automatically updates the chat list with new conversations or changes

Code Examples

Widget chatListComponent() {
  return ChatListComponent();
}

Real-Time Integration: The chat list automatically syncs with the SDK to provide live updates for new messages, conversation changes, and user activity.

Organized archive functionalityComponents for managing archived conversations separately from active chats.

Archived Chat List

The ArchivedChatListComponent provides a dedicated interface for viewing and managing archived conversations.

Features

Feature	Description
Display Archived Chats	Shows a list of archived chat conversations for the user
Organized Chat Management	Helps users manage archived chats separately from active conversations
Customizable Behavior	Extends the base chat list component for flexibility and customization

Code Examples

Widget archivedChatListComponent() {
  return ArchivedChatListComponent();
}

// React Native exports the full archived chats page, not the list component.
<AmityPageRenderer>
  <AmityArchivedChatPage />
</AmityPageRenderer>

New conversation interfaceUser interface for searching users and initiating new chat conversations.

Features

Feature	Description
Search Users	Allows users to search for other users by display name by typing at least 3 characters
User List Display	Displays a list of users matching the search query
Real-Time Search Updates	Updates the user list dynamically as the search query changes
Start New Conversation	Enables users to select a user and start a new chat conversation
Error Handling	Displays appropriate messages for no results or invalid search queries

Code Examples

Widget createConversationPage() {
  return AmityChannelCreateConversationPage();
}

<AmityPageRenderer>
  <AmityChannelCreateConversationPage />
</AmityPageRenderer>

Search Optimization: The search functionality includes built-in debouncing and result optimization handled by the SDK layer.

Sort Order

By default the chat list shows the most recently active chat first. You can sort by the newest message instead, so that joining or leaving a chat does not push it to the top. This option is available on iOS, Android, and Web. Set channel_list_sort_by under feature_flags.chat in your UIKit config:

{
  "feature_flags": {
    "chat": {
      "channel_list_sort_by": "lastMessage"
    }
  }
}

Value	Order
`lastActivity` (default)	Newest activity first: a new message, or a member added, removed, or banned
`lastMessage`	Newest message first. Membership changes do not reorder the list.

Default. A missing key, or any value other than lastMessage, keeps lastActivity. All three tabs (All, Direct, Groups) use the same value.
When it applies. The chat home page reads the value when it builds its channel queries. On iOS and Android a change takes effect the next time the page opens. On Web the chat home stays mounted for the life of the UIKit, so a change takes effect the next time the UIKit is loaded with the new config.
Row time. With lastMessage, each row shows the time of its newest message (or the chat’s creation time if it has none), so a membership change neither moves a row nor changes its time. With lastActivity, rows keep showing the last activity time.
Live order. The list reorders as messages arrive. When the current user sends a message, that chat moves to the top right away.
Backend support. lastMessage needs backend support for your network. If it is not available, the page shows the error state (“Couldn’t load chats”) in place of the list, with no call to action. The UIKit does not fall back to lastActivity. Set the value back to lastActivity until it is available.

To sort a channel list in your own UI, see Query Channels.

Component Management Strategies

Navigation Flow Design

Visual Hierarchy Strategy

Optimizing chat list presentationDesign clear visual indicators for unread messages, archived conversations, and different conversation types. Use consistent styling patterns to help users quickly identify and navigate to their desired conversations.

User Action Integration

Implementing intuitive interactionsConfigure swipe actions, tap behaviors, and menu options to provide users with quick access to common chat management actions while maintaining a clean and uncluttered interface.

Best Practices

Interface Customization

Tailoring the chat list experienceCustomize the appearance of chat previews, timestamps, and unread indicators to match your app’s design system. Focus on readability and clear visual hierarchy to enhance user experience.

User Flow Optimization

Streamlining chat discoveryDesign clear pathways for users to find existing conversations, create new ones, and manage their chat organization. Consider user habits and common usage patterns when planning the interface.

Responsive Design

Ensuring cross-device compatibilityOptimize the chat list interface for different screen sizes and orientations. Ensure touch targets are appropriately sized and that the interface remains usable across various device configurations.

Conversation Chat

Individual Chats Navigate to conversation interfaces

Group Chat

Multi-user Chats Roles & member tools

Live Chat

Streaming Events High-volume interaction

Implementation Strategy: Start with AmityChatHomePage as your main chat interface, then add ArchivedChatListComponent and AmityChannelCreateConversationPage as needed to provide complete chat management functionality.

Powered by

Getting Started

Customization

Components

Release Notes

Support

Recent Chats (Chat List)

Feature Overview

Channel Management

User Navigation

Implementation Guide

Features

Code Examples

Features

Code Examples

Archived Chat List

Features

Code Examples

Features

Code Examples

Sort Order

Component Management Strategies

Best Practices

Conversation Chat

Group Chat

Live Chat

​Feature Overview

Channel Management

User Navigation

​Implementation Guide

​Features

​Code Examples

​Features

​Code Examples

​Archived Chat List

​Features

​Code Examples

​Features

​Code Examples

​Sort Order

​Component Management Strategies

​Best Practices

​Related Features

Conversation Chat

Group Chat

Live Chat

Feature Overview

Implementation Guide

Features

Code Examples

Features

Code Examples

Archived Chat List

Features

Code Examples

Features

Code Examples

Sort Order

Component Management Strategies

Best Practices

Related Features