# 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
```

<admonition type="note">

Make sure you remove the unnecessary permissions from both iOS(`Info.plist`) and Android(`AndroidManifest.xml`).

<tabs>

<tabs-item value="ios" label="iOS">

```xml
<key>NSPhotoLibraryUsageDescription</key>
<string>$(PRODUCT_NAME) would like access to your photo gallery to share image in a message.</string>
<key>NSPhotoLibraryAddUsageDescription</key>
<string>$(PRODUCT_NAME) would like to save photos to your photo gallery after downloading from a message.<string>
```

</tabs-item>

<tabs-item value="android" label="Android">

```xml
<manifest>
...
  <uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />
  <uses-permission android:name="android.permission.READ_MEDIA_VIDEO" />
  <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"
    android:maxSdkVersion="32" />
  <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
...
<application>
```

</tabs-item>

</tabs>

</admonition>

</tabs-item>

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

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

<admonition type="note">

Remove the `expo-media-libary` config plugin code from `app.json`.

```json
{
  "expo": {
    "plugins": [
      [
        "expo-media-library",
        {
          "photosPermission": "Allow $(PRODUCT_NAME) to access your photos.",
          "savePhotosPermission": "Allow $(PRODUCT_NAME) to save photos.",
          "isAccessMediaLocationEnabled": true
        }
      ]
    ]
  }
}
```

</admonition>

</tabs-item>

</tabs>

### 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
```

<admonition type="note">

Add the following permission to the `Info.plist` of the app in the `ios` folder.

```xml
<key>NSPhotoLibraryUsageDescription</key>
<string>$(PRODUCT_NAME) would like access to your photo gallery to share image in a message.</string>
```

</admonition>

</tabs-item>

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

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

<admonition type="note">

Add the following in the `app.json` of the app.

```json
[
  "expo-image-picker",
  {
    "photosPermission": "$(PRODUCT_NAME) will access your photos to let them share with others."
  }
]
```

</admonition>

</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/v8/_assets/guides/native-image-picker/options.png)

<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/v5/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 2026-07-10T16:05:04.367Z.

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