Native Image Picker

To enable the native image picker, you need to do the following steps and that would provide a native image picker for both iOS and Android.

Step 1: Uninstall the media library

Uninstall the media library by running the following command(if you have already installed it) else choose not to install it at all as it is a optional dependency.

yarn remove @react-native-camera-roll/camera-roll

yarn remove expo-media-library

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

Step 2: Install the native image picker

Install the native image picker by running the following command:

yarn add react-native-image-picker

npx expo install expo-image-picker

This shall give you a UI to select images from the gallery using native image picker or take a picture from the camera or alternatively select a file.

Step 3: Add customization(if necessary)

You can customize what happens on clicking the AttachButton by passing your own onPress function to the handleAttachButtonPress of the Channel component.

import { useCallback } from "react";
import { Channel } from "stream-chat-react-native";

const App = () => {
  const handleAttachButtonPress = useCallback(async () => {
    // Your custom logic here
  }, []);

  return (
    <Channel
      channel={channel}
      handleAttachButtonPress={handleAttachButtonPress}
    />
  );
};

The other alternative is customizing the AttachButton component itself.

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

const CustomAttachButton = (props) => {
  const { onPress } = props;

  const handlePress = async () => {
    // Your custom logic here
  };

  return <AttachButton onPress={handlePress} />;
};

const App = () => {
  return <Channel channel={channel} AttachButton={CustomAttachButton} />;
};