Skip to main content

LMCreatePostHeading

The LMCreatePostHeading component is responsible for the heading section of the post creation screen. It allows users to input a heading for the post, displaying a character count and providing conditional rendering based on the isHeadingEnabled context.

GitHub File:

LMFeedPostContent

Overview​

LMCreatePostHeading provides the following functionality:

  • Displays an input field for the post heading with a character limit.
  • Shows a separator line and character counter.
  • Supports dark/light theme modes.
  • The heading input section is conditionally rendered based on the isHeadingEnabled context.

Props​

The component supports callback and properties through context values, which are configured within the CreatePost component.

PropertyTypeDescription
isHeadingEnabledbooleanDetermines if the heading input section and related UI elements are shown.

Example Usage​

To use this component, make sure the CreatePost context provider are properly set up in the parent component.

Step 1: Create Custom Post Create Screen​

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

const CustomCreatePostScreen = () => {
  return (
    <CreatePost isHeadingEnabled={true} >
      <LMCreatePostHeading />
    </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>
}