Native Image Picker

Note:

This guide can help you to comply with the new Google Play's android policy for photo and video permissions.

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.

Terminal

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

Terminal

yarn remove expo-media-library

Note:

On Android, you can now remove the READ_EXTERNAL_STORAGE and WRITE_EXTERNAL_STORAGE permissions from the AndroidManifest.xml file.

Remove the following lines from the AndroidManifest.xml file:

<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:

Terminal

yarn add react-native-image-picker

Terminal

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.

Note:

You don't need any permission for the native image picker on Android.

Note:

Please follow the post installation steps as mentioned in the react-native-image-picker.

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} />;
};