Skip to main content

LMCreatePostButton

The LMCreatePostButton component provides an interface to initiate the creation of a new post in the feed. This button is customizable, supports dynamic styling, and integrates analytics for post creation tracking.

GitHub File:

LMFeedPostContent

Overview

LMCreatePostButton includes:

  • A customizable button that triggers post creation.
  • An icon and text that are styleable and can be modified for personalized community themes.
  • An integration with LMFeedAnalytics for tracking when the post creation process starts.

Props

PropertyTypeDescription
customTextstringCustom text displayed on the button (e.g., "Ask Question").

Styling Customisations

These styling customisations can be applied through the setUniversalFeedStyles on the STYLES class

PropertyTypeDescription
newPostButtonStyleViewStyleStyles for the button’s background and layout, applied via universalFeedStyle.
newPostButtonTextTextStyleStyles for the text on the button, managed via the theme context.
newPostIconImagePropsStyles for the icon, allowing customization of size, color, and other properties.

Integration

To use this component, import it and add it as a child of the UniversalFeed.

Here’s how you integrate LMCreatePostButton within a screen:

Step 1: Create Custom Screen

import React from "react";
import {
LMCreatePostButton,
UniversalFeed,
STYLES,
} from "@likeminds.community/feed-rn-core";

const CustomFeedScreen = () => {
// to customise ui
useEffect(() => {
STYLES.setUniversalFeedStyles({
newPostButtonStyle: {
backgroundColor: "yellow",
},
});
}, []);
return (
<UniversalFeed>
<LMCreatePostButton customText={"add post"} />
{/* Other feed components */}
</UniversalFeed>
);
};

export default FeedScreen;

Step 2: Wrap with context provider

import React from "react";
import {
LMCreatePostButton,
UniversalFeed,
STYLES,
UniversalFeedContextProvider,
PostListContextProvider
} from "@likeminds.community/feed-rn-core";
import CustomFeedScreen from "path_to_the_file";

export default CustomFeedScreenWrapper = () => {
return (
<UniversalFeedContextProvider navigation={navigation} route={route}>
<PostListContextProvider navigation={navigation} route={route}>
<CustomFeedScreen />
</PostListContextProvider>
</UniversalFeedContextProvider>
)
}