LMCreatePostTopics

LMCreatePostTopics allows users to view and select topics for their post. The component dynamically updates based on the context values and selected topics from Redux state. It also integrates with an external API to fetch topics when necessary.

• Displays selected topics with custom styles.
• Allows navigation to a topic feed to explore additional topics.
• Fetches and filters topics based on their availability and enablement state.
• Supports conditional rendering based on whether predefined topics exist and the visibility settings defined in context.

GitHub File:

• LMCreatePostTopics.tsx

---

Props

Customization Props

The component supports the following customization through context, these values need to be passed through CreatePost component.

Property	Type	Description
hideTopicsViewCreate	boolean	Flag to hide the topics view when creating a post.
hideTopicsViewEdit	boolean	Flag to hide the topics view when editing a post.

Styling Customizations

Property	Type	Description
selectTopicPlaceholder	string	Placeholder text for the "Select Topics" button.
selectedTopicsStyle	ViewStyle	Custom styles for the displayed selected topics.
plusIconStyle	ImageStyle	Custom style for the "+" icon used to add new topics.

To see all the properties, visit TopicsStyle

Usage Example

Step 1: Create Custom Screen

import React, { useEffect } from "react";
import { View } from "react-native";
import { STYLES, LMCreatePostTopics, CreatePost } from "@likeminds.community/feed-rn-core";

const CustomCreatePostScreen = () => {
  // to customise ui
  useEffect(() => {
    STYLES.setTopicsStyles({
      selectedTopicsStyle: {
        color: "red",
      },
    });
  }, []);

  return (
    <CreatePost 
      hideTopicsViewCreate={false}
      hideTopicsViewEdit={false}
    >
      <LMCreatePostTopics />
    </CreatePost>
  );
};

export default CustomCreatePostScreen;

Step 2: Wrap with Context Provider

import React from "react";
import { View } from "react-native";
import {
  CreatePostContextProvider,
  UniversalFeedContextProvider
} from "@likeminds.community/feed-rn-core";
import CustomCreatePostScreen from "<path_to_the_file>"

export default const CustomCreatePostWrapper = () => {
    <UniversalFeedContextProvider navigation={navigation} route={route}>
      <CreatePostContextProvider navigation={navigation} route={route}>
        <CustomCreatePostScreen />
      </CreatePostContextProvider>
    </UniversalFeedContextProvider>
}

• Use the LMCreatePostTopics or your own custom component with all other create post components as a child of the CreatePost component in the relevant screens:
  • Create Post Screen