Search Messages

import React, { useCallback } from 'react';
import { View, StyleSheet, BackHandler, Platform } from 'react-native';
import { useRoute, useNavigation } from '@react-navigation/native';
import {
  CometChatSearch,
  useTheme,
} from '@cometchat/chat-uikit-react-native';
import { CometChat } from '@cometchat/chat-sdk-react-native';

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

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

  // Handle conversation click from search results
  const handleConversationClicked = useCallback(
    (conversation: CometChat.Conversation, searchKeyword?: string) => {
      const conversationWith = conversation.getConversationWith();

      if (conversationWith instanceof CometChat.User) {
        navigation.navigate('Messages', {
          user: conversationWith,
          searchKeyword,
        });
      } else if (conversationWith instanceof CometChat.Group) {
        navigation.navigate('Messages', {
          group: conversationWith,
          searchKeyword,
        });
      }
    },
    [navigation]
  );

  // Handle message click from search results
  const handleMessageClicked = useCallback(
    async (message: CometChat.BaseMessage, searchKeyword?: string) => {
      const messageReceiver = message.getReceiver();
      const parentMessageId = message.getParentMessageId();

      let targetUser: CometChat.User | undefined;
      let targetGroup: CometChat.Group | undefined;

      if (messageReceiver instanceof CometChat.User) {
        const sender = message.getSender();
        const loggedInUser = await CometChat.getLoggedinUser();

        if (sender.getUid() === loggedInUser?.getUid()) {
          targetUser = messageReceiver;
        } else {
          targetUser = sender;
        }
      } else if (messageReceiver instanceof CometChat.Group) {
        targetGroup = messageReceiver;
      }

      // If message is in a thread, navigate to thread view
      if (parentMessageId) {
        try {
          const parentMessage = await CometChat.getMessageDetails(parentMessageId);
          if (parentMessage) {
            navigation.navigate('ThreadView', {
              message: parentMessage,
              user: targetUser,
              group: targetGroup,
              highlightMessageId: String(message.getId()),
            });
            return;
          }
        } catch (e) {
          console.error('Failed to fetch parent message', e);
        }
      }

      // Navigate to messages screen with highlight
      if (targetUser) {
        navigation.navigate('Messages', {
          user: targetUser,
          messageId: String(message.getId()),
          searchKeyword,
        });
      } else if (targetGroup) {
        navigation.navigate('Messages', {
          group: targetGroup,
          messageId: String(message.getId()),
          searchKeyword,
        });
      }
    },
    [navigation]
  );

  // Determine placeholder text
  let searchPlaceholder = 'Search';
  if (user?.getName()) {
    searchPlaceholder = `Search in ${user.getName()}`;
  } else if (group?.getName()) {
    searchPlaceholder = `Search in ${group.getName()}`;
  }

  return (
    <View style={styles.container}>
      <CometChatSearch
        onBack={handleBack}
        hideBackButton={false}
        onConversationClicked={handleConversationClicked}
        onMessageClicked={handleMessageClicked}
        uid={user?.getUid()}
        guid={group?.getGuid()}
        searchPlaceholder={searchPlaceholder}
        messagesRequestBuilder={
          new CometChat.MessagesRequestBuilder().setLimit(30)
        }
        conversationsRequestBuilder={
          new CometChat.ConversationsRequestBuilder().setLimit(30)
        }
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

export default SearchMessagesScreen;

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

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

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

  const handleSearchPress = () => {
    navigation.navigate('SearchMessages', { user, group });
  };

  return (
    <View style={{ flex: 1 }}>
      <CometChatMessageHeader
        user={user}
        group={group}
        AppBarOptions={() => (
          <TouchableOpacity onPress={handleSearchPress}>
            {/* Search icon */}
          </TouchableOpacity>
        )}
      />
      
      <CometChatMessageList
        user={user}
        group={group}
        goToMessageId={messageId}
        searchKeyword={searchKeyword}
      />
      
      <CometChatMessageComposer user={user} group={group} />
    </View>
  );
};

<CometChatMessageList
  user={user}
  group={group}
  goToMessageId={messageId}      // Scroll to specific message
  searchKeyword={searchKeyword}  // Highlight matching text
/>

import { createNativeStackNavigator } from '@react-navigation/native-stack';
import MessagesScreen from './screens/MessagesScreen';
import SearchMessagesScreen from './screens/SearchMessagesScreen';
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="SearchMessages" component={SearchMessagesScreen} />
      <Stack.Screen name="ThreadView" component={ThreadView} />
    </Stack.Navigator>
  );
};