-
Notifications
You must be signed in to change notification settings - Fork 324
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #2616 from GetStream/develop
Next Release
- Loading branch information
Showing
131 changed files
with
1,990 additions
and
1,426 deletions.
There are no files selected for viewing
Binary file added
BIN
+445 KB
docusaurus/docs/reactnative/assets/guides/native-image-picker/options.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
5 changes: 5 additions & 0 deletions
5
...ative/common-content/ui-components/channel/props/handle_attach_button_press.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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` | |
5 changes: 5 additions & 0 deletions
5
...cs/reactnative/common-content/ui-components/channel/props/has_camera_picker.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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` | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
116 changes: 116 additions & 0 deletions
116
docusaurus/docs/reactnative/guides/native-image-picker.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,116 @@ | ||
| --- | ||
| id: native-image-picker | ||
| title: Native Image Picker | ||
| --- | ||
|
|
||
| import Tabs from '@theme/Tabs'; | ||
| import TabItem from '@theme/TabItem'; | ||
|
|
||
| :::note | ||
| This guide can help you to comply with the new Google Play's [android policy for photo and video permissions](https://support.google.com/googleplay/android-developer/answer/14115180?hl=en). | ||
| ::: | ||
|
|
||
| To enable the native image picker, you need to do the following steps and that would provide a native image picker for both iOS and Android. | ||
|
|
||
| ### Step 1: Uninstall the media library | ||
|
|
||
| Uninstall the media library by running the following command(if you have already installed it) else choose not to install it at all as it is a optional dependency. | ||
|
|
||
| <Tabs | ||
| defaultValue='rncli' | ||
| groupId='rn-platform' | ||
| values={[ | ||
| { label: 'RN CLI', value: 'rncli' }, | ||
| { label: 'Expo', value: 'expo' }, | ||
| ]} | ||
| > | ||
| <TabItem value='rncli'> | ||
|
|
||
| ```bash title="Terminal" | ||
| yarn remove @react-native-camera-roll/camera-roll | ||
| ``` | ||
|
|
||
| </TabItem> | ||
|
|
||
| <TabItem value='expo'> | ||
|
|
||
| ```bash title="Terminal" | ||
| yarn remove expo-media-library | ||
| ``` | ||
|
|
||
| </TabItem> | ||
| </Tabs> | ||
|
|
||
| ### Step 2: Install the native image picker | ||
|
|
||
| Install the native image picker by running the following command: | ||
|
|
||
| <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> | ||
|
|
||
| This shall give you a UI to select images from the gallery using native image picker or take a picture from the camera or alternatively select a file. | ||
|
|
||
|  | ||
|
|
||
| :::note | ||
| Please follow the post installation steps as mentioned in the [react-native-image-picker](https://github.com/react-native-image-picker/react-native-image-picker?tab=readme-ov-file#post-install-steps). | ||
| ::: | ||
|
|
||
| ### Step 3: Add customization(if necessary) | ||
|
|
||
| You can customize what happens on clicking the [`AttachButton`](../ui-components/attach-button.mdx) by passing your own `onPress` function to the `handleAttachButtonPress` of the `Channel` component. | ||
|
|
||
| ```jsx | ||
| import { useCallback } from 'react'; | ||
| import { Channel } from 'stream-chat-react-native'; | ||
|
|
||
| const App = () => { | ||
| const handleAttachButtonPress = useCallback(async () => { | ||
| // Your custom logic here | ||
| }, []); | ||
|
|
||
| return <Channel channel={channel} handleAttachButtonPress={handleAttachButtonPress} />; | ||
| }; | ||
| ``` | ||
|
|
||
| The other alternative is customizing the `AttachButton` component itself. | ||
|
|
||
| ```jsx | ||
| import { AttachButton } from 'stream-chat-react-native'; | ||
|
|
||
| const CustomAttachButton = props => { | ||
| const { onPress } = props; | ||
|
|
||
| const handlePress = async () => { | ||
| // Your custom logic here | ||
| }; | ||
|
|
||
| return <AttachButton onPress={handlePress} />; | ||
| }; | ||
|
|
||
| const App = () => { | ||
| return <Channel channel={channel} AttachButton={CustomAttachButton} />; | ||
| }; | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.