Skip to main content

LMCreatePostHeader

The LMCreatePostHeader component provides the header section for the CreatePost screen. It includes a customizable back button, a title, and a "Post" button with conditional logic to handle post creation and editing scenarios.

GitHub File:

LMFeedPostContent

Overview

LMCreatePostHeader offers the following functionality:

  • Displays "Create Post" or "Edit Post" based on whether the user is creating or editing a post.

Styling Customisations

These styling customisations can be applied by calling the setCreatePostStyles on the STYLES class

PropertyTypeDescription
showBackArrowbooleanDetermines whether the back arrow is displayed.
editPostHeadingstringText displayed as the heading when editing an existing post.
createPostHeadingstringText displayed as the heading when creating a new post.
rightComponentReactNodeCustom component for the right side of the header, typically a button for saving or posting content.
subHeadingstringOptional subheading text displayed below the main heading.
backIconLMIconPropsCustom icon for the back arrow, if provided.
subHeadingTextStyleTextStyleCustom style for the subheading text.
headingTextStyleTextStyleCustom style for the main heading text.
headingViewStyleViewStyleCustom style for the container of the heading view.

To see all the properties, visit CreatePostStyleProps.createPostScreenHeader

Example Usage

To use this component, make sure to wrap it within a CreatePost context provider. Here’s an example:

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

const CreatePostScreen = () => {
// to customise ui
useEffect(() => {
STYLES.setCreatePostStyles({
createPostScreenHeader: {
headingTextStyle: { color: "blue" },
editPostHeading: "editing post"
},
});
}, []);

return (
<View style={{ flex: 1 }}>
<LMCreatePostHeader />
{/* Additional CreatePost components */}
</View>
);
};

export default CreatePostScreen;