Skip to main content

Topic Selection

Overview

LMFeedTopicSelectionScreen provides a user interface for selecting topics. It displays a list of topics in a table view, with the ability to search and filter the topics.

GitHub files

LMFeedTopicSelectionScreen

Styling Customizations

The STYLES class allows you to customize the appearance of the LMPostContent. You can set the styles in topicsStyle in STYLES.

Usage Example

Step 1: Create Custom Screen and Wrapper

  • In your app, create a TopicFeedWrapper file which will wrap the TopicFeed within the CreatePostContextProvider along with UniversalFeedContextProvider.
import {
TopicFeed,
UniversalFeedContextProvider,
} from "@likeminds.community/feed-rn-core";
import { CreatePostContextProvider } from "@likeminds.community/feed-rn-core/context/createPostContext";

const TopicFeedWrapper = ({ navigation, route }) => {
const topicsStyle = {
allTopicPlaceholder: "Type in something...",
topicListStyle: {
color: "red",
},
};

// topic feed screen customisation
if (topicsStyle) {
STYLES.setTopicsStyles(topicsStyle);
}
return (
<UniversalFeedContextProvider navigation={navigation} route={route}>
<CreatePostContextProvider navigation={navigation} route={route}>
<TopicFeed />
</CreatePostContextProvider>
</UniversalFeedContextProvider>
);
};

export default TopicFeedWrapper;

Step 2: Add the Custom Screen in App.tsx

  • In your App.tsx, create a Stack.Navigatorin the NavigationContainer wrapped by LMOverlayProvider.
  • Add TopicFeedWrapper as a Stack screen in your NavigationContainer.
import {
TOPIC_FEED,
LMOverlayProvider,
STYLES,
} from "@likeminds.community/feed-rn-core";
import { TopicFeedWrapper } from "<<path_to_TopicFeedWrapper.tsx>>";
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 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: false }}>
<Stack.Screen name={TOPIC_FEED} component={TopicFeedWrapper} />
</Stack.Navigator>
</NavigationContainer>
</LMOverlayProvider>
);
};