import { useContext } from "react";
import { AttachmentPickerContext } from "stream-chat-react-native";
const { openPicker, closePicker } = useContext(AttachmentPickerContext);AttachmentPickerContext
AttachmentPickerContext is provided by Channel. If you are not familiar with the React Context API, see the React docs.
Best Practices
- Use
useAttachmentPickerContextfor consistent access and typings. - Manage picker visibility through
openPicker/closePickerto keep state aligned. - Keep inset values (
topInset,bottomInset) consistent with your layout. - Avoid using the picker context outside
Channelto prevent undefined state. - Keep custom picker UI lightweight to preserve input performance.
Basic Usage
Consume AttachmentPickerContext in any child of Channel:
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.
| Type | Default |
|---|---|
| Number | 0 |
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.
| Type | Default |
|---|---|
| Number | 0 |
- Best Practices
- Basic Usage
- Value
- AttachmentPickerContent
- AttachmentPickerIOSSelectMorePhotos
- AttachmentPickerSelectionBar
- attachmentPickerBottomSheetHeight
- attachmentPickerStore
- attachmentSelectionBarHeight
- bottomInset
- bottomSheetRef
- closePicker
- disableAttachmentPicker
- ImageOverlaySelectedComponent
- numberOfAttachmentImagesToLoadPerCall
- numberOfAttachmentPickerImageColumns
- openPicker
- topInset