fix: make react-native-image-crop-picker optional (#2603)

* fix: make react-native-image-crop-picker optional

* fix: tests

* docs: add optional deps docs

* docs: add note for the optional dependency

Author: khushal87

docusaurus/docs/reactnative/basics/installation.mdx

@@ -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-camera-roll/camera-roll @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 expo-media-library react-native-gesture-handler react-native-reanimated react-native-svg
 ```
 
 </TabItem>
@@ -87,7 +87,6 @@ values={[
 - [`@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.
@@ -100,7 +99,6 @@ values={[
 - [`@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 +108,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,6 +124,7 @@ values={[
 >
 <TabItem value='rncli'>
 
+- [`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.
@@ -134,6 +137,7 @@ values={[
 <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-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.

docusaurus/docs/reactnative/common-content/ui-components/channel/props/has_camera_picker.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_file_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_image_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/contexts/message-input-context.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 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 +183,19 @@ const { sendMessage, toggleAttachmentPicker } = useMessageInputContext();
 
 <EmojiSearchIndex />
 
+### <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/core-components/channel.mdx

@@ -74,6 +74,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';
@@ -524,6 +525,10 @@ The max allowable is 255, which when reached displays as `255+`.
 
 <HandleThreadReply />
 
+### `hasCameraPicker`
+
+<HasCameraPicker />
+
 ### `hasCommands`
 
 <HasCommands />

examples/SampleApp/ios/Podfile.lock

@@ -1240,15 +1240,15 @@ PODS:
     - glog
     - RCT-Folly (= 2022.05.16.00)
     - React-Core
-  - RNImageCropPicker (0.39.0):
+  - RNImageCropPicker (0.41.2):
     - React-Core
     - React-RCTImage
-    - RNImageCropPicker/QBImagePickerController (= 0.39.0)
-    - TOCropViewController
-  - RNImageCropPicker/QBImagePickerController (0.39.0):
+    - RNImageCropPicker/QBImagePickerController (= 0.41.2)
+    - TOCropViewController (~> 2.7.4)
+  - RNImageCropPicker/QBImagePickerController (0.41.2):
     - React-Core
     - React-RCTImage
-    - TOCropViewController
+    - TOCropViewController (~> 2.7.4)
   - RNNotifee (7.8.2):
     - React-Core
     - RNNotifee/NotifeeCore (= 7.8.2)
@@ -1276,7 +1276,7 @@ PODS:
     - libwebp (~> 1.0)
     - SDWebImage/Core (~> 5.10)
   - SocketRocket (0.6.1)
-  - TOCropViewController (2.6.1)
+  - TOCropViewController (2.7.4)
   - Yoga (1.14.0)
 
 DEPENDENCIES:
@@ -1608,7 +1608,7 @@ SPEC CHECKSUMS:
   RNFBMessaging: 9b16c72d001787aca05e2fb997e5c979b821dbb4
   RNFS: 4ac0f0ea233904cb798630b3c077808c06931688
   RNGestureHandler: 2e3251b41d462552997c61afd680220d019fea65
-  RNImageCropPicker: 14fe1c29298fb4018f3186f455c475ab107da332
+  RNImageCropPicker: 771e2ca319d2cf92e04ebf334ece892ee9a6728f
   RNNotifee: 8e2d3df3f0e9ce8f5d1fe4c967431138190b6175
   RNReactNativeHapticFeedback: afa5bf2794aecbb2dba2525329253da0d66656df
   RNReanimated: 440ca83ef0a79a3376455663fc4a01300e131240
@@ -1618,7 +1618,7 @@ SPEC CHECKSUMS:
   SDWebImage: a7f831e1a65eb5e285e3fb046a23fcfbf08e696d
   SDWebImageWebPCoder: 908b83b6adda48effe7667cd2b7f78c897e5111d
   SocketRocket: f32cd54efbe0f095c4d7594881e52619cfe80b17
-  TOCropViewController: edfd4f25713d56905ad1e0b9f5be3fbe0f59c863
+  TOCropViewController: 80b8985ad794298fb69d3341de183f33d1853654
   Yoga: 9e6a04eacbd94f97d94577017e9f23b3ab41cf6c
 
 PODFILE CHECKSUM: 751ee2c534898a790da0a7dba7d623f1f21ae757

examples/SampleApp/package.json

@@ -42,7 +42,7 @@
     "react-native-fs": "^2.18.0",
     "react-native-gesture-handler": "^2.14.0",
     "react-native-haptic-feedback": "2.0.3",
-    "react-native-image-crop-picker": "0.39.0",
+    "react-native-image-crop-picker": "^0.41.2",
     "react-native-image-resizer": "1.4.5",
     "react-native-markdown-package": "1.8.2",
     "react-native-quick-sqlite": "8.0.2",

examples/SampleApp/yarn.lock

@@ -6203,10 +6203,10 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/react-native-haptic-feedback/-/react-native-haptic-feedback-2.0.3.tgz#09133b2175503831c04798cb0dc63ae91e3959c1"
   integrity sha512-7+qvcxXZts/hA+HOOIFyM1x9m9fn/TJVSTgXaoQ8uT4gLc97IMvqHQ559tDmnlth+hHMzd3HRMpmRLWoKPL0DA==
 
-react-native-image-crop-picker@0.39.0:
-  version "0.39.0"
-  resolved "https://registry.yarnpkg.com/react-native-image-crop-picker/-/react-native-image-crop-picker-0.39.0.tgz#9cb8e8ffb0e8ab06f7b3227cadf077169e225eba"
-  integrity sha512-4aANbQMrmU6zN/4b0rVBA7SbaZ3aa5JESm3Xk751sINybZMt1yz/9h95LkO7U0pbslHDo3ofXjG75PmQRP6a/w==
+react-native-image-crop-picker@^0.41.2:
+  version "0.41.2"
+  resolved "https://registry.yarnpkg.com/react-native-image-crop-picker/-/react-native-image-crop-picker-0.41.2.tgz#824fa8fee8391fbb3e0b5ae2973221a2dff0cafb"
+  integrity sha512-GcDu/adXU/1y/MrxsbOfqcGRGWC2pTttt5VGy/jyRJ6GXfoC29fTQf8SG5kGtc5schSR6K+mKYO4uW6eJPljlQ==
 
 [email protected]:
   version "1.4.5"

examples/TypeScriptMessaging/ios/Podfile.lock

@@ -1148,15 +1148,15 @@ PODS:
     - glog
     - RCT-Folly (= 2022.05.16.00)
     - React-Core
-  - RNImageCropPicker (0.39.0):
+  - RNImageCropPicker (0.41.2):
     - React-Core
     - React-RCTImage
-    - RNImageCropPicker/QBImagePickerController (= 0.39.0)
-    - TOCropViewController
-  - RNImageCropPicker/QBImagePickerController (0.39.0):
+    - RNImageCropPicker/QBImagePickerController (= 0.41.2)
+    - TOCropViewController (~> 2.7.4)
+  - RNImageCropPicker/QBImagePickerController (0.41.2):
     - React-Core
     - React-RCTImage
-    - TOCropViewController
+    - TOCropViewController (~> 2.7.4)
   - RNReactNativeHapticFeedback (2.0.3):
     - React-Core
   - RNReanimated (3.7.1):
@@ -1173,7 +1173,7 @@ PODS:
   - RNSVG (14.1.0):
     - React-Core
   - SocketRocket (0.6.1)
-  - TOCropViewController (2.6.1)
+  - TOCropViewController (2.7.4)
   - Yoga (1.14.0)
 
 DEPENDENCIES:
@@ -1497,14 +1497,14 @@ SPEC CHECKSUMS:
   RNCMaskedView: 0e1bc4bfa8365eba5fbbb71e07fbdc0555249489
   RNFS: 4ac0f0ea233904cb798630b3c077808c06931688
   RNGestureHandler: 67fb54b3e6ca338a8044e85cd6f340265aa41091
-  RNImageCropPicker: 14fe1c29298fb4018f3186f455c475ab107da332
+  RNImageCropPicker: 771e2ca319d2cf92e04ebf334ece892ee9a6728f
   RNReactNativeHapticFeedback: afa5bf2794aecbb2dba2525329253da0d66656df
   RNReanimated: 15a855719335a6b655a214531e86d806edfd49da
   RNScreens: 17e2f657f1b09a71ec3c821368a04acbb7ebcb46
   RNShare: d82e10f6b7677f4b0048c23709bd04098d5aee6c
   RNSVG: ba3e7232f45e34b7b47e74472386cf4e1a676d0a
   SocketRocket: f32cd54efbe0f095c4d7594881e52619cfe80b17
-  TOCropViewController: edfd4f25713d56905ad1e0b9f5be3fbe0f59c863
+  TOCropViewController: 80b8985ad794298fb69d3341de183f33d1853654
   Yoga: d17d2cc8105eed528474683b42e2ea310e1daf61
 
 PODFILE CHECKSUM: 90406e1e85c82b37484f5d746afa45c0637bb4b3