How to send Custom JSON Data Inside a Post?

Overview

The LikeMinds Feed SDK allows developers to send custom JSON data inside a post. This can be useful for implementing additional features or use cases based on the needs of your application.

To send custom JSON data in a post, you need to create a custom create post screen and pass it to the stack screen. This gives you control over how the post is created and lets you attach custom data.

In this guide, we will walk you through how to set up a custom Create Post screen and send custom JSON data along with the post.

Steps

Step 1: Setup Custom Create Post Screen

You can create a custom screen by using the CreatePost component from the LikeMinds Feed SDK and overriding some of its default functionality to handle attachments, post creation, and sending custom JSON data.

Below is the code for a custom CreatePost screen:

import React from "react";
import {
  CreatePost,
  useCreatePostContext,
  CreatePostContextProvider,
  UniversalFeedContextProvider,
  LMCreatePostAttachmentSelection,
  LMCreatePostHeader,
  LMCreatePostHeading,
  LMCreatePostMedia,
  LMCreatePostTextInput,
  LMCreatePostTopics,
  LMCreatePostUIRender,
  LMCreatePostUserTagging,
  LMUserProfileSection,
  LMCreatePostAnonymousCheckbox
} from "@likeminds.community/feed-rn-core";

const CustomCreatePostScreen = ({ navigation, route }) => {
  const { onPostClick } = useCreatePostContext();

  const customHandleCreatePost = (
    allAttachment,
    formattedLinkAttachments,
    postContentText,
    heading,
    topics,
    poll
  ) => {
    // Sending custom JSON data with the post
    onPostClick(
      allAttachment,
      formattedLinkAttachments,
      postContentText,
      heading,
      topics,
      poll,
      metaData: {
        "Custom Key": "Custom Value",
      } // Custom JSON data here
    );
  };

  return (
    <UniversalFeedContextProvider navigation={navigation} route={route}>
      <CreatePostContextProvider navigation={navigation} route={route}>
        <CreatePost onPostClickProp={customHandleCreatePost}>
          {/* 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 />
          </LMCreatePostUIRender>

          {/* selection options section */}
          <LMCreatePostAttachmentSelection />
        </CreatePost>
      </CreatePostContextProvider>
    </UniversalFeedContextProvider>
  );
};

export default CustomCreatePostScreen;

Step 2: Passing Custom Data

In the above code, custom JSON data is sent via the onPostClick method. The custom data object:

{
  "text": "custom widget is working"
}

is passed when the user creates the post, allowing you to send any relevant data along with the post.

Step 3: Integrating with the Stack Navigator

Once your CustomCreatePostScreen component is set up, you need to integrate it into your stack navigator to render this screen when required. Here’s an example of how to add the CreateScreen to your stack:

import React from "react";
import { createStackNavigator } from "@react-navigation/stack";
import CustomCreatePostScreen from "./CustomCreatePostScreen";
import { CREATE_POST } from "@likeminds.community/feed-rn-core";

const Stack = createStackNavigator();

const StackScreen = () => {
  return (
    <Stack.Navigator>
      {/* Other screens */}
      <Stack.Screen
        name={CREATE_POST}
        component={CustomCreatePostScreen} // Reference to your custom CreateScreen
      />
    </Stack.Navigator>
  );
};

export default StackScreen;

By adding the CustomCreatePostScreen to the Stack.Screen in the stack navigator, you can navigate to the custom CREATE_POST screen from anywhere in your app.