Community Chat Screen

Overview

The CommunityChat screen is the central hub for users in the LikeMinds chat application, displaying a dynamic feed of messages, posts, and updates from all groups.

UI Components

• ChatroomItem

Data Variables

• user: It stores the logged-in user data.
• tokens: This screen does all the initialisation API calls, and store tokens received in response.
• chatrooms: It holds the chatrooms data which is then rendered as list of chatrooms.

Usage Example

• In your App.tsx, create a Stack.Navigatorin the NavigationContainer wrapped byLMOverlayProvider.
• Add the CommunityChatrooms as a Stack screen in your NavigationContainer.

App.tsx

import { Themes, CommunityChatScreen } from "@likeminds.community/chat-rn-core";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";

export const App = () => {
  const Stack = createNativeStackNavigator();
  return (
    <LMOverlayProvider
      myClient={myClient} // pass in the LMChatClient created
      apiKey={apiKey} // pass in the API Key generated
      userName={userName} // pass in the logged-in user's name
      userUniqueId={userUniqueID} // pass in the logged-in user's uuid
      theme={Themes.COMMUNITY_HYBRID} // // pass the sdk theme based on the Themes enum
    >
      <NavigationContainer ref={navigationRef} independent={true}>
        <Stack.Navigator screenOptions={{ headerShown: false }}>
          <Stack.Screen name={ScreenName.CommunityChatScreen} component={CommunityChatScreen} />
        </Stack.Navigator>
      </NavigationContainer>
    </LMOverlayProvider>
  );
};