Message Reactions & Replies

SDK v7.x · Last verified March 2026 · iOS · Android · Web · Flutter

Speed run — just the code

// React to a message
await ReactionRepository.addReaction({
  referenceType: 'message',
  referenceId: messageId,
  reactionName: '👍',
});

// Reply to a message (parentId creates a thread)
await MessageRepository.createMessage({
  subChannelId: channelId,
  parentId: parentMessageId,    // ← this is what makes it a reply
  data: { text: 'Great point!' },
  dataType: 'text',
});

// Query replies for a message
const replies = MessageRepository.getMessages({
  subChannelId: channelId,
  parentId: parentMessageId,
});

Full walkthrough below ↓

Platform note — code samples below use TypeScript. Every method has an equivalent in the iOS (Swift), Android (Kotlin), and Flutter (Dart) SDKs — see the linked SDK reference in each step.

Reactions turn passive reading into participation. Threaded replies keep side conversations organized without cluttering the main feed. Together they’re the core engagement layer of any chat experience.

Prerequisites: Messages are being sent and received → Sending Messages

Quick Start: React to a Message

import { ReactionRepository } from '@amityco/ts-sdk';

try {
  await ReactionRepository.addReaction({
    referenceType: 'message',
    referenceId: messageId,
    reactionName: '❤️',
  });
} catch (error) {
  console.error('Failed to add reaction:', error);
}

Step-by-Step Implementation

Add and remove reactions

import { ReactionRepository } from '@amityco/ts-sdk';

// Add
await ReactionRepository.addReaction({
  referenceType: 'message',
  referenceId: messageId,
  reactionName: '👍',
});

// Remove
await ReactionRepository.removeReaction({
  referenceType: 'message',
  referenceId: messageId,
  reactionName: '👍',
});

→ Message Reactions

Display reaction counts

Reaction data is available directly on the message object. The Live Collection automatically pushes updates when another user reacts.

// Message object from Live Collection
liveCollection.on('dataUpdated', (messages) => {
  messages.forEach(msg => {
    // reactions is a map of reactionName → count
    const hearts = msg.reactions?.['❤️'] ?? 0;
    const thumbsUp = msg.reactions?.['👍'] ?? 0;
    console.log(`❤️ ${hearts}, 👍 ${thumbsUp}`);
  });
});

For a detailed breakdown (who reacted), query the reaction list:

const reactors = ReactionRepository.getReactions({
  referenceType: 'message',
  referenceId: messageId,
  reactionName: '❤️',        // Optional: filter to one reaction
});

reactors.on('dataUpdated', (items) => {
  const userIds = items.map(r => r.userId);
});

Reply to a message (threading)

Replies use the same createMessage call with an additional parentId. This links the reply to its parent without a separate thread API.

import { MessageRepository } from '@amityco/ts-sdk';

await MessageRepository.createMessage({
  subChannelId: channelId,
  parentId: parentMessageId,   // ← Creates a reply thread
  data: { text: 'I agree with this!' },
  dataType: 'text',
});

→ Reply to a Message

Query replies for a parent message

Pass parentId to getMessages to retrieve only the replies in a thread.

const thread = MessageRepository.getMessages({
  subChannelId: channelId,
  parentId: parentMessageId,   // Only replies to this message
  limit: 10,
});

thread.on('dataUpdated', (replies) => {
  console.log(`${replies.length} replies in thread`);
});

The parent message itself contains a replyCount property that you can use to display a “View N replies” button without loading the full thread.

Connect to Moderation & Analytics

Flag inappropriate reactions

Users can report messages that have received reactions containing offensive content. Reports appear in Admin Console → Content Moderation → Flagged Items.

Webhook: reaction events

reaction.added and reaction.removed webhook events let you track engagement patterns or sync reaction data to your analytics pipeline.→ Webhook Events

Common Mistakes

Duplicating reactions — A user can add the same reactionName only once per message. Calling addReaction a second time with the same name is a no-op (not an error). Track local state to style the “active” reaction button correctly.

Querying root messages with parentId set — When querying the main channel feed, always set parentId: null (or omit it). Otherwise you’ll get only replies and miss all top-level messages.

Best Practices

Limit your reaction emoji set

Curate a small emoji picker (6–8 options) rather than exposing the full Unicode emoji keyboard. This speeds up rendering and keeps reaction data cleaner. Store allowed reactions in your app’s config or in the channel’s metadata.

Show reply count before expanding

Use the replyCount field on the parent message to render a “View 3 replies” button. Only query the thread on demand — lazy loading keeps the initial message feed fast.

Nest replies only one level deep

social.plus supports single-level threading (replies to a message). Deeply nested threads hurt UX on mobile. Flatten all replies to one level even if your users try to reply-to-a-reply.

Dive deeper: Messaging API Reference has full parameter tables, method signatures, and platform-specific details for every API used in this guide.

Next Steps

Unread Counts

Surface unread message and mention badges across channels.

Rich Media Messages

Let users share images, files, and audio in addition to reactions.

Chat Moderation

Moderate inappropriate reactions and replies from the admin console.

Overview

Build Your Community

Create & Share Content

Communication

Engage & Grow

Livestream

Monetize

Message Reactions & Replies

Quick Start: React to a Message

Step-by-Step Implementation

Connect to Moderation & Analytics

Common Mistakes

Best Practices

Next Steps

Unread Counts

Rich Media Messages

Chat Moderation

​Quick Start: React to a Message

​Step-by-Step Implementation

​Connect to Moderation & Analytics

​Common Mistakes

​Best Practices

​Next Steps

Unread Counts

Rich Media Messages

Chat Moderation

Quick Start: React to a Message

Step-by-Step Implementation

Connect to Moderation & Analytics

Common Mistakes

Best Practices

Next Steps