Merge pull request #2616 from GetStream/develop

Next Release

Author: khushal87

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

@@ -56,15 +56,15 @@ Stream Chat React Native SDK requires installing some peer dependencies to provi
 <TabItem value='rncli'>
 
 ```bash title="Terminal"
-yarn add @react-native-camera-roll/camera-roll @react-native-community/netinfo @stream-io/flat-list-mvcp react-native-fs react-native-gesture-handler react-native-image-crop-picker react-native-image-resizer react-native-reanimated react-native-svg
+yarn add @react-native-community/netinfo @stream-io/flat-list-mvcp react-native-fs react-native-gesture-handler react-native-image-resizer react-native-reanimated react-native-svg
 ```
 
 </TabItem>
 
 <TabItem value='expo'>
 
 ```bash title="Terminal"
-npx expo install @stream-io/flat-list-mvcp @react-native-community/netinfo expo-file-system expo-image-manipulator expo-image-picker expo-media-library react-native-gesture-handler react-native-reanimated react-native-svg
+npx expo install @stream-io/flat-list-mvcp @react-native-community/netinfo expo-file-system expo-image-manipulator react-native-gesture-handler react-native-reanimated react-native-svg
 ```
 
 </TabItem>
@@ -82,25 +82,21 @@ values={[
 >
 <TabItem value='rncli'>
 
-- [`@react-native-camera-roll/camera-roll`](https://github.com/react-native-cameraroll/react-native-cameraroll) for accessing device gallery.
 - [`@react-native-community/netinfo`](https://github.com/react-native-netinfo/react-native-netinfo) for accessing device gallery.
 - [`@stream-io/flat-list-mvcp`](https://github.com/GetStream/flat-list-mvcp) for bi-directional FlatList support.
 - [`react-native-fs`](https://github.com/itinance/react-native-fs) to perform file operations like save, delete, etc.
 - [`react-native-gesture-handler`](https://github.com/software-mansion/react-native-gesture-handler) to handle gestures within the SDK.
-- [`react-native-image-crop-picker`](https://github.com/ivpusic/react-native-image-crop-picker) to capture images to attach them in the message.
 - [`react-native-image-resizer`](https://github.com/bamlab/react-native-image-resizer) to compress image uploads.
 - [`react-native-reanimated`](https://github.com/software-mansion/react-native-reanimated) to compress image uploads.
 - [`react-native-svg`](https://github.com/react-native-svg/react-native-svg) for SVG support.
 
 </TabItem>
 <TabItem value="expo">
 
-- [`expo-media-library`](https://docs.expo.dev/versions/latest/sdk/media-library/) for accessing device gallery.
 - [`@react-native-community/netinfo`](https://github.com/react-native-netinfo/react-native-netinfo) for accessing device gallery.
 - [`@stream-io/flat-list-mvcp`](https://github.com/GetStream/flat-list-mvcp) for bi-directional FlatList support.
 - [`expo-file-system`](https://docs.expo.dev/versions/latest/sdk/filesystem/) to perform file operations like save, delete, etc.
 - [`react-native-gesture-handler`](https://github.com/software-mansion/react-native-gesture-handler) to handle gestures within the SDK.
-- [`expo-image-picker`](https://docs.expo.dev/versions/latest/sdk/imagepicker/) to capture images to attach them in the message.
 - [`expo-image-manipulator`](https://docs.expo.dev/versions/latest/sdk/imagemanipulator/) to compress image uploads.
 - [`react-native-reanimated`](https://github.com/software-mansion/react-native-reanimated) to compress image uploads.
 - [`react-native-svg`](https://docs.expo.dev/versions/latest/sdk/svg/) for SVG support.
@@ -110,6 +106,10 @@ values={[
 
 ### Optional Dependencies
 
+:::note
+Starting from `v5.35.0` the `react-native-image-crop-picker` and `expo-image-picker` is no longer a required dependency. You can use it if you want to capture images to attach them in the message else feel free to uninstall it.
+:::
+
 There are a few optional dependencies that can be added to have more features within the SDK.
 
 <Tabs
@@ -122,18 +122,23 @@ values={[
 >
 <TabItem value='rncli'>
 
+- [`@react-native-camera-roll/camera-roll`](https://github.com/react-native-cameraroll/react-native-cameraroll) for accessing device gallery.
+- [`react-native-image-crop-picker`](https://github.com/ivpusic/react-native-image-crop-picker) to capture images to attach them in the message.
 - [`react-native-video`](https://github.com/react-native-video/react-native-video) for Video and Audio playback support.
 - [`react-native-audio-recorder-player`](https://github.com/hyochan/react-native-audio-recorder-player) for Audio recording and async audio messages support.
 - [`react-native-share`](https://github.com/react-native-share/react-native-share) for Attachment sharing support.
 - [`react-native-haptic-feedback`](https://github.com/junina-de/react-native-haptic-feedback) for user haptics feedback.
 - [`@react-native-clipboard/clipboard`](https://github.com/react-native-clipboard/clipboard) for Copy message support.
 - [`react-native-document-picker`](https://github.com/rnmods/react-native-document-picker) to access device media files.
 - [`react-native-quick-sqlite`](https://github.com/margelo/react-native-quick-sqlite) to enable Offline support in the app.
+- [`react-native-image-picker`](https://github.com/react-native-image-picker/react-native-image-picker) to use native photo picker.
 
 </TabItem>
 <TabItem value="expo">
 
 - [`expo-av`](https://docs.expo.dev/versions/latest/sdk/av/) for Video and Audio playback, recording and async audio messages support.
+- [`expo-media-library`](https://docs.expo.dev/versions/latest/sdk/media-library/) for accessing device gallery.
+- [`expo-image-picker`](https://docs.expo.dev/versions/latest/sdk/imagepicker/) to capture images to attach them in the message.
 - [`expo-sharing`](https://docs.expo.dev/versions/latest/sdk/sharing/) for Attachments sharing support.
 - [`expo-haptics`](https://docs.expo.dev/versions/latest/sdk/haptics/) for user haptics support.
 - [`expo-clipboard`](https://docs.expo.dev/versions/latest/sdk/clipboard/) for Copy message support.
@@ -275,7 +280,7 @@ Please also follow the steps mentioned in the links below for corresponding depe
 
 - `react-native` - [additional installation steps](https://reactnative.dev/docs/image#gif-and-webp-support-on-android)
 - `react-native-image-crop-picker` - [additional installation steps](https://github.com/ivpusic/react-native-image-crop-picker#step-3)
-- `react-native-cameraroll` - [additional installation steps](https://github.com/react-native-cameraroll/react-native-cameraroll#permissions)
+- `@react-native-camera-roll/camera-roll` - [additional installation steps](https://github.com/react-native-cameraroll/react-native-cameraroll#permissions)
 
 Now you should be able to run the app on simulator by running following command:
 

docusaurus/docs/reactnative/basics/installation.mdx

@@ -60,7 +60,6 @@ The SDK tries to keep the list of external dependencies to a minimum, these are
 >
 <TabItem value='rncli'>
 
-- [`@react-native-camera-roll/camera-roll`](https://github.com/react-native-cameraroll/react-native-cameraroll) for accessing device gallery.
 - [`@react-native-community/netinfo`](https://github.com/react-native-netinfo/react-native-netinfo) for accessing device gallery.
 - [`@stream-io/flat-list-mvcp`](https://github.com/GetStream/flat-list-mvcp) for bi-directional FlatList support.
 - [`react-native-fs`](https://github.com/itinance/react-native-fs) to perform file operations like save, delete, etc.
@@ -74,7 +73,6 @@ The SDK tries to keep the list of external dependencies to a minimum, these are
 </TabItem>
 <TabItem value="expo">
 
-- [`expo-media-library`](https://docs.expo.dev/versions/latest/sdk/media-library/) for accessing device gallery.
 - [`@react-native-community/netinfo`](https://github.com/react-native-netinfo/react-native-netinfo) for accessing device gallery.
 - [`@stream-io/flat-list-mvcp`](https://github.com/GetStream/flat-list-mvcp) for bi-directional FlatList support.
 - [`expo-file-system`](https://docs.expo.dev/versions/latest/sdk/filesystem/) to perform file operations like save, delete, etc.
@@ -102,18 +100,21 @@ There are a few optional dependencies that can be added by our users to have mor
 >
 <TabItem value='rncli'>
 
+- [`@react-native-camera-roll/camera-roll`](https://github.com/react-native-cameraroll/react-native-cameraroll) for accessing device gallery.
 - [`react-native-video`](https://github.com/react-native-video/react-native-video) for Video and Audio playback support.
 - [`react-native-audio-recorder-player`](https://github.com/hyochan/react-native-audio-recorder-player) for Audio recording and async audio messages support.
 - [`react-native-share`](https://github.com/react-native-share/react-native-share) for Attachment sharing support.
 - [`react-native-haptic-feedback`](https://github.com/junina-de/react-native-haptic-feedback) for user haptics feedback.
 - [`@react-native-clipboard/clipboard`](https://github.com/react-native-clipboard/clipboard) for Copy message support.
 - [`react-native-document-picker`](https://github.com/rnmods/react-native-document-picker) to access device media files.
 - [`react-native-quick-sqlite`](https://github.com/margelo/react-native-quick-sqlite) to enable Offline support in the app.
+- [`react-native-image-picker`](https://github.com/react-native-image-picker/react-native-image-picker) to use native photo picker.
 
 </TabItem>
 <TabItem value="expo">
 
 - [`expo-av`](https://docs.expo.dev/versions/latest/sdk/av/) for Video and Audio playback, recording and async audio messages support.
+- [`expo-media-library`](https://docs.expo.dev/versions/latest/sdk/media-library/) for accessing device gallery.
 - [`expo-sharing`](https://docs.expo.dev/versions/latest/sdk/sharing/) for Attachments sharing support.
 - [`expo-haptics`](https://docs.expo.dev/versions/latest/sdk/haptics/) for user haptics support.
 - [`expo-clipboard`](https://docs.expo.dev/versions/latest/sdk/clipboard/) for Copy message support.

docusaurus/docs/reactnative/basics/overview.mdx

@@ -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/common-content/ui-components/channel/props/handle_attach_button_press.mdx

@@ -0,0 +1,5 @@
+Enable the file picker on the [`MessageInput`](../../../../ui-components/message-input.mdx) component.
+
+| Type    | Default |
+| ------- | ------- |
+| Boolean | `true`  |

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

@@ -2,4 +2,4 @@ Enable the file picker on the [`MessageInput`](../../../../ui-components/message
 
 | Type    | Default |
 | ------- | ------- |
-| boolean | true    |
+| Boolean | `true`  |

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

@@ -2,4 +2,4 @@ Enable the image picker on the [`MessageInput`](../../../../ui-components/messag
 
 | Type    | Default |
 | ------- | ------- |
-| boolean | true    |
+| Boolean | `true`  |

docusaurus/docs/reactnative/common-content/ui-components/channel/props/has_image_picker.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/contexts/message-context.mdx

@@ -26,6 +26,8 @@ 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';
 import HasImagePicker from '../common-content/ui-components/channel/props/has_image_picker.mdx';
@@ -182,15 +184,23 @@ 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 />
+
 ### <div class="label description">_forwarded from [Channel](../../core-components/channel#hascommands)_ props</div> `hasCommands` {#hascommands}
 
 <HasCommands />
 
-### <div class="label description">_forwarded from [Channel](../../core-components/channel#hasfilepicker)_ props</div> hasFilePicker {#hasfilepicker}
+### <div class="label description">_forwarded from [Channel](../../core-components/channel#hasfilepicker)_ props</div> `hasFilePicker` {#hasfilepicker}
 
 <HasFilePicker />
 
-### <div class="label description">_forwarded from [Channel](../../core-components/channel#hasimagepicker)_ props</div> hasImagePicker {#hasimagepicker}
+### <div class="label description">_forwarded from [Channel](../../core-components/channel#hasimagepicker)_ props</div> `hasImagePicker` {#hasimagepicker}
 
 <HasImagePicker />
 

docusaurus/docs/reactnative/contexts/message-input-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';
@@ -74,6 +75,7 @@ import HandleQuotedReply from '../common-content/ui-components/channel/props/han
 import HandleReaction from '../common-content/ui-components/channel/props/handle_reaction.mdx';
 import HandleRetry from '../common-content/ui-components/channel/props/handle_retry.mdx';
 import HandleThreadReply from '../common-content/ui-components/channel/props/handle_thread_reply.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';
 import HasImagePicker from '../common-content/ui-components/channel/props/has_image_picker.mdx';
@@ -480,6 +482,10 @@ The max allowable is 255, which when reached displays as `255+`.
 
 <GiphyVersion />
 
+### `handleAttachButtonPress`
+
+<HandleAttachButtonPress />
+
 ### `handleBlock`
 
 <HandleBlock />
@@ -524,6 +530,10 @@ The max allowable is 255, which when reached displays as `255+`.
 
 <HandleThreadReply />
 
+### `hasCameraPicker`
+
+<HasCameraPicker />
+
 ### `hasCommands`
 
 <HasCommands />