-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Update from GetStream/stream-chat-react-native@fc8ba1f
- Loading branch information
stream-ci-bot
committed
Aug 19, 2024
1 parent
1d3122b
commit e0eb2e2
Showing
13 changed files
with
174 additions
and
19 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