AttachmentUploadProgressIndicator

AttachmentUploadProgressIndicator documents the indicator components used by upload previews and pending message attachments.

These are the default inline indicators shown for in-progress, retryable, and not-supported attachment upload states. The in-progress indicators read upload state from client.uploadManager when they receive a pending attachment localId.

Components

`FileUploadInProgressIndicator`

Shown while a file or audio upload is actively in progress. It renders AttachmentUploadIndicator plus a uploaded / total file-size label when totalBytes is available.

`ImageUploadInProgressIndicator`

Shown while an image or video upload is actively in progress. It renders AttachmentUploadIndicator in overlay mode.

`AttachmentUploadIndicator`

Shared upload indicator used by composer previews and message-list attachments. It subscribes to client.uploadManager with usePendingAttachmentUpload(localId) and renders either a determinate circular progress ring or an ActivityIndicator.

`CircularProgressIndicator`

Circular progress ring used by AttachmentUploadIndicator. Override this when you want to keep the SDK upload-state wiring but replace the ring UI.

`MediaUploadProgressOverlay`

Full-cover overlay used for image and video thumbnails while pending uploads are active.

Props

`FileUploadInProgressIndicator`

Prop	Description	Type
`localId`	Local attachment id used to read `client.uploadManager`.	`string`
`sourceUrl`	Local source URL for the pending attachment.	`string`
`totalBytes`	Total file size used to render the uploaded-size label.	`number \| string \| null`

`ImageUploadInProgressIndicator`

Prop	Description	Type
`localId`	Local attachment id used to read `client.uploadManager`.	`string`
`sourceUrl`	Local source URL for the pending attachment.	`string`

`AttachmentUploadIndicator`

Prop	Description	Type
`containerStyle`	Style applied to the compact indicator container.	`StyleProp<ViewStyle>`
`localId`	Local attachment id used to read `client.uploadManager`.	`string`
`size`	Indicator diameter. Defaults to `16`, or `28` for overlay mode.	`number`
`sourceUrl`	Local source URL for the pending attachment.	`string`
`strokeWidth`	Circular progress stroke width. Defaults to `2`, or `3` for overlay mode.	`number`
`style`	Style applied to the rendered indicator.	`StyleProp<ViewStyle>`
`testID`	Test id for the indicator.	`string`
`variant`	Visual variant. Defaults to `'compact'`.	`'compact' \| 'overlay'`

`CircularProgressIndicator`

Prop	Description	Type
`backgroundColor`	Fill color behind the progress ring.	`ColorValue`
`filledColor`	Filled progress stroke color.	`ColorValue`
`progress`	Upload progress from `0` to `100`.	`number`
`unfilledColor`	Unfilled progress stroke color.	`ColorValue`
`size`	Indicator diameter. Defaults to `16`.	`number`
`strokeWidth`	Progress stroke width. Defaults to `2`.	`number`
`style`	Style applied to the rendered indicator.	`StyleProp<ViewStyle>`
`testID`	Test id for the indicator.	`string`

`MediaUploadProgressOverlay`

Prop	Description	Type
`progress`	Upload progress from `0` to `100`.	`number`
`size`	Indicator diameter. Defaults to `18`.	`number`
`strokeWidth`	Progress stroke width. Defaults to `3`.	`number`
`testID`	Test id for the overlay content.	`string`

`FileUploadRetryIndicator`

Prop	Description	Type
`onPress`	Callback fired when the retry indicator is pressed.	`() => void`

`FileUploadNotSupportedIndicator`

Prop	Description	Type
`localMetadata`	Upload metadata for the unsupported file attachment.	`LocalAttachmentUploadMetadata`

`ImageUploadRetryIndicator`

Prop	Description	Type
`onRetryHandler`	Callback fired when the retry indicator is pressed.	`() => void`

`ImageUploadNotSupportedIndicator`

ImageUploadNotSupportedIndicator has no props.

Custom upload progress UI

For custom indicators, use the usePendingAttachmentUpload hook instead of subscribing to client.uploadManager manually.

import { Text, View } from "react-native";
import {
  Channel,
  MessageComposer,
  MessageList,
  WithComponents,
  usePendingAttachmentUpload,
} from "stream-chat-react-native";

const CustomAttachmentUploadIndicator = ({ localId }) => {
  const { isUploading, uploadProgress } = usePendingAttachmentUpload(localId);

  if (!isUploading) {
    return null;
  }

  return (
    <View>
      <Text>{Math.round(uploadProgress ?? 0)}%</Text>
    </View>
  );
};

<WithComponents
  overrides={{ AttachmentUploadIndicator: CustomAttachmentUploadIndicator }}
>
  <Channel channel={channel}>
    <MessageList />
    <MessageComposer />
  </Channel>
</WithComponents>;