From fae4fec2290e51450c671778ed11b25763c7ba04 Mon Sep 17 00:00:00 2001
From: Khushal Agarwal <khushal.agarwal987@gmail.com>
Date: Mon, 12 Aug 2024 16:24:22 +0530
Subject: [PATCH] docs: add native image picker guide

---
 .../guides/native-image-picker.mdx            | 115 ++++++++++++++++++
 1 file changed, 115 insertions(+)
 create mode 100644 docusaurus/docs/reactnative/guides/native-image-picker.mdx

diff --git a/docusaurus/docs/reactnative/guides/native-image-picker.mdx b/docusaurus/docs/reactnative/guides/native-image-picker.mdx
new file mode 100644
index 0000000000..e88c739e00
--- /dev/null
+++ b/docusaurus/docs/reactnative/guides/native-image-picker.mdx
@@ -0,0 +1,115 @@
+---
+id: native-image-picker
+title: Native Image Picker
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+:::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).
+:::
+
+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
+  defaultValue='rncli'
+  groupId='rn-platform'
+  values={[
+    { label: 'RN CLI', value: 'rncli' },
+    { label: 'Expo', value: 'expo' },
+  ]}
+>
+<TabItem value='rncli'>
+
+```bash title="Terminal"
+yarn remove @react-native-camera-roll/camera-roll
+```
+
+</TabItem>
+
+<TabItem value='expo'>
+
+```bash title="Terminal"
+yarn remove expo-media-library
+```
+
+</TabItem>
+</Tabs>
+
+### Step 2: Install the native image picker
+
+Install the native image picker by running the following command:
+
+<Tabs
+  defaultValue='rncli'
+  groupId='rn-platform'
+  values={[
+    { label: 'RN CLI', value: 'rncli' },
+    { label: 'Expo', value: 'expo' },
+  ]}
+>
+<TabItem value='rncli'>
+
+```bash title="Terminal"
+yarn add react-native-image-picker
+```
+
+</TabItem>
+
+<TabItem value='expo'>
+
+```bash title="Terminal"
+yarn add expo-image-picker
+```
+
+</TabItem>
+</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.
+
+![](../assets/guides/native-image-picker/options.png)
+
+:::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).
+:::
+
+### Step 3: Add necessary customization(if any)
+
+You can customize what happens on clicking the [`AttachButton`](../ui-components/attach-button.mdx) by passing your own `onPress` function to the `handleAttachButtonPress` of the `Channel` component.
+
+```jsx
+import { Channel } from 'stream-chat-react-native';
+
+const App = () => {
+  const handleAttachButtonPress = 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} />;
+};
+```