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. - Prefer setting
topInsetandbottomInsetonChannelfor normal screen layout, and keep those values 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 MessageComposer when present. This inset determines the underlying shift to the MessageList when it is opened.
For most apps, set this through Channel. Update it from the context only when the inset needs to change dynamically after mount.
| 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.
For most apps, set this through Channel. Update it from the context only when the inset needs to change dynamically after mount.
| Type | Default |
|---|---|
| Number | 0 |
- Best Practices
- Basic Usage
- Value
- AttachmentPickerContent
- AttachmentPickerIOSSelectMorePhotos
- AttachmentPickerSelectionBar
- attachmentPickerBottomSheetHeight
- attachmentPickerStore
- attachmentSelectionBarHeight
- bottomInset
- bottomSheetRef
- closePicker
- disableAttachmentPicker
- ImageOverlaySelectedComponent
- numberOfAttachmentImagesToLoadPerCall
- numberOfAttachmentPickerImageColumns
- openPicker
- topInset