Channel

The Channel screen is like the main hub of a chatroom where users can see messages, reply to them, react, and do more. It shows everything in the chatroom, including the header, the list of messages, and the input box for sending messages. To make it work, you just need to provide the ID of the chatroom as a required parameter.

Props Required

chatroomId: string; // id of the chatroom to be displayed

Code snippet

import {
  Chat,
  ChatRoom,
  ChatroomHeader,
  MessageList,
  MessageInput,
  ChatroomTopic,
} from "@likeminds.community/chat-rn-core";
import React from "react";

function ChatroomScreenWrapper() {
  const showChatroomTopic = true;
  return (
    <Chat>
      <ChatRoom>
        {/* ChatroomHeader */}
        <ChatroomHeader
          showThreeDotsOnHeader={true}
          showThreeDotsOnSelectedHeader={true}
        />

        {/* Chatroom Topic */}
        <ChatroomTopic />

        {/* Message List */}
        <MessageList showChatroomTopic={showChatroomTopic} />

        {/* Input Box Flow */}
        <MessageInput />
      </ChatRoom>
    </Chat>
  );
}

export default ChatroomScreenWrapper;

import { ChatRoom } from "@likeminds.community/chat-rn-core";
import { NavigationContainer } from "@react-navigation/native";
import ChatroomScreenWrapper from "./path_to_above_component";

function App() {
  return (
    // replace NavigationContainer with your navigation container
    <NavigationContainer independent={true}>
      <Stack.Navigator>
        <Stack.Screen
          name={"Chatroom"}
          component={ChatroomScreenWrapper}
          initialParams={{
            chatroomID: chatroomId,
          }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}