Skip to main content

Create/Edit Post

Overview

The CreatePost screen allows users to create posts by adding text, images, videos, and documents. It provides various UI components and functionalities to facilitate the post creation process.

GitHub Files:

LMFeedCreatePostScreen

UI Components

Props

These props allow for customization and interaction handling in the CreatePost screen:

Interaction Callbacks

Prop NameTypeDescription
handleGalleryPropFunctionTriggered when the gallery is accessed. Receives the type of gallery as a string.
handleDocumentPropFunctionTriggered when a document is accessed.
handlePollPropFunctionTriggered when a poll is accessed.
onPostClickPropFunctionTriggered when a post is clicked. Provides post media, links, content, heading, topics, poll, and optionally isAnonymous.
handleScreenBackPressPropFunctionTriggered when the back button is pressed.
handleOnAnonymousPostClickedPropFunctionTriggered when an anonymous post checkbox is clicked. Receives isAnonymous boolean.

Feature Configuration

Prop NameTypeDescriptionRequired
isHeadingEnabledbooleanEnables or disables the heading.
hideTopicsViewCreatebooleanHides the topics view on the create post screen.
hideTopicsViewEditbooleanHides the topics view on the edit post screen.
isAnonymousPostAllowedbooleanAllows creation of anonymous posts if true.
hintTextForAnonymousstringHint text specifically for anonymous posts.

For more callback info, see the callback context source.

Styling Customizations

PropertyTypeDescriptionRequired
userNameTextStyleTextStyleRepresents the style of the username text.
createPostScreenHeaderCreatePostScreenHeaderContains properties for the create post screen header.
attachmentOptionsStyleAttachmentOptionsStyleContains styles for attachment options.✔️
createPostTextInputStyleCreatePostTextInputStyleContains styles for the create post text input.✔️
addMoreAttachmentsButtonAddMoreAttachmentsButtonContains properties for the add more attachments button.✔️

CreatePostScreenHeader

PropertyTypeDescription
showBackArrowbooleanIndicates whether to show the back arrow.
editPostHeadingstringThe heading text when editing a post.
createPostHeadingstringThe heading text when creating a new post.
rightComponentReact.ReactNodeThe component to be displayed on the right side.
subHeadingstringThe subheading text to be displayed.
backIconLMIconPropsRepresents the back icon properties.
subHeadingTextStyleTextStyleRepresents the style of the subheading text.
headingTextStyleTextStyleRepresents the style of the heading text.
headingViewStyleViewStyleRepresents the style of the heading view.

AttachmentOptionsStyle

PropertyTypeDescription
attachmentOptionsViewViewStyleStyle for the attachment options view.
photoAttachmentViewViewStyleStyle for the photo attachment view.
photoAttachmentIconLMIconPropsProperties for the photo attachment icon.
photoAttachmentTextStyleLMTextPropsStyle for the photo attachment text.
videoAttachmentViewViewStyleStyle for the video attachment view.
videoAttachmentIconLMIconPropsProperties for the video attachment icon.
videoAttachmentTextStyleLMTextPropsStyle for the video attachment text.
filesAttachmentViewViewStyleStyle for the files attachment view.
filesAttachmentIconLMIconPropsProperties for the files attachment icon.
filesAttachmentTextStyleLMTextPropsStyle for the files attachment text.

CreatePostTextInputStyle

PropertyTypeDescription
inputTextStyleTextStyleStyle for the input text.
placeholderTextstringText to be displayed when the input is empty.
placeholderTextColorstringColor of the placeholder text.
rightIconObjectProperties for the right icon of the input.
textValueStyleTextStyleStyle for the text value.
mentionTextStyleTextStyleStyle for the mention text.
multilineFieldbooleanIndicates if the input should be multiline.

AddMoreAttachmentsButton

PropertyTypeDescriptionRequired
textLMTextPropsProperties for the text on the button.✔️
iconLMIconPropsProperties for the icon on the button.✔️
onTapFunctionFunction to execute on button tap.✔️
placement"start" or "end"Placement of the icon on the button.✔️
buttonStyleViewStyleStyle for the button.✔️
isClickablebooleanIndicates if the button is clickable.✔️

Usage Example

Step 1: Create the Post Screen Component

  • Create a CreatePostScreen file which defines the UI components and interactions callbacks for creating a post.
import React from "react";
import {
CreatePost,
useCreatePostContext,
} from "@likeminds.community/feed-rn-core";
import {
LMCreatePostAttachmentSelection,
LMCreatePostHeader,
LMCreatePostHeading,
LMCreatePostMedia,
LMCreatePostTextInput,
LMCreatePostTopics,
LMCreatePostUIRender,
LMCreatePostUserTagging,
LMUserProfileSection,
LMCreatePostAnonymousCheckbox
} from "@likeminds.community/feed-rn-core";
import STYLES from "@likeminds.community/feed-rn-core/constants/Styles";

const CreatePostScreen = () => {
const {
handleDocument,
handleGallery,
onPostClick,
} = useCreatePostContext();

const customHandleDocumentProp = () => {
console.log("before document handle");
handleDocument();
console.log("after document handle");
};
const customHandleGalleryProp = (type) => {
console.log("before gallery handle");
handleGallery(type);
console.log("after gallery handle");
};
const customHandleCreatePost = (
allAttachment,
formattedLinkAttachments,
postContentText,
heading,
topics,
poll,
isAnonymous
) => {
console.log("before post click");
onPostClick(
allAttachment,
formattedLinkAttachments,
postContentText,
heading,
topics,
poll,
isAnonymous
);
console.log("after post click");
};

const createPostStyles = {
userNameTextStyle: {
color: "green",
},
createPostScreenHeader: {
subHeading: "LikeMinds",
},
};

// hide create poll button to disable poll creation
const pollStyles = {
hidePoll: true
}

if (pollStyles) {
STYLES.setPollStyle(pollStyles)
}

// customisation with styles
if (createPostStyles) {
// create post screen customisation
STYLES.setCreatePostStyles(createPostStyles);
}

return (
<CreatePost
// callbacks
handleDocumentProp={() => customHandleDocumentProp()}
handleGalleryProp={(type) => customHandleGalleryProp(type)}
onPostClickProp={(
allAttachment,
formattedLinkAttachments,
postContentText,
heading,
topics,
poll,
isAnonymous
) =>
customHandleCreatePost(
allAttachment,
formattedLinkAttachments,
postContentText,
heading,
topics,
poll,
isAnonymous
)
}
// customisation with props
isHeadingEnabled={true}
isAnonymousPostAllowed
>
{/* screen header section*/}
<LMCreatePostHeader />

{/* handles the UI to be rendered for edit post and create post */}
<LMCreatePostUIRender>
{/* user profile section */}
<LMUserProfileSection />

{/* Anonymous post checkbox */}
<LMCreatePostAnonymousCheckbox/>

{/* post topics section */}
<LMCreatePostTopics />

{/* post heading section */}
<LMCreatePostHeading />

{/* text input field */}
<LMCreatePostTextInput />

{/* users tagging list */}
<LMCreatePostUserTagging />

{/* selected media section */}
<LMCreatePostMedia />

{/* selection options section */}
<LMCreatePostAttachmentSelection />
</LMCreatePostUIRender>

</CreatePost>
);
};

export default CreatePostScreen;

Step 2: Wrap the Screen with Context Providers

  • Create a CreatePostScreenWrapper that wraps the screen with both CreatePostContextProvider and UniversalFeedContextProvider.
import {
CreatePostContextProvider,
UniversalFeedContextProvider,
} from "@likeminds.community/feed-rn-core";
import CreatePostScreen from "<<path_to_CreatePostScreen.tsx>>";

const CreatePostScreenWrapper = ({ navigation, route }) => {
return (
<UniversalFeedContextProvider navigation={navigation} route={route}>
<CreatePostContextProvider navigation={navigation} route={route}>
<CreatePostScreen />
</CreatePostContextProvider>
</UniversalFeedContextProvider>
);
};

export default CreatePostScreenWrapper;

Step 3: Add the Custom Screen in App.tsx

  • In your App.tsx, create a Stack.Navigator in the NavigationContainer wrapped by LMOverlayProvider.
  • Add CreatePostScreenWrapper as a Stack screen in your NavigationContainer.
import {
CREATE_POST,
LMOverlayProvider,
STYLES,
} from "@likeminds.community/feed-rn-core";
import { CreatePostScreenWrapper } from "<<path_to_CreatePostScreenWrapper.tsx>>";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";

export const App = () => {
const Stack = createNativeStackNavigator();
return (
<LMOverlayProvider
myClient={myClient} // pass in the LMFeedClient created
apiKey={apiKey} // pass in the API Key generated
userName={userName} // pass in the logged-in user's name
userUniqueId={userUniqueID} // pass in the logged-in user's uuid
>
<NavigationContainer ref={navigationRef} independent={true}>
<Stack.Navigator screenOptions={{ headerShown: false }}>
<Stack.Screen
name={CREATE_POST}
component={CreatePostScreenWrapper}
/>
</Stack.Navigator>
</NavigationContainer>
</LMOverlayProvider>
);
};