Skip to main content

Network Chat Screen

Overview

The NetworkChat screen is the central hub for users in the LikeMinds chat application, displaying a dynamic feed of messages, posts, and updates from connections in your network.

Github Files:

LMFeedMediaPreviewScreen

UI Components

Usage Example

  • In your App.tsx, create a Stack.Navigatorin the NavigationContainer wrapped byLMOverlayProvider.
  • Add the LMChatNetworkChatroomsScreen as a Stack screen in your NavigationContainer.
  • Use setHomeFeedStyle method on the STYLES class to apply UI customisations
App.tsx
import { Themes, NetworkChatScreen, ScreenName } 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.NETWORK} // // pass the sdk theme based on the Themes enum
>
<NavigationContainer ref={navigationRef} independent={true}>
<Stack.Navigator screenOptions={{ headerShown: false }}>
<Stack.Screen name={ScreenName.NetworkChatScreen} component={NetworkChatScreen} />
</Stack.Navigator>
</NavigationContainer>
</LMOverlayProvider>
);
};