Skip to main content

Universal Feed Header

The LMUniversalFeedHeader component is designed to serve as the header of the Universal Feed screen. It displays the app's title and a notification bell icon, indicating any unread notifications with a badge. This component leverages contextual styling and behavior, enabling it to adapt to different themes and respond to user interactions.

GitHub File:

LMFeedPostContent

Overview​

LMUniversalFeedHeader is a reusable component that offers:

  • A customizable header with a title.
  • A notification bell icon, which changes color based on the theme.
  • An optional notification badge displaying the count of unread notifications.

UI Components​

Styling Customisations​

The customisations available on LMFeedHeader can be applied through the setUniversalFeedStyles method on the STYLES class

Integration​

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

Here’s how you integrate LMUniversalFeedHeader within a screen:

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

const CustomFeedScreen = () => {
  // to customise ui
  useEffect(() => {
    STYLES.setUniversalFeedStyles({
      screenHeader: {
        headingTextStyle: {
          color: "blue",
        },
      },
    });
  }, []);
  return (
    <UniversalFeed>
      <LMUniversalFeedHeader />
      {/* Other feed components */}
    </UniversalFeed>
  );
};

export default CustomFeedScreen;