Skip to main content

Explore Feed Screen

Overview

The ExploreFeed screen displays a feed of posts or conversations in the LikeMinds chat application. It allows users to browse through various content, interact with posts, and explore trending or recommended topics. This screen serves as a discovery hub, providing an engaging way for users to find new conversations or communities to join.

GitHub File:

LMFeedMediaPreviewScreen

UI Components

Props

PropertyTypeDescription
backIconPathstringPath to the back icon for navigation.
filterIconPathstringPath to the filter icon used in the feed.
participantsIconPathstringPath to the participants icon used to display participants.
totalMessagesIconPathstringPath to the total messages icon in the chatroom.
joinButtonPathstringPath to the button icon for joining a chatroom.
joinedButtonPathstringPath to the button icon for a joined chatroom.

Styling Customisation

The ExploreFeed screen can be customised using the exploreChatroomStyles

Usage Example

  • In your App.tsx, create a Stack.Navigatorin the NavigationContainer wrapped byLMOverlayProvider.
  • Create exploreChatroomStyle for customisation and call the setExploreChatroomStyle to set the customisation.
  • Add ExploreFeed as a Stack screen in your NavigationContainer.
App.tsx
import {
EXPLORE_FEED,
ExploreFeed,
STYLES,
Themes
} 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();

// Provide Custom UI Styling here
const exploreChatroomStyle = {
header: {
color: "red",
},
filterHeader: {
color: "blue",
},
};

if (exploreChatroomStyle) {
STYLES.setExploreChatroomStyle(exploreChatroomStyle);
}

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={<"SDK_THEME">} // pass the sdk theme based on the Themes enum
>
<NavigationContainer ref={navigationRef} independent={true}>
<Stack.Navigator screenOptions={{ headerShown: false }}>
<Stack.Screen
name={EXPLORE_FEED}
component={ExploreFeed}
// pass your custom icons here
initialParams={{
backIconPath: "",
filterIconPath: "",
participantsIconPath: "",
totalMessagesIconPath: "",
joinButtonPath: "",
joinedButtonPath: "",
}}
/>
</Stack.Navigator>
</NavigationContainer>
</LMOverlayProvider>
);
};