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:
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
Property | Type | Description |
---|---|---|
showBackArrow | boolean | Determines whether the back arrow is displayed. |
editPostHeading | string | Text displayed as the heading when editing an existing post. |
createPostHeading | string | Text displayed as the heading when creating a new post. |
rightComponent | ReactNode | Custom component for the right side of the header, typically a button for saving or posting content. |
subHeading | string | Optional subheading text displayed below the main heading. |
backIcon | LMIconProps | Custom icon for the back arrow, if provided. |
subHeadingTextStyle | TextStyle | Custom style for the subheading text. |
headingTextStyle | TextStyle | Custom style for the main heading text. |
headingViewStyle | ViewStyle | Custom 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;
- Use the
LMCreatePostHeader
or your own custom component with all other create post components as a child of theCreatePost
component in the relevant screens: