# Native Image Picker

<admonition type="note">

This guide can help you to comply with the new Google Play's [android policy for photo and video permissions](https://support.google.com/googleplay/android-developer/answer/14115180?hl=en).

</admonition>

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.

<tabs>

<tabs-item value="rncli" label="RN CLI">

```bash title="Terminal"
yarn remove @react-native-camera-roll/camera-roll
```

</tabs-item>

<tabs-item value="expo" label="Expo">

```bash title="Terminal"
yarn remove expo-media-library
```

</tabs-item>

</tabs>

<admonition type="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:

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

</admonition>

### Step 2: Install the native image picker

Install the native image picker by running the following command:

<tabs>

<tabs-item value="rncli" label="RN CLI">

```bash title="Terminal"
yarn add react-native-image-picker
```

</tabs-item>

<tabs-item value="expo" label="Expo">

```bash title="Terminal"
npx expo install expo-image-picker
```

</tabs-item>

</tabs>

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.

![](@chat-sdk/react-native/v7/_assets/guides/native-image-picker/options.png)

<admonition type="note">

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

</admonition>

<admonition type="note">

Please follow the post installation steps as mentioned in the [react-native-image-picker](https://github.com/react-native-image-picker/react-native-image-picker?tab=readme-ov-file#post-install-steps).

</admonition>

### Step 3: Add customization(if necessary)

You can customize what happens on clicking the [`AttachButton`](/chat/docs/sdk/react-native/v7/ui-components/attach-button/) by passing your own `onPress` function to the `handleAttachButtonPress` of the `Channel` component.

```jsx
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.

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

---

This page was last updated at 2025-08-15T14:16:28.039Z.

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react-native/v7/guides/native-image-picker/](https://getstream.io/chat/docs/sdk/react-native/v7/guides/native-image-picker/).