feat: make cameraroll library optional (#2604)

* feat: make cameraroll library optional

* feat: introduce native image picker if cameraroll is not available

* fix: native package export

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-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-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,7 +82,6 @@ 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.
@@ -94,7 +93,6 @@ values={[
 </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.
@@ -124,6 +122,7 @@ 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.
@@ -132,11 +131,13 @@ values={[
 - [`@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.
@@ -279,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/overview.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/common-content/ui-components/channel/props/handle_attach_button_press.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/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 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 />

docusaurus/docs/reactnative/core-components/channel.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/customization/native-handlers.mdx

@@ -102,6 +102,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.

examples/ExpoMessaging/app.json

@@ -31,19 +31,9 @@
       "favicon": "./assets/favicon.png",
       "bundler": "metro"
     },
-    "experiments": {
-      "turboModules": true
-    },
     "scheme": "ExpoMessaging",
     "plugins": [
       "expo-router",
-      [
-        "expo-media-library",
-        {
-          "photosPermission": "$(PRODUCT_NAME) would like access to your photo gallery to share image in a message.",
-          "savePhotosPermission": "$(PRODUCT_NAME) would like to save photos to your photo gallery after downloading from a message."
-        }
-      ],
       [
         "expo-image-picker",
         {

examples/ExpoMessaging/package.json

@@ -22,7 +22,6 @@
     "expo-image-manipulator": "~12.0.5",
     "expo-image-picker": "~15.0.5",
     "expo-linking": "~6.3.1",
-    "expo-media-library": "~16.0.4",
     "expo-router": "~3.5.16",
     "expo-sharing": "~12.0.1",
     "expo-splash-screen": "~0.27.5",

examples/ExpoMessaging/yarn.lock

@@ -3957,11 +3957,6 @@ expo-linking@~6.3.1:
     expo-constants "~16.0.0"
     invariant "^2.2.4"
 
-expo-media-library@~16.0.4:
-  version "16.0.4"
-  resolved "https://registry.yarnpkg.com/expo-media-library/-/expo-media-library-16.0.4.tgz#d6b264a201861a2eb055b8c181368d2e7f525ca4"
-  integrity sha512-nX9iN8+XAoERDVGPpDdUbhFwvfYdBpkgTAxwDOYL7heASYCOdxfqQtXy/jv1+QZpj0epaR6Owq/LUn1lVP3ykg==
-
 [email protected]:
   version "1.11.1"
   resolved "https://registry.yarnpkg.com/expo-modules-autolinking/-/expo-modules-autolinking-1.11.1.tgz#4a867f727d9dfde07de8dde14b333a3cbf82ce3c"
@@ -7237,10 +7232,10 @@ [email protected], stream-buffers@~2.2.0:
   version "0.0.0"
   uid ""
 
-[email protected].0:
-  version "5.33.0"
-  resolved "https://registry.yarnpkg.com/stream-chat-react-native-core/-/stream-chat-react-native-core-5.33.0.tgz#14f04de90cbc8db011bab8db3fa84abe2dc2eaec"
-  integrity sha512-V9OJA9MrHzaCw5q16ZRbEktA1HamITbXPOkVZOjpDbb0OBcmedmOnD9C2NFIprc770lhllS/1MKBDr0GdQ9NXQ==
+[email protected].1:
+  version "5.33.1"
+  resolved "https://registry.yarnpkg.com/stream-chat-react-native-core/-/stream-chat-react-native-core-5.33.1.tgz#d9e7847469d3ffb6e7fd35fbb7b720f2e25d172e"
+  integrity sha512-TCDmChJe07cYyL3sErc6qycRFMA+HbflCKRGrFvVvpU0RdWJljaqiOo3avFSauciSnQxx9WxzTkMism8YsFHcQ==
   dependencies:
     "@gorhom/bottom-sheet" "4.4.8"
     dayjs "1.10.5"

examples/TypeScriptMessaging/ios/Podfile.lock

@@ -944,12 +944,14 @@ PODS:
   - React-Mapbuffer (0.73.6):
     - glog
     - React-debug
-  - react-native-cameraroll (5.6.0):
-    - React-Core
   - react-native-document-picker (9.0.1):
     - React-Core
   - react-native-flipper (0.212.0):
     - React-Core
+  - react-native-image-picker (7.1.2):
+    - glog
+    - RCT-Folly (= 2022.05.16.00)
+    - React-Core
   - react-native-image-resizer (1.4.5):
     - React-Core
   - react-native-netinfo (11.3.0):
@@ -1229,9 +1231,9 @@ DEPENDENCIES:
   - React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector-modern`)
   - React-logger (from `../node_modules/react-native/ReactCommon/logger`)
   - React-Mapbuffer (from `../node_modules/react-native/ReactCommon`)
-  - "react-native-cameraroll (from `../node_modules/@react-native-camera-roll/camera-roll`)"
   - react-native-document-picker (from `../node_modules/react-native-document-picker`)
   - react-native-flipper (from `../node_modules/react-native-flipper`)
+  - react-native-image-picker (from `../node_modules/react-native-image-picker`)
   - react-native-image-resizer (from `../node_modules/react-native-image-resizer`)
   - "react-native-netinfo (from `../node_modules/@react-native-community/netinfo`)"
   - react-native-quick-sqlite (from `../node_modules/react-native-quick-sqlite`)
@@ -1343,12 +1345,12 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/logger"
   React-Mapbuffer:
     :path: "../node_modules/react-native/ReactCommon"
-  react-native-cameraroll:
-    :path: "../node_modules/@react-native-camera-roll/camera-roll"
   react-native-document-picker:
     :path: "../node_modules/react-native-document-picker"
   react-native-flipper:
     :path: "../node_modules/react-native-flipper"
+  react-native-image-picker:
+    :path: "../node_modules/react-native-image-picker"
   react-native-image-resizer:
     :path: "../node_modules/react-native-image-resizer"
   react-native-netinfo:
@@ -1464,9 +1466,9 @@ SPEC CHECKSUMS:
   React-jsinspector: 85583ef014ce53d731a98c66a0e24496f7a83066
   React-logger: 3eb80a977f0d9669468ef641a5e1fabbc50a09ec
   React-Mapbuffer: 84ea43c6c6232049135b1550b8c60b2faac19fab
-  react-native-cameraroll: 755bcc628148a90a7c9cf3f817a252be3a601bc5
   react-native-document-picker: 2b8f18667caee73a96708a82b284a4f40b30a156
   react-native-flipper: 9c1957af24b76493ba74f46d000a5c1d485e7731
+  react-native-image-picker: d3db110a3ded6e48c93aef7e8e51afdde8b16ed0
   react-native-image-resizer: d9fb629a867335bdc13230ac2a58702bb8c8828f
   react-native-netinfo: 299dad906cdbf3b67bcc6f693c807f98bdd127cc
   react-native-quick-sqlite: 2b225dadc63b670f027111e58f6f169773f6d755
@@ -1509,4 +1511,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: 90406e1e85c82b37484f5d746afa45c0637bb4b3
 
-COCOAPODS: 1.14.3
+COCOAPODS: 1.15.2