Skip to main content

Universal Feed

Overview

UniversalFeed displays a universal feed screen with a topic selection bar and a list of posts, create post button.

GitHub files

LMUniversalFeedScreen

UI Components

The Universal Feed screen serves as a parent component, allowing you to incorporate as many child components as necessary, including your own custom components. Here are a few components that can be utilized to enhance the universal feed.

Props

These props allow interaction handling and feature customization for the UniversalFeed component:

Interaction Callbacks

Prop NameTypeDescription
postLikeHandlerPropFunctionTriggered when a post is liked. Receives the post id.
savePostHandlerPropFunctionTriggered when a post is saved or unsaved. Receives id and saved.
selectPinPostPropFunctionTriggered to pin or unpin a post. Receives id and pinned status.
selectEditPostPropFunctionAllows editing of a post. Receives id and post data.
onSelectCommentCountPropFunctionTriggered when the comment count is tapped. Receives post id.
onTapLikeCountPropsFunctionTriggered when the like count is tapped. Receives post id.
handleDeletePostPropsFunctionAllows deletion of a post. Receives visible and postId.
handleReportPostPropsFunctionHandles reporting of a post. Receives post id.
newPostButtonClickPropsFunctionCustom action for the new post button.
onOverlayMenuClickPropFunctionCustom action for overlay menu clicks. Receives event, menu items, post id.
onTapNotificationBellPropFunctionTriggered when the notification bell is tapped.
onSharePostClickedFunctionHandles sharing of a post. Receives post id.
onSubmitButtonClickedFunctionCustom action for poll submission.
onAddPollOptionsClickedFunctionCustom action for adding poll options.
onPollOptionClickedFunctionTriggered when a poll option is clicked.
onCancelPressPropFunctionAction when cancel button is pressed for upload retry.
onRetryPressPropFunctionAction when retry button is pressed for upload retry.
onSearchIconClickPropFunctionAction triggered when the search icon is clicked.

Feature Configuration

Prop NameTypeDescriptionRequired
isHeadingEnabledbooleanEnables or disables the heading display.
isTopResponsebooleanShows the top response if true.
hideTopicsViewbooleanHides the topic selection view in the feed.

Styling Customizations

The STYLES class allows appearance customization for the UniversalFeed via universalFeedStyle.

Style PropTypeDescription
newPostButtonStyleViewStyleStyle for the new post button.
newPostButtonTextTextStyleStyle for the new post button text.
newPostIconLMImagePropsIcon used in the new post button.
screenHeaderLMHeaderPropsStyle and props for the screen header.

Usage Example

Step 1: Create the Feed Screen Component

  • Create a CustomFeedScreen file to define your custom feed logic and UI using hooks and context from the LikeMinds Feed SDK.
import React, { useEffect, useState } from "react";
import {
LMCreatePostButton,
LMFilterTopics,
LMPostUploadIndicator,
LMUniversalFeedHeader,
PostsList,
UniversalFeed,
usePostListContext,
useUniversalFeedContext,
} from "@likeminds.community/feed-rn-core";
import { Alert, Platform, Share } from "react-native";
import { useAppSelector } from "@likeminds.community/feed-rn-core/store/store";
import STYLES from "@likeminds.community/feed-rn-core/constants/Styles";
import { useNavigation } from "@react-navigation/native";

const CustomFeedScreen = () => {
const {
handleEditPost,
handlePinPost,
} = usePostListContext();

const mappedTopics = useAppSelector((state) => state.feed.mappedTopics);
const navigation = useNavigation();

const customHandleEdit = (postId, post) => {
console.log("before edit select", post);
handleEditPost(postId, post);
console.log("after edit select", postId);
};
const customHandlePin = (postId, pinned) => {
console.log("before pin select");
handlePinPost(postId, pinned);
console.log("after pin select", postId, pinned);
};

const universaleFeedStyles = {
newPostButtonStyle: {
backgroundColor: "red",
border: 1,
},
screenHeader: {
heading: "LikeMinds",
subHeading: "Welcome to LM Documentation",
onBackPress: () => navigation.goBack(),
},
};

// universal feed screen customisation
if (universaleFeedStyles) {
STYLES.setUniversalFeedStyles(universaleFeedStyles);
}

return (
<UniversalFeed
selectEditPostProp={(id, post) => customHandleEdit(id, post)}
selectPinPostProp={(id, pinned) => customHandlePin(id, pinned)}
isHeadingEnabled={true}
isTopResponse={true}
>
<LMUniversalFeedHeader />
<LMFilterTopics />
<LMPostUploadIndicator />
<PostsList items={mappedTopics} />
<LMCreatePostButton />
</UniversalFeed>
);
};

export default CustomFeedScreen;

Step 2: Wrap the Screen with Context Providers

  • Create a FeedWrapper component that wraps your custom feed screen with UniversalFeedContextProvider and PostListContextProvider.
import CustomFeedScreen from "<<path_to_FeedScreen.tsx>>";
import {
PostListContextProvider,
UniversalFeedContextProvider,
} from "@likeminds.community/feed-rn-core";

const FeedWrapper = ({ navigation, route }) => {
return (
<UniversalFeedContextProvider navigation={navigation} route={route}>
<PostListContextProvider navigation={navigation} route={route}>
<CustomFeedScreen />
</PostListContextProvider>
</UniversalFeedContextProvider>
);
};

export default FeedWrapper;

Step 3: Add the Custom Screen in App.tsx

  • In your App.tsx, create a Stack.Navigator in the NavigationContainer wrapped by LMOverlayProvider.
  • Add FeedWrapper as a Stack screen in your NavigationContainer.
import {
UNIVERSAL_FEED,
LMOverlayProvider,
} from "@likeminds.community/feed-rn-core";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { FeedWrapper } from "<<path_to_CustomisedUniversalFeed.tsx>>";

export const App = () => {
const Stack = createNativeStackNavigator();
return (
<LMOverlayProvider
myClient={myClient} // pass in the LMFeedClient 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
>
<NavigationContainer ref={navigationRef} independent={true}>
<Stack.Navigator screenOptions={{ headerShown: true }}>
<Stack.Screen name={UNIVERSAL_FEED} component={FeedWrapper} />
</Stack.Navigator>
</NavigationContainer>
</LMOverlayProvider>
);
};