fix: resolve conflicts from branch develop to v6 (#2621)

* fix: resolve conflicts from branch develop to v6

* fix: remove cameraroll on ts messaging app

* fix: remove shared folder

* chore: bump vale version

* chore: bump vale version

* chore: update vale version

Author: khushal87

docusaurus/docs/reactnative/assets/guides/native-image-picker/options.png

@@ -0,0 +1,5 @@
+Function to customize the behaviour when the [AttachButton](../../../../ui-components/attach-button.mdx) is pressed in the message input.
+
+| Type         |
+| ------------ |
+| `() => void` |

docusaurus/docs/reactnative/basics/installation.mdx

@@ -3,8 +3,6 @@ id: message-context
 title: MessageContext
 ---
 
-import Disabled from '../common-content/contexts/channel-context/disabled.mdx';
-
 import Alignment from '../common-content/contexts/message-context/alignment.mdx';
 import Files from '../common-content/contexts/message-context/files.mdx';
 import GroupStyles from '../common-content/contexts/message-context/group_styles.mdx';
@@ -80,10 +78,6 @@ True if one of the following condition is true:
 | ------- |
 | boolean |
 
-### disabled
-
-<Disabled />
-
 ### files
 
 <Files />

docusaurus/docs/reactnative/common-content/ui-components/channel/props/handle_attach_button_press.mdx

@@ -26,6 +26,7 @@ import DoDocUploadRequest from '../common-content/ui-components/channel/props/do
 import DoImageUploadRequest from '../common-content/ui-components/channel/props/do_image_upload_request.mdx';
 import EmojiSearchIndex from '../common-content/ui-components/channel/props/emoji_search_index.mdx';
 import FileUploadPreview from '../common-content/ui-components/channel/props/file_upload_preview.mdx';
+import HandleAttachButtonPress from '../common-content/ui-components/channel/props/handle_attach_button_press.mdx';
 import HasCameraPicker from '../common-content/ui-components/channel/props/has_camera_picker.mdx';
 import HasCommands from '../common-content/ui-components/channel/props/has_commands.mdx';
 import HasFilePicker from '../common-content/ui-components/channel/props/has_file_picker.mdx';
@@ -183,6 +184,10 @@ const { sendMessage, toggleAttachmentPicker } = useMessageInputContext();
 
 <EmojiSearchIndex />
 
+### <div class="label description">_forwarded from [Channel](../../core-components/channel#handleattachbuttonpress)_ props</div> `handleAttachButtonPress` {#handleAttachButtonPress}
+
+<HandleAttachButtonPress />
+
 ### <div class="label description">_forwarded from [Channel](../../core-components/channel#hascamerapicker)_ props</div> `hasCameraPicker` {#hascamerapicker}
 
 <HasCameraPicker />
@@ -239,17 +244,17 @@ const { sendMessage, toggleAttachmentPicker } = useMessageInputContext();
 
 <SendMessage />
 
-<!-- ### setInputRef -->
+{/* ### setInputRef */}
 
-<!-- ### setQuotedMessageState -->
+{/* ### setQuotedMessageState */}
 
 ### `appendText`
 
 <AppendText />
 
-<!-- ### asyncIds -->
+{/* ### asyncIds */}
 
-<!-- ### asyncUploads -->
+{/* ### asyncUploads */}
 
 ### closeAttachmentPicker
 
@@ -283,9 +288,9 @@ const { sendMessage, toggleAttachmentPicker } = useMessageInputContext();
 
 <NumberOfUploads />
 
-<!-- ### onChange -->
+{/* ### onChange */}
 
-<!-- ### onSelectItem -->
+{/* ### onSelectItem */}
 
 ### openAttachmentPicker
 
@@ -303,7 +308,7 @@ const { sendMessage, toggleAttachmentPicker } = useMessageInputContext();
 
 <OpenMentionsPicker />
 
-<!-- ### pickFile -->
+{/* ### pickFile */}
 
 ### `removeFile`
 
@@ -321,17 +326,17 @@ const { sendMessage, toggleAttachmentPicker } = useMessageInputContext();
 
 <SelectedPicker />
 
-<!-- ### sending -->
+{/* ### sending */}
 
-<!-- ### sendMessageAsync -->
+{/* ### sendMessageAsync */}
 
 ### sendThreadMessageInChannel
 
 <SendThreadMessageInChannel />
 
-<!-- ### setAsyncIds -->
+{/* ### setAsyncIds */}
 
-<!-- ### setAsyncUploads -->
+{/* ### setAsyncUploads */}
 
 ### setFileUploads
 

docusaurus/docs/reactnative/contexts/message-context.mdx

@@ -63,6 +63,7 @@ import GetMessagesGroupStyles from '../common-content/ui-components/channel/prop
 import Giphy from '../common-content/ui-components/channel/props/giphy.mdx';
 import GiphyEnabled from '../common-content/ui-components/channel/props/giphy_enabled.mdx';
 import GiphyVersion from '../common-content/ui-components/channel/props/giphy_version.mdx';
+import HandleAttachButtonPress from '../common-content/ui-components/channel/props/handle_attach_button_press.mdx';
 import HandleBlock from '../common-content/ui-components/channel/props/handle_block.mdx';
 import HandleCopy from '../common-content/ui-components/channel/props/handle_copy.mdx';
 import HandleDelete from '../common-content/ui-components/channel/props/handle_delete.mdx';
@@ -481,6 +482,10 @@ The max allowable is 255, which when reached displays as `255+`.
 
 <GiphyVersion />
 
+### `handleAttachButtonPress`
+
+<HandleAttachButtonPress />
+
 ### `handleBlock`
 
 <HandleBlock />

docusaurus/docs/reactnative/contexts/message-input-context.mdx

@@ -86,6 +86,14 @@ A function to open the document picker and return documents picked from it.
 | ---------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- |
 | [`react-native-document-picker`](https://github.com/rnmods/react-native-document-picker) | [`expo-document-picker`](https://docs.expo.io/versions/latest/sdk/document-picker/) |
 
+### `pickImage`
+
+A function to open the native image picker and return images picked from it.
+
+| React Native CLI                                                                                      | Expo                                                                         |
+| ----------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- |
+| [`react-native-image-picker`](https://github.com/react-native-image-picker/react-native-image-picker) | [`expo-image-picker`](https://docs.expo.io/versions/latest/sdk/imagepicker/) |
+
 ### `saveFile`
 
 A function to save a file from a URL to local storage.

docusaurus/docs/reactnative/core-components/channel.mdx

@@ -0,0 +1,116 @@
+---
+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"
+npx expo install 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 customization(if necessary)
+
+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 { 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} />;
+};
+```

docusaurus/docs/reactnative/customization/native-handlers.mdx

@@ -130,6 +130,7 @@
     "Advanced Guides": [
       "guides/audio-messages-support",
       "guides/date-time-formatting",
+      "guides/native-image-picker",
       "customization/typescript",
       "basics/troubleshooting",
       "basics/stream_chat_with_navigation",