Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 5 commits into from
Aug 5, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 8 additions & 4 deletions docusaurus/docs/reactnative/basics/installation.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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.
Expand All @@ -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.
Expand All @@ -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
Expand All @@ -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.
Expand All @@ -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.
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
Enable the file picker on the [`MessageInput`](../../../../ui-components/message-input.mdx) component.

| Type | Default |
| ------- | ------- |
| Boolean | `true` |
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,4 @@ Enable the file picker on the [`MessageInput`](../../../../ui-components/message

| Type | Default |
| ------- | ------- |
| boolean | true |
| Boolean | `true` |
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,4 @@ Enable the image picker on the [`MessageInput`](../../../../ui-components/messag

| Type | Default |
| ------- | ------- |
| boolean | true |
| Boolean | `true` |
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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 />

Expand Down
5 changes: 5 additions & 0 deletions docusaurus/docs/reactnative/core-components/channel.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -524,6 +525,10 @@ The max allowable is 255, which when reached displays as `255+`.

<HandleThreadReply />

### `hasCameraPicker`

<HasCameraPicker />

### `hasCommands`

<HasCommands />
Expand Down
16 changes: 8 additions & 8 deletions examples/SampleApp/ios/Podfile.lock
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -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:
Expand Down Expand Up @@ -1608,7 +1608,7 @@ SPEC CHECKSUMS:
RNFBMessaging: 9b16c72d001787aca05e2fb997e5c979b821dbb4
RNFS: 4ac0f0ea233904cb798630b3c077808c06931688
RNGestureHandler: 2e3251b41d462552997c61afd680220d019fea65
RNImageCropPicker: 14fe1c29298fb4018f3186f455c475ab107da332
RNImageCropPicker: 771e2ca319d2cf92e04ebf334ece892ee9a6728f
RNNotifee: 8e2d3df3f0e9ce8f5d1fe4c967431138190b6175
RNReactNativeHapticFeedback: afa5bf2794aecbb2dba2525329253da0d66656df
RNReanimated: 440ca83ef0a79a3376455663fc4a01300e131240
Expand All @@ -1618,7 +1618,7 @@ SPEC CHECKSUMS:
SDWebImage: a7f831e1a65eb5e285e3fb046a23fcfbf08e696d
SDWebImageWebPCoder: 908b83b6adda48effe7667cd2b7f78c897e5111d
SocketRocket: f32cd54efbe0f095c4d7594881e52619cfe80b17
TOCropViewController: edfd4f25713d56905ad1e0b9f5be3fbe0f59c863
TOCropViewController: 80b8985ad794298fb69d3341de183f33d1853654
Yoga: 9e6a04eacbd94f97d94577017e9f23b3ab41cf6c

PODFILE CHECKSUM: 751ee2c534898a790da0a7dba7d623f1f21ae757
Expand Down
2 changes: 1 addition & 1 deletion examples/SampleApp/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
8 changes: 4 additions & 4 deletions examples/SampleApp/yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
16 changes: 8 additions & 8 deletions examples/TypeScriptMessaging/ios/Podfile.lock
Original file line number Diff line number Diff line change
Expand Up @@ -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):
Expand All @@ -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:
Expand Down Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion examples/TypeScriptMessaging/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,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-quick-sqlite": "^8.0.2",
"react-native-reanimated": "^3.7.0",
Expand Down
8 changes: 4 additions & 4 deletions examples/TypeScriptMessaging/yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -6325,10 +6325,10 @@ react-native-haptic-feedback@^2.0.3:
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==

react-native-image-resizer@^1.4.5:
version "1.4.5"
Expand Down
6 changes: 4 additions & 2 deletions package/expo-package/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
"expo-file-system": "*",
"expo-haptics": "*",
"expo-image-manipulator": "*",
"expo-image-picker": ">=14.1.0",
"expo-image-picker": "*",
"expo-media-library": "*",
"expo-sharing": "*"
},
Expand All @@ -35,6 +35,9 @@
"expo-document-picker": {
"optional": true
},
"expo-image-picker": {
"optional": true
},
"expo-sharing": {
"optional": true
},
Expand All @@ -47,7 +50,6 @@
"expo": "^44.0.0",
"expo-file-system": "^11.0.2",
"expo-image-manipulator": "^9.1.0",
"expo-image-picker": "^14.1.1",
"expo-media-library": "~15.2.3"
},
"scripts": {
Expand Down
1 change: 0 additions & 1 deletion package/expo-package/src/handlers/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,5 +8,4 @@ export * from './NetInfo';
export * from './oniOS14GalleryLibrarySelectionChange';
export * from './saveFile';
export * from './Sound';
export * from './takePhoto';
export * from './Video';
74 changes: 0 additions & 74 deletions package/expo-package/src/handlers/takePhoto.ts

This file was deleted.

2 changes: 1 addition & 1 deletion package/expo-package/src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,14 +13,14 @@ import {
oniOS14GalleryLibrarySelectionChange,
saveFile,
Sound,
takePhoto,
Video,
} from './handlers';

import {
pickDocument,
setClipboardString,
shareImage,
takePhoto,
triggerHaptic,
} from './optionalDependencies';

Expand Down
1 change: 1 addition & 0 deletions package/expo-package/src/optionalDependencies/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,3 +3,4 @@ export * from './shareImage';
export * from './pickDocument';
export * from './triggerHaptic';
export * from './Video';
export * from './takePhoto';
Loading
Loading