Attachment picker

AttachmentPicker is the bottom sheet the composer's attach button opens. Channel and Thread render it after their children, so every channel and thread screen has one. A selection bar at its top has a button for each source, photos, the camera, files, polls and commands, and the content below it shows the selected source. Attachments and uploads explains how picked files are uploaded, and Message composer UI describes the picker in the composer.

Best practices

• Configure the picker with the props of Channel and Thread. It has no props of its own, and the two screens don't share their settings.
• Pass the native header's height as topInset, so the sheet stops below the header. Keyboard and insets explains the insets.
• Install the native modules for the sources you want. A source whose module is missing has no button. See Installation.
• Change the buttons by replacing AttachmentPickerSelectionBar, and the content by replacing AttachmentPickerContent. Render the exported buttons and contents in your replacement to keep the ones you want.
• Open and close the picker with openAttachmentPicker() and closeAttachmentPicker() from useMessageInputContext(). Opening that way also closes the keyboard, and does nothing when the picker isn't rendered.

Basic usage

This channel screen sits below a native header and shows four photos per row:

import { useHeaderHeight } from "@react-navigation/elements";
import type { Channel as StreamChannel } from "stream-chat";
import {
  Channel,
  MessageComposer,
  MessageList,
} from "stream-chat-react-native";

export const ChannelScreen = ({ channel }: { channel: StreamChannel }) => {
  const headerHeight = useHeaderHeight();

  return (
    <Channel
      channel={channel}
      keyboardVerticalOffset={headerHeight}
      numberOfAttachmentPickerImageColumns={4}
      topInset={headerHeight}
    >
      <MessageList />
      <MessageComposer />
    </Channel>
  );
};

What it renders

The sheet opens to attachmentPickerBottomSheetHeight and renders:

1. AttachmentPickerSelectionBar, the row of source buttons.
2. AttachmentPickerContent, the selected source, below the bar. With disableAttachmentPicker, the sheet renders the bar only, and each button opens the system picker directly.

Opening the picker closes the keyboard and selects the photo grid. Opening the keyboard closes it, and so does the Android back button. While it's open, the composer moves up above it. When shouldRenderAttachmentPicker is false, Channel and Thread don't render it, and openAttachmentPicker() does nothing; the attach button still shows, so hide it or give it a handleAttachButtonPress.

The default selection bar renders these buttons, each exported:

AttachmentPickerContent renders, by the selected source:

When the user limited the app to some photos on iOS, the grid starts with a tile that lets them pick more. A source name of your own renders nothing in the default content; see Add a source of your own.

UI customization

WithComponents also accepts AttachmentPickerIOSSelectMorePhotos, but no component reads it.

Props on Channel and Thread

The full list of Channel props is on Channel.

Component props

AttachmentPicker, AttachmentPickerSelectionBar, the five buttons and AttachmentCommandPicker take no props. They read the picker's context and MessageInputContext.

AttachmentPickerContent, AttachmentMediaPicker, AttachmentFilePicker and AttachmentPollPicker take AttachmentPickerContentProps:

AttachmentCameraPicker also takes videoOnly?: boolean, which opens the camera for a video. AttachmentCommandPickerItem takes item: CommandSuggestion, the command it shows.

ImageOverlaySelectedComponent:

AttachmentTypePickerButton is the button of the selection bar, for a source of your own:

AttachmentPickerGenericContent is the content the camera, files and polls sources show, for a source of your own:

AttachmentPickerContext

Channel and Thread provide AttachmentPickerContext, which useAttachmentPickerContext() reads. It throws outside both.

AttachmentPickerProvider and AttachmentPickerContext are exported too. AttachmentPickerProvider takes openPicker, closePicker, topInset and bottomInset and creates the store; Channel and Thread render it for you.

Examples

Add a source of your own

A source is a name in attachmentPickerStore. This selection bar adds a button that selects "gifs", and the content renders a component of your own for it and the SDK's content for the other sources:

import { Text, View } from "react-native";
import type { ComponentOverrides } from "stream-chat-react-native";
import type { AttachmentPickerContentProps } from "stream-chat-react-native";
import {
  AttachmentPickerContent,
  AttachmentTypePickerButton,
  CameraPickerButton,
  FilePickerButton,
  MediaPickerButton,
  useAttachmentPickerContext,
  useAttachmentPickerState,
  useComponentsContext,
} from "stream-chat-react-native";

const GifPickerButton = () => {
  const { attachmentPickerStore } = useAttachmentPickerContext();
  const { selectedPicker } = useAttachmentPickerState();
  const { icons } = useComponentsContext();

  return (
    <AttachmentTypePickerButton
      Icon={icons.GiphyIcon}
      onPress={() => attachmentPickerStore.setSelectedPicker("gifs")}
      selected={selectedPicker === "gifs"}
    />
  );
};

const SelectionBarWithGifs = () => (
  <View style={{ flexDirection: "row", paddingHorizontal: 12 }}>
    <MediaPickerButton />
    <CameraPickerButton />
    <FilePickerButton />
    <GifPickerButton />
  </View>
);

const ContentWithGifs = (props: AttachmentPickerContentProps) => {
  const { selectedPicker } = useAttachmentPickerState();

  if (selectedPicker === "gifs") {
    return (
      <View style={{ height: props.height, padding: 16 }}>
        <Text>Your GIF search goes here.</Text>
      </View>
    );
  }

  return <AttachmentPickerContent {...props} />;
};

// Pass to `WithComponents`, declared once at module scope.
export const pickerOverrides: ComponentOverrides = {
  AttachmentPickerContent: ContentWithGifs,
  AttachmentPickerSelectionBar: SelectionBarWithGifs,
};

A button of your own isn't hidden by disableAttachmentPicker, which leaves the content out. Add files from your content with uploadNewFile(file) from useMessageInputContext(). The Location sharing UI cookbook adds a location source this way.

Hooks

See useAttachmentPickerContext and useAttachmentPickerState.