import { useContext } from "react";
import { AttachmentPickerContext } from "stream-chat-react-native";
const { openPicker, closePicker } = useContext(AttachmentPickerContext);AttachmentPickerContext
AttachmentPickerContext is provided by OverlayProvider component. If you are not familiar with React Context API, please read about it on React docs.
Basic Usage
AttachmentPickerContext can be consumed by any of the child component of OverlayProvider component as following:
Alternatively, you can also use useAttachmentPickerContext hook provided by library to consume AttachmentPickerContext.
import { useAttachmentPickerContext } from "stream-chat-react-native";
const { openPicker, closePicker } = useAttachmentPickerContext();Value
attachmentPickerBottomSheetHeight
Height of the image picker bottom sheet when opened.
| Type | Default |
|---|---|
| Number | 40% of Window Height |
attachmentSelectionBarHeight
Height of the attachment selection bar displayed on the attachment picker.
| Type | Default |
|---|---|
| number | 52 |
bottomInset
bottomInset determine the height of the AttachmentPicker and the underlying shift to the MessageList when it is opened.
| Type | Default |
|---|---|
| number | bottomInset |
CameraSelectorIcon
Camera selector component displayed in the attachment selector bar.
| Type | Default |
|---|---|
| ComponentType | CameraSelectorIcon |
closePicker
Function to close the attachment picker bottom sheet.
| Type |
|---|
| function |
FileSelectorIcon
File selector component displayed in the attachment selector bar.
| Type | Default |
|---|---|
| ComponentType | FileSelectorIcon |
ImageSelectorIcon
Image selector component displayed in the attachment selector bar.
| Type | Default |
|---|---|
| ComponentType | ImageSelectorIcon |
openPicker
Function to open the attachment picker bottom sheet.
| Type |
|---|
| function |
selectedFiles
List of currently selected files in attachment picker.
Array<{
duration: number | null;
name: string;
size: string;
type: string;
uri: string;
}>;selectedImages
List of currently selected images in attachment picker.
Array<{
height: number;
source: "camera" | "picker";
uri: string;
width: number;
id?: string;
}>;| Type |
|---|
| array |
selectedPicker
Value is images (string), when image attachment picker is open. Value will be undefined if file picker is active or file picker is open.
| Type |
|---|
| ’images’ | undefined |
setBottomInset
Setter function for bottomInset
| Type |
|---|
(bottomInset: number) => void |
setSelectedFiles
Setter function for selectedFiles
| Type |
|---|
(selectedFiles) => void |
setSelectedImages
Setter function for selectedImages
| Type |
|---|
(selectedImages) => void |
setSelectedPicker
Setter function for selectedPicker
| Type |
| ------------------ | ------------------- |
| (picker: 'images' | undefined) => void |
setTopInset
Setter function for topInset
| Type |
|---|
(topInset: number) => void |
topInset
topInset is used to determine how high the scroll-able bottom-sheet can go when opened.
| Type | Default |
|---|---|
| number | topInset |