This is beta documentation for Stream Chat React Native SDK v9. For the latest stable version, see the latest version (v8) .

AttachmentPickerContext

AttachmentPickerContext is provided by Channel. If you are not familiar with the React Context API, see the React docs.

Best Practices

  • Use useAttachmentPickerContext for consistent access and typings.
  • Manage picker visibility through openPicker/closePicker to keep state aligned.
  • Keep inset values (topInset, bottomInset) consistent with your layout.
  • Avoid using the picker context outside Channel to prevent undefined state.
  • Keep custom picker UI lightweight to preserve input performance.

Basic Usage

Consume AttachmentPickerContext in any child of Channel:

import { useContext } from "react";
import { AttachmentPickerContext } from "stream-chat-react-native";

const { openPicker, closePicker } = useContext(AttachmentPickerContext);

Alternatively, use the useAttachmentPickerContext hook.

import { useAttachmentPickerContext } from "stream-chat-react-native";

const { openPicker, closePicker } = useAttachmentPickerContext();

Value

AttachmentPickerContent

Custom UI component to render the attachment picker content area.

Type
React.ComponentType<AttachmentPickerContentProps>

AttachmentPickerIOSSelectMorePhotos

Custom UI component to render the "select more photos" option for limited gallery access on iOS.

Type
React.ComponentType

AttachmentPickerSelectionBar

Custom UI component to render the selection bar within the attachment picker.

Type
React.ComponentType

attachmentPickerBottomSheetHeight

Height of the attachment picker bottom sheet.

Type
number

attachmentPickerStore

State store instance that manages the internal state of the attachment picker, including selected images and picker type.

Type
AttachmentPickerStore

attachmentSelectionBarHeight

Height of the attachment selection bar.

Type
number

bottomInset

Height of items located below the MessageInput when present. This inset determines the underlying shift to the MessageList when it is opened.

TypeDefault
Number0

bottomSheetRef

Reference to the attachment picker bottom sheet.

Type
React.RefObject<BottomSheet>

closePicker

Function to close the attachment picker bottom sheet.

Type
() => void

disableAttachmentPicker

When true, the attachment picker is disabled entirely.

Type
boolean

ImageOverlaySelectedComponent

Custom UI component to render the overlay on top of selected images (with tick mark).

Type
React.ComponentType<{ index: number }>

numberOfAttachmentImagesToLoadPerCall

Number of images to load per pagination call in the attachment picker.

Type
number

numberOfAttachmentPickerImageColumns

Number of columns to display in the attachment picker image grid.

Type
number

openPicker

Function to open the attachment picker bottom sheet.

Type
() => void

topInset

Distance from the top of the screen the attachment picker should open to when expanded. This is often set to the header height.

TypeDefault
Number0