# Native Image Picker

<admonition type="note">

This guide helps you comply with Google Play's [Android photo/video permissions policy](https://support.google.com/googleplay/android-developer/answer/14115180?hl=en).

</admonition>

To enable the native image picker, follow these steps for iOS and Android.

## Best Practices

- Remove legacy storage permissions to align with modern Android policies.
- Follow the picker’s post-install steps before debugging UI issues.
- Use `handleAttachButtonPress` for logic changes and `AttachButton` for UI changes.
- Keep custom pickers aligned with the default attachment workflow.
- Test camera and gallery flows on both platforms to confirm permissions.

### Step 1: Uninstall the media library

Uninstall the media library if you previously installed it (it's optional).

<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 remove `READ_EXTERNAL_STORAGE` and `WRITE_EXTERNAL_STORAGE` from `AndroidManifest.xml`.

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 provides a native UI for gallery selection, camera capture, and file picking.

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

<admonition type="note">

No permissions are required 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 (optional)

Customize `AttachButton` behavior by passing `handleAttachButtonPress` to `Channel`.

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

```tsx
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-04-17T17:33:45.588Z.

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