Skip to main content

Community Hybrid Chat Screen

Overview

The CommunityHybridChat screen is the central hub for users in the LikeMinds chat application, displaying a dynamic feed of messages, posts, and updates from connections and groups. It renders both group feeds and direct messages (DM) feeds and hideDmTab key, allowing users to easily interact with content and stay updated on community activities.

Github Files:

LMFeedMediaPreviewScreen

UI Components

Usage Example

  • In your App.tsx, create a Stack.Navigatorin the NavigationContainer wrapped byLMOverlayProvider.
  • Add the LMChatHybridChatroomsScreen as a Stack screen in your NavigationContainer.
  • Use setHomeFeedStyle method on the STYLES class to apply UI customisations
App.tsx
import { Themes, ScreenName, 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();

// Customisation UI styling
STYLES.setHomeFeedStyle({
avatar: {
borderRadius: 10,
},
title: {
color: 'blue',
fontSize: 20
},
lastConversation: {
fontSize: 20
},
lastConversationTime: {
fontSize: 16
}
})

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>
);
};