Post Upload Indicator

The LMPostUploadIndicator component provides a visual indicator while a post is uploading. It displays a loading spinner, a message, and an optional media preview to inform users about the ongoing upload status along with options to retry a failed attempt when uploading a post. This component is designed to be integrated within the Universal Feed.

GitHub File:

• LMPostUploadIndicator

UI Components

• LMLoader

Styling Customisations

These styling customisations can be applied through the setUploadingHeaderStyles method on the STYLES class

Property	Type	Description
uploadingTextStyle	TextStyle	Style for the uploading text.
retryButtonStyle	object	Styles for the retry button.
├ buttonStyle	ViewStyle	Style for the retry button container.
├ iconStyle	LMIconProps	Style for the retry button icon.
└ textStyle	TextStyle	Style for the retry button text.
cancelButtonStyle	object	Styles for the cancel button.
├ buttonStyle	ViewStyle	Style for the cancel button container.
└ textStyle	TextStyle	Style for the cancel button text.
progressBarStyle	object	Styles for the progress bar.
├ size	number	Size of the progress bar.
├ width	number	Width of the progress bar.
└ tintColor	string	Color of the progress bar.

Integration

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

Here’s how you integrate LMPostUploadIndicator within a screen:

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

const CustomFeedScreen = () => {

  STYLES.setUploadingHeaderStyles({
    cancelButtonStyle: {
      buttonStyle: {
        backgroundColor: 'green'
      },
    },
    uploadingTextStyle: {
      color: 'red',
      fontSize: 20
    }
  })

  return (
    <UniversalFeed>
      {/* Other feed components */}
      <LMPostUploadIndicator />
    </UniversalFeed>
  );
};

export default CustomFeedScreen;

• Use the LMPostUploadIndicator or your own custom component with all other feed components as a child of the UniversalFeed component in the relevant screens:
  • Feed Screen