Threaded Messages

Implement threaded message replies with parent context, reply list, and focused thread composer in CometChat React Native UI Kit.

AI Integration Quick Reference

Field	Value
Package	@cometchat/chat-uikit-react-native
Key components	CometChatThreadHeader, CometChatMessageList, CometChatMessageComposer, CometChatMessageHeader
Init	CometChatUIKit.init(UIKitSettings) then CometChatUIKit.login("UID")
Entry point	Pass parentMessageId prop to CometChatMessageList and CometChatMessageComposer
Sample app	GitHub
Related	Message List · Thread Header · All Guides

Threaded messages let users create sub-conversations by replying to specific messages in group chats. This reduces clutter and keeps discussions focused.

Before starting, complete the Getting Started guide.

---

Components

Component / Class	Role
CometChatThreadHeader	Displays parent message context
CometChatMessageList	Shows messages filtered by parentMessageId
CometChatMessageComposer	Input for composing threaded replies

---

Integration Steps

1. Thread View Screen

Create a dedicated screen for threaded messages that receives the parent message via navigation params.

import React, { useCallback } from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import { useRoute, useNavigation } from '@react-navigation/native';
import {
  CometChatThreadHeader,
  CometChatMessageList,
  CometChatMessageComposer,
  useTheme,
  useCometChatTranslation,
  Icon,
} from '@cometchat/chat-uikit-react-native';
import { CometChat } from '@cometchat/chat-sdk-react-native';

const ThreadView = () => {
  const route = useRoute();
  const navigation = useNavigation();
  const theme = useTheme();
  const { t } = useCometChatTranslation();
  
  const { message, user, group } = route.params || {};

  const handleBack = useCallback(() => {
    navigation.goBack();
  }, [navigation]);

  return (
    <View style={{ backgroundColor: theme.color.background1, flex: 1 }}>
      {/* Custom Header */}
      <View style={styles.headerStyle}>
        <TouchableOpacity onPress={handleBack}>
          {/* Back icon */}
        </TouchableOpacity>
        <View style={styles.textStyle}>
          <Text style={[theme.typography.heading1.bold, { color: theme.color.textPrimary }]}>
            {t('THREAD')}
          </Text>
          <Text
            style={[theme.typography.caption1.regular, { color: theme.color.textSecondary }]}
            numberOfLines={1}
          >
            {user ? user.getName() : group?.getName()}
          </Text>
        </View>
      </View>

      {/* Thread Header - shows parent message */}
      <CometChatThreadHeader parentMessage={message} />

      {/* Threaded Message List */}
      <View style={{ flex: 1 }}>
        <CometChatMessageList
          user={user}
          group={group}
          parentMessageId={message.getId().toString()}
        />
      </View>

      {/* Message Composer for Thread */}
      <CometChatMessageComposer
        user={user}
        group={group}
        parentMessageId={message.getId()}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  headerStyle: {
    paddingVertical: 10,
    paddingLeft: 10,
    flexDirection: 'row',
  },
  textStyle: {
    paddingLeft: 10,
    alignItems: 'flex-start',
  },
});

export default ThreadView;

---

2. Trigger Thread View from Messages

In your main messages screen, handle the onThreadRepliesPress callback to navigate to the thread view.

import React from 'react';
import { View } from 'react-native';
import { useNavigation } from '@react-navigation/native';
import {
  CometChatMessageHeader,
  CometChatMessageList,
  CometChatMessageComposer,
} from '@cometchat/chat-uikit-react-native';
import { CometChat } from '@cometchat/chat-sdk-react-native';

interface MessagesScreenProps {
  user?: CometChat.User;
  group?: CometChat.Group;
}

const MessagesScreen: React.FC<MessagesScreenProps> = ({ user, group }) => {
  const navigation = useNavigation();

  const handleThreadRepliesPress = (message: CometChat.BaseMessage) => {
    navigation.navigate('ThreadView', {
      message,
      user,
      group,
    });
  };

  return (
    <View style={{ flex: 1 }}>
      <CometChatMessageHeader user={user} group={group} />
      
      <CometChatMessageList
        user={user}
        group={group}
        onThreadRepliesPress={handleThreadRepliesPress}
      />
      
      <CometChatMessageComposer user={user} group={group} />
    </View>
  );
};

---

3. Navigation Setup

Configure React Navigation to include the ThreadView screen.

import { createNativeStackNavigator } from '@react-navigation/native-stack';
import MessagesScreen from './screens/MessagesScreen';
import ThreadView from './screens/ThreadView';

const Stack = createNativeStackNavigator();

const AppNavigator = () => {
  return (
    <Stack.Navigator screenOptions={{ headerShown: false }}>
      <Stack.Screen name="Messages" component={MessagesScreen} />
      <Stack.Screen name="ThreadView" component={ThreadView} />
    </Stack.Navigator>
  );
};

---

4. Navigate to Specific Message in Thread

Support navigating to a specific message within a thread using goToMessageId prop.

<CometChatMessageList
  user={user}
  group={group}
  parentMessageId={message.getId().toString()}
  goToMessageId={highlightMessageId} // Optional: scroll to specific message
/>

---

5. Handle Blocked Users in Threads

Show an unblock prompt when the user is blocked instead of the composer.

import React, { useState } from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { CometChat } from '@cometchat/chat-sdk-react-native';
import {
  CometChatMessageComposer,
  CometChatUIEventHandler,
  CometChatUIEvents,
  useTheme,
  useCometChatTranslation,
} from '@cometchat/chat-uikit-react-native';

interface ThreadComposerProps {
  user?: CometChat.User;
  group?: CometChat.Group;
  parentMessageId: number;
}

const ThreadComposer: React.FC<ThreadComposerProps> = ({ user, group, parentMessageId }) => {
  const theme = useTheme();
  const { t } = useCometChatTranslation();
  const [localUser, setLocalUser] = useState(user);

  const unblock = async () => {
    if (!localUser) return;
    
    try {
      await CometChat.unblockUsers([localUser.getUid()]);
      const freshUser = await CometChat.getUser(localUser.getUid());
      setLocalUser(freshUser);
      
      CometChatUIEventHandler.emitUserEvent(
        CometChatUIEvents.ccUserUnBlocked,
        { user: freshUser }
      );
    } catch (error) {
      console.error('Error unblocking user:', error);
    }
  };

  if (localUser?.getBlockedByMe()) {
    return (
      <View style={{ alignItems: 'center', padding: 20, backgroundColor: theme.color.background3 }}>
        <Text style={{ color: theme.color.textSecondary, textAlign: 'center' }}>
          {t('BLOCKED_USER_DESC')}
        </Text>
        <TouchableOpacity onPress={unblock} style={{ marginTop: 10 }}>
          <Text style={{ color: theme.color.textPrimary }}>{t('UNBLOCK')}</Text>
        </TouchableOpacity>
      </View>
    );
  }

  return (
    <CometChatMessageComposer
      user={localUser}
      group={group}
      parentMessageId={parentMessageId}
    />
  );
};

---

Thread Subscription

Users can subscribe to a thread to keep getting updates about new replies even when they aren’t actively viewing it, and unsubscribe to stop. This works in both 1-1 and group conversations. The UI Kit surfaces it in two places, both wired out of the box:

• A bell in CometChatMessageHeader, shown once the header is given a parentMessage.
• A subscribe / unsubscribe option in the message options of CometChatMessageList.

Both reflect the current subscription state, flip it optimistically on tap, and show a message if the server rejects the change. No wiring is required to make them work.

On React Native the bell is on CometChatMessageHeader, not CometChatThreadHeader. The landed design places it in the thread screen’s top bar rather than in the reply-count row, so parentMessage is what puts the header in thread mode and renders it.

import {
  CometChatMessageHeader,
  CometChatMessageList,
  CometChatThreadHeader,
} from "@cometchat/chat-uikit-react-native";

// Top bar — `parentMessage` renders the bell
<CometChatMessageHeader
  user={user}
  group={group}
  parentMessage={parentMessage}
  showBackButton={true}
  onBack={onBack}
/>

// Reply-count row
<CometChatThreadHeader parentMessage={parentMessage} />

// Pass the whole parent message, not just its id — a reply arriving over the socket
// carries no subscription flag, so the list stamps it from the thread's parent.
<CometChatMessageList user={user} group={group} parentMessage={parentMessage} />

Automatic subscription

Beyond the manual bell and message option, the UI Kit subscribes a user to a thread automatically in a few cases, so people keep getting updates on threads they are actually part of — without having to remember to follow them:

• Sending a message subscribes you to its thread. Sending a reply inside a thread subscribes you to that thread as well.
• Being @mentioned in a reply subscribes you, whether the mention is added on a fresh reply or introduced by an edit.
• A reply from someone else that does not mention you does not subscribe you. You are only pulled in when you author something in the thread or you are mentioned.

These rules apply in real time and across devices, and a change is mirrored to both surfaces whether or not the thread screen is open.

A deliberate unsubscribe is remembered and survives a reload, but sending another message in that thread, or being mentioned in it again, re-subscribes you.

Reacting to changes

Pass onThreadSubscriptionChange to the message header to run your own logic when the user subscribes or unsubscribes:

<CometChatMessageHeader
  user={user}
  group={group}
  parentMessage={parentMessage}
  onThreadSubscriptionChange={(subscribed) =>
    console.log(subscribed ? "Subscribed to thread" : "Unsubscribed from thread")
  }
/>

Hiding the controls

Each surface is hidden independently — an integrator may want one and not the other.

• threadSubscriptionVisibility on CometChatMessageHeader removes the bell.
• hideThreadSubscriptionOption on CometChatMessageList removes the message option.

Feature Matrix

Feature	Component / Prop
Display parent message	CometChatThreadHeader with parentMessage prop
Show thread replies	CometChatMessageList with parentMessageId prop
Compose thread reply	CometChatMessageComposer with parentMessageId prop
Navigate to message	goToMessageId prop on CometChatMessageList
Thread trigger	onThreadRepliesPress callback on CometChatMessageList

---

Next Steps

Message List

Render real-time message threads.

Thread Header

Customize the thread header component.

All Guides

Browse all feature and formatter guides.

Sample App

Full working sample application on GitHub.