|
1 | | -## v3.2.0 |
| 1 | +## v3.3.0 |
2 | 2 |
|
3 | | -- Add chat init params to `chatOptions` in `SendbirdUIKitContainer` props. |
4 | | -- Add `reaction.onPressUserProfile` to `SendbirdUIKitContainer` props. |
5 | | -- Add `scrollToMessage` to `GroupChannelContexts.MessageList`. |
6 | | -- Add Voice message |
| 3 | +- Add typing indicator bubble feature. |
| 4 | + |
| 5 | + `TypingIndicatorBubble` is a new typing indicator UI that can be turned on through `typingIndicatorTypes` option. |
| 6 | + When turned on, it will be displayed in `GroupChannelMessageList` upon receiving typing event in real time. |
7 | 7 |
|
8 | 8 | ```tsx |
| 9 | + import { SendbirdUIKitContainer, TypingIndicatorType } from '@sendbird/uikit-react-native'; |
| 10 | + |
9 | 11 | const App = () => { |
10 | 12 | return ( |
11 | 13 | <SendbirdUIKitContainer |
12 | 14 | uikitOptions={{ |
13 | 15 | groupChannel: { |
14 | | - enableVoiceMessage: true, |
| 16 | + typingIndicatorTypes: new Set([TypingIndicatorType.Bubble]), |
15 | 17 | }, |
16 | 18 | }} |
17 | | - platformServices={{ |
18 | | - recorder: RecorderService, |
19 | | - player: PlayerService, |
20 | | - }} |
21 | 19 | /> |
22 | 20 | ); |
23 | 21 | }; |
24 | 22 | ``` |
25 | 23 |
|
26 | | - Before using it, you should implement the `RecorderService` and `PlayerService` platform services.<br/> |
27 | | - You can implement this easily by using helper functions. |
| 24 | +- Add `bottomSheetItem` to the props of renderMessage. |
| 25 | + |
| 26 | + `bottomSheetItem` is a new prop for `renderMessage` that can be utilized to add a custom item to the bottom sheet of a message. |
| 27 | + It can be used to add a custom menu item to the bottom sheet of a message. |
| 28 | + |
| 29 | + ```tsx |
| 30 | + import { GroupChannelMessageRenderer } from '@sendbird/uikit-react-native'; |
| 31 | + import { useBottomSheet } from '@sendbird/uikit-react-native-foundation'; |
| 32 | + |
| 33 | + const GroupChannelScreen = () => { |
| 34 | + const { openSheet } = useBottomSheet(); |
| 35 | + |
| 36 | + const onOpenMessageMenu = () => { |
| 37 | + if (!props.bottomSheetItem) return; |
28 | 38 |
|
29 | | - > - CLI |
30 | | - > - Install `react-native-permissions` and `react-native-audio-recorder-player`. |
31 | | - > - Create platform services using `createNativeRecorderService` and `createNativePlayerService`. |
32 | | - > - Expo: |
33 | | - > - Install `expo-av` |
34 | | - > - Create platform services using `createExpoRecorderService` and `createExpoPlayerService`. |
| 39 | + openSheet({ |
| 40 | + ...props.bottomSheetItem, |
| 41 | + sheetItems: [ |
| 42 | + // Update bottomSheetItem.sheetItems or append your custom menu item |
| 43 | + ...props.bottomSheetItem.sheetItems, |
| 44 | + { icon: 'search', title: 'Search', onPress: () => console.log('Search') }, |
| 45 | + ], |
| 46 | + }); |
| 47 | + }; |
| 48 | + |
| 49 | + return ( |
| 50 | + <GroupChannelFragment |
| 51 | + renderMessage={(props) => { |
| 52 | + return ( |
| 53 | + <GroupChannelMessageRenderer {...props} onLongPress={() => onOpenMessageMenu(props.bottomSheetItem)} /> |
| 54 | + ); |
| 55 | + }} |
| 56 | + /> |
| 57 | + ); |
| 58 | + }; |
| 59 | + ``` |
35 | 60 |
|
36 | | -- Fix the display of a message unavailable text if the message is not accessible. |
37 | | -- Fix the search for messages within an accessible range. |
38 | | -- Fix the usage of color variants in unknown group channel messages. |
39 | | -- Fix the ensure that the UIKit configuration is always initialized, even in offline mode. |
| 61 | +- Fix the not found `Promise.allSettled` error in Hermes. |
| 62 | +- Fix the vertical alignment of iOS TextInput. |
0 commit comments