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:
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
Property | Type | Description |
---|---|---|
customText | string | Custom text displayed on the button (e.g., "Ask Question"). |
Styling Customisations
These styling customisations can be applied through the setUniversalFeedStyles
on the STYLES
class
Property | Type | Description |
---|---|---|
newPostButtonStyle | ViewStyle | Styles for the button’s background and layout, applied via universalFeedStyle . |
newPostButtonText | TextStyle | Styles for the text on the button, managed via the theme context. |
newPostIcon | ImageProps | Styles 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>
)
}
- Use the
LMCreatePostButton
or your own custom component with all other feed components as a child of theUniversalFeed
component in the relevant screens: