Merge pull request #2582 from GetStream/PBE-5070-rn-image-picker

fix: change react-native-image-crop-picker to react-native-image-picker and made it optional

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 react-native-gesture-handler react-native-image-crop-picker @bam.tech/react-native-image-resizer react-native-reanimated react-native-svg
+yarn add @react-native-camera-roll/camera-roll @react-native-community/netinfo react-native-gesture-handler @bam.tech/react-native-image-resizer react-native-reanimated react-native-svg
 ```
 
 </TabItem>
 
 <TabItem value='expo'>
 
 ```bash title="Terminal"
-npx expo install @react-native-community/netinfo expo-image-manipulator expo-image-picker expo-media-library react-native-gesture-handler react-native-reanimated react-native-svg
+npx expo install @react-native-community/netinfo expo-image-manipulator expo-media-library react-native-gesture-handler react-native-reanimated react-native-svg
 ```
 
 </TabItem>
@@ -85,7 +85,6 @@ values={[
 - [`@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 SDK to respond to network changes.
 - [`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.
 - [`@bam.tech/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.
@@ -96,7 +95,6 @@ values={[
 - [`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 SDK to respond to network changes.
 - [`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.
@@ -282,6 +280,36 @@ npx expo install expo-document-picker
 
 </Tabs>
 
+### Capture image and upload attachment
+
+Capture images from the camera and upload them as attachments in the chat.
+
+<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>
+
 ### Offline support
 
 Enable offline support in the app.
@@ -330,6 +358,7 @@ values={[
 - [`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-image-picker`](https://github.com/react-native-image-picker/react-native-image-picker) to capture images to attach them in the message.
 - [`@op-engineering/op-sqlite`](https://github.com/OP-Engineering/op-sqlite) to enable Offline support in the app.
 
 </TabItem>
@@ -341,6 +370,7 @@ values={[
 - [`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.
 - [`expo-document-picker`](https://docs.expo.dev/versions/latest/sdk/document-picker/) to access device media files.
+- [`expo-image-picker`](https://docs.expo.dev/versions/latest/sdk/imagepicker/) to capture images to attach them in the message.
 - [`@op-engineering/op-sqlite`](https://github.com/OP-Engineering/op-sqlite) to enable Offline support in the app.
 
 </TabItem>
@@ -365,7 +395,7 @@ values={[
 <TabItem value='rncli'>
 
 - [`@react-native-camera-roll/camera-roll`](https://github.com/react-native-cameraroll/react-native-cameraroll?tab=readme-ov-file#permissions) for gallery/photo library access.
-- [`react-native-image-crop-picker`](https://github.com/ivpusic/react-native-image-crop-picker?tab=readme-ov-file#step-3) for camera access.
+- [`react-native-image-picker`](https://github.com/react-native-image-picker/react-native-image-picker?tab=readme-ov-file#post-install-steps) for camera access.
 - [`react-native-audio-recorder-player`](https://github.com/hyochan/react-native-audio-recorder-player?tab=readme-ov-file#post-installation) for microphone access for voice recording.
 
 An example `AndroidManifest.xml` would look like this with permissions:
@@ -477,7 +507,7 @@ The entry point of your app exists usually either in `index.js` or `App.tsx` fil
 Please also follow the steps mentioned in the links below for corresponding dependencies:
 
 - `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-image-picker` - [additional installation steps](https://github.com/react-native-image-picker/react-native-image-picker?tab=readme-ov-file#post-install-steps)
 - `react-native-cameraroll` - [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/migrating-from-5.x-to-6.x.mdx

@@ -33,6 +33,19 @@ yarn remove react-native-image-resizer
 yarn add @bam.tech/react-native-image-resizer
 ```
 
+### Change `react-native-image-crop-picker` to `react-native-image-picker`
+
+The `react-native-image-crop-picker` package has been replaced with `react-native-image-picker`. This is a better alternative, and can help us with our new architecture endeavors.
+
+You can replace it by running the following commands:
+
+```bash
+yarn remove react-native-image-crop-picker
+yarn add react-native-image-picker
+```
+
+Also, the dependency is made optional now, so if you don't want to use the image picker, you can remove it from your project and the camera selector icon on the Attachment picker will be simply hidden for you.
+
 ### Change `react-native-quick-sqlite` to `op-sqlite`
 
 The `react-native-quick-sqlite` package has been replaced with `op-sqlite`. This is a faster alternative, and can help us with our new architecture endeavors.

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 />

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

@@ -122,9 +122,9 @@ A function to provide a given image to the native sharing functionality of the O
 
 A function that opens the OS specific camera and returns an image when one is taken.
 
-| React Native CLI                                                                              | Expo                                                                         |
-| --------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- |
-| [`react-native-image-crop-picker`](https://github.com/ivpusic/react-native-image-crop-picker) | [`expo-image-picker`](https://docs.expo.io/versions/latest/sdk/imagepicker/) |
+| 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/) |
 
 ### `triggerHaptic`
 

docusaurus/docs/reactnative/guides/custom-message-input.mdx

@@ -418,8 +418,8 @@ const CustomAttachButton = () => {
 ```
 
 Now let's hook the relevant action handlers for buttons within ActionSheet.
-[`react-native-image-crop-picker`](https://github.com/ivpusic/react-native-image-crop-picker) provides an image picker functionality
-with good support for configurable compression, multiple images and cropping. And selected images from image picker or camera can be wired in
+[`react-native-image-picker`](https://github.com/react-native-image-picker/react-native-image-picker) provides an image picker functionality
+with good support for multiple images. And selected images from image picker or camera can be wired in
 with upload previews ([`ImageUploadPreview`](../ui-components/image-upload-preview.mdx)) within `MessageInput` component
 by using a function `uploadNewImage` provided by [`MessageInputContext`](../../contexts/message-input-context#uploadnewimage).
 
@@ -429,15 +429,15 @@ provided by the [`MessageInputContext`](../../contexts/message-input-context#pic
 ```tsx {4,10,12-21,23-30,43,46,49}
 import { AttachButton, Channel, useMessageInputContext } from 'stream-chat-react-native';
 import { ActionSheetProvider, useActionSheet } from '@expo/react-native-action-sheet';
-import ImagePicker from 'react-native-image-crop-picker';
+import ImagePicker from 'react-native-image-picker';
 
 const CustomAttachButton = () => {
   const { showActionSheetWithOptions } = useActionSheet();
   const { pickFile, uploadNewImage } = useMessageInputContext();
 
   const pickImageFromGallery = () =>
-    ImagePicker.openPicker({
-      multiple: true,
+    ImagePicker.launchImageLibrary({
+      selectionLimit: 0,
     }).then(images =>
       images.forEach(image =>
         uploadNewImage({
@@ -447,9 +447,7 @@ const CustomAttachButton = () => {
     );
 
   const pickImageFromCamera = () =>
-    ImagePicker.openCamera({
-      cropping: true,
-    }).then(image =>
+    ImagePicker.launchCamera({}).then(image =>
       uploadNewImage({
         uri: image.path,
       }),

examples/ExpoMessaging/package.json

@@ -22,7 +22,7 @@
     "expo-file-system": "~17.0.1",
     "expo-haptics": "~13.0.1",
     "expo-image-manipulator": "~12.0.5",
-    "expo-image-picker": "~15.0.6",
+    "expo-image-picker": "~15.0.7",
     "expo-linking": "~6.3.1",
     "expo-media-library": "~16.0.4",
     "expo-router": "~3.5.17",
@@ -31,7 +31,7 @@
     "expo-status-bar": "~1.12.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-native": "0.74.2",
+    "react-native": "0.74.3",
     "react-native-gesture-handler": "~2.16.1",
     "react-native-reanimated": "~3.10.1",
     "react-native-safe-area-context": "4.10.1",