+
+ | Module |
+ Methods And Properties |
+ Description |
+
+
+ | Conversation List |
+
+
+ | Conversation list |
+
+ Presents the conversation information, including the user's avatar and nickname, content of the last message, unread message count, and the time when the last message is sent or received. Support custom session list item style, support custom side menu.
+ |
+
+
+ | Add conversation |
+
+ Adds the conversation to the conversation list. Typical application scenario: Receive a new message and open a new session.
+ |
+
+
+ | Update conversation |
+
+ Updates the conversation in the conversation list.
+ |
+
+
+ | Delete conversation |
+
+ Deletes the conversation from the conversation list.
+ |
+
+
+ | Update conversation read count |
+
+ All messages for this conversation have been read.
+ |
+
+
+ | Update conversation extension attribute |
+
+ Update session custom attributes. Typical application scenario: conversation do not disturb.
+ |
+
+
+ | Chat |
+
+
+ | Message Bubble List |
+
+ Provides built-in bubble styles for messages of some types and support custom message bubble styles. Support message bubble click event, long press event operation. Support message bubble adding, updating and deleting.
+ |
+
+
+ | Send Message |
+ Supports sending various types of messages. Update message delivery status. Supports sending notifications before and after a message is sent. |
+
+
+ | emoji |
+ Supports the display, sending and receiving of emoji expressions. |
+
+
+ | Input Bar |
+ Supports text and expression input, voice recording, and customizable more menus. |
+
+
+
+# Send your first message
We'll take the easiest way to build the chat app you want. The chat application page can be built mainly using the components `UikitContainer` and `ChatFragment`.
@@ -67,7 +135,7 @@ add permission properties in `android/app/src/main/AndroidManifest.xml` file.
## CodingSource Code Implementation
-Initialize the UiKit SDK. Fill in the necessary parameters. For example: appkey.
+Initialize the UIKit SDK. Fill in the necessary parameters. For example: appkey.
```typescript
import {
@@ -108,9 +176,9 @@ export default function ChatScreen(): JSX.Element {
If you need to view the complete code or run it, you can download the project and try it locally. [portal](https://github.com/AgoraIO-Usecase/AgoraChat-UIKit-rn)
-# UiKit Detail
+# UIKit Detail
-## Download UiKit SDK && Examples
+## Download UIKit SDK && Examples
```sh
git clone git@github.com:AgoraIO-Usecase/AgoraChat-rn.git
@@ -142,68 +210,7 @@ yarn && yarn run example-env && yarn run sdk-version
## Fragment Components
-UiKit SDK fragment components usually consists of three parts. Method, property and callback notifications. The method part is called through the `propRef` object and can be executed actively. For example: let the child component get focus. Properties can change the style of a component and affect its behavior. Callback notifications can receive component state changes.
-
-UiKit SDK mainly includes the following fragment components:
-
-
-
- | Module |
- Function |
- Description |
-
-
- | Conversation List |
-
-
- | Conversation list |
-
- Presents the conversation information, including the user's avatar and nickname, content of the last message, unread message count, and the time when the last message is sent or received.
- |
-
-
- | Add conversation |
-
- Adds the conversation to the conversation list
- |
-
-
- | Update conversation |
-
- Updates the conversation in the conversation list
- |
-
-
- | Delete conversation |
-
- Deletes the conversation from the conversation list
- |
-
-
- | Chat |
-
-
- | Message Bubble |
-
- Provides built-in bubble styles for messages of some types and support custom
- message bubble styles.
- |
-
-
- | Send Message |
- Supports message sending. |
-
-
- | Message Bubble Event |
-
- Supports events for clicking and holding down message bubbles.
- |
-
-
- | emoji |
- Support ink emojis with Unicode codes. |
-
-
+UIKit SDK fragment components usually consists of three parts. Method, property and callback notifications. The method part is called through the `propRef` object and can be executed actively. For example: let the child component get focus. Properties can change the style of a component and affect its behavior. Callback notifications can receive component state changes.
## Conversation List Fragment Component
diff --git a/packages/react-native-chat-uikit/README.md b/packages/react-native-chat-uikit/README.md
index 6b584f4..922e040 100644
--- a/packages/react-native-chat-uikit/README.md
+++ b/packages/react-native-chat-uikit/README.md
@@ -1,35 +1,15 @@
# react-native-chat-uikit
-Instant messaging connects people wherever they are and allows them to communicate with others in real time. With built-in user interfaces (UI) for the message list, the [Agora Chat UI Samples](https://github.com/AgoraIO-Usecase/AgoraChat-UIKit-rn) enables you to quickly embed real-time messaging into your app without requiring extra effort on the UI.
+Agora Chat UIKit for React-Native is a development kit with an user interface that enables an easy and fast integration of standard chat features into new or existing client apps. The Agora Chat UIKit SDK is designed on the basis of the Agora Chat SDK. It provides UI components to achieve efficient application development. Also it encapsulates necessary modules of the Agora Chat SDK and some basic tools to facilitate application development.
-## Environment Requirements
+Agora Chat UiKit provides basic components and advanced fragment components. Base components are used by fragment components. Fragment components provide methods, properties, and callback notifications. Fragment components are developed around the chat business, which is more suitable for quickly building chat applications.
-- react-native: 0.66.0 or later
-- nodejs: 16.18.0 or later
-
-## Download link
-
-```sh
-git clone git@github.com:AgoraIO-Usecase/AgoraChat-rn.git
-```
-
-## Initialization
-
-In the terminal, go to the project root directory.
-
-```sh
-cd react-native-chat-library
-yarn && yarn run generate-source-env
-```
-
-## Introduction
-
-The Agora Chat UIKit SDK is designed on the basis of the Agora Chat SDK. It provides UI components to achieve efficient application development. Also it encapsulates necessary modules of the Agora Chat SDK and some basic tools to facilitate application development.
+**See the [parent document](./../../README.md) for details on the project development environment, repository download address, configuration information and configuration files.**
| Module |
- Function |
+ Methods And Properties |
Description |
@@ -37,25 +17,25 @@ The Agora Chat UIKit SDK is designed on the basis of the Agora Chat SDK. It prov
| Conversation list |
-
- Presents the conversation information, including the user's avatar and nickname, content of the last message, unread message count, and the time when the last message is sent or received.
+ |
+ Presents the conversation information, including the user's avatar and nickname, content of the last message, unread message count, and the time when the last message is sent or received. Support custom session list item style, support custom side menu.
|
| Add conversation |
-
+ |
Adds the conversation to the conversation list
|
| Update conversation |
-
+ |
Updates the conversation in the conversation list
|
| Delete conversation |
-
+ |
Deletes the conversation from the conversation list
|
@@ -64,91 +44,97 @@ The Agora Chat UIKit SDK is designed on the basis of the Agora Chat SDK. It prov
| Message Bubble |
-
- Provides built-in bubble styles for messages of some types and support custom
- message bubble styles.
+ |
+ Provides built-in bubble styles for messages of some types and support custom message bubble styles. Support message bubble click event, long press event operation.
|
| Send Message |
- Supports message sending. |
+ Supports sending various types of messages. Update message delivery status. Supports sending notifications before and after a message is sent. |
| Message Bubble Event |
-
+ |
Supports events for clicking and holding down message bubbles.
|
| emoji |
- Support ink emojis with Unicode codes. |
+ Supports the display, sending and receiving of emoji expressions. |
-## Function list
-
-### Conversation list component
-
-- Provided APIs
- - update: Updates the conversation list item.
- - create: Creates a conversation list item.
- - remove: Removes a conversation list item.
- - updateRead: Sets the conversation as read.
- - updateExtension: Sets conversation custom fields.
-- Provided properties or event callbacks
- - propsRef: Sets the conversation list controller.
- - onLongPress: Occurs when a conversation list item is held down.
- - onPress: Occurs upon a click on a conversation list item.
- - onUpdateReadCount: Occurs when a conversation list item is updated.
- - sortPolicy: Sets the rules of sorting out conversation list items.
- - RenderItem: Customizes the style of the conversation list items.
-
-### Chat details component
-
-- Provided APIs
- - sendTextMessage: Sends a text message.
- - sendImageMessage: Sends an image message.
- - sendVoiceMessage: Sends a voice message.
- - sendCustomMessage: Sends a custom message.
- - sendFileMessage: Sends a file message.
- - sendVideoMessage: Sends a video message.
- - sendLocationMessage: Sends a location message.
- - loadHistoryMessage: Loads historical messages.
- - deleteLocalMessage: Deletes local messages.
- - resendMessage: Resends a message that fails to be sent.
- - downloadAttachment: Downloads a message attachment.
-- Provided properties or event callbacks
- - propsRef: Sets the chat component controller.
- - screenParams: Sets the parameters of the chat component.
- - messageBubbleList: Set the custom message bubble component.
- - onUpdateReadCount: Occurs when the count of unread messages is updated.
- - onClickMessageBubble: Occurs upon a click on the message bubble notification
- - onLongPressMessageBubble: Occurs when a message bubble is held down.
- - onClickInputMoreButton: Occurs when the More button is pressed.
- - onPressInInputVoiceButton: Occurs when the voice button is pressed.
- - onPressOutInputVoiceButton: Occurs when the voice button is released.
- - onSendMessage: Occurs when the message starts to be sent.
- - onSendMessageEnd: Occurs when the message sending is complete.
- - onVoiceRecordEnd: Occurs when the recording of a voice message is complete.
-
-**Chat Bubble Component**
-
-- Provided APIs
- - scrollToEnd: Scrolls to the bottom of the page.
- - scrollToTop: Scrolls to the top of the page.
- - addMessage: Adds a message.
- - updateMessageState: Updates the message state.
- - delMessage: Deletes a message bubble item.
- - resendMessage: Resends a message.
-- Provided properties or event callbacks
- - onRequestHistoryMessage: pull down to refresh request history message notification
- - TextMessageItem: Customizes the style of text messages.
- - ImageMessageItem: Customizes the style of image messages.
- - VoiceMessageItem: Customizes the style of voice messages.
- - FileMessageItem: Customizes the style of file messages.
- - LocationMessageItem: Customizes the style of location messages.
- - VideoMessageItem: Customizes the style of video messages.
- - CustomMessageItem: Customizes the style of custom messages.
+## Conversation List Fragment Component
+
+The methods it provides include:
+
+- update: Updates the conversation list item.
+- create: Creates a conversation list item.
+- remove: Removes a conversation list item.
+- updateRead: Sets the conversation as read.
+- updateExtension: Sets conversation custom fields.
+
+The properties and callback notifications it provides include:
+
+- propsRef: Sets the conversation list controller.
+- onLongPress: Occurs when a conversation list item is held down.
+- onPress: Occurs upon a click on a conversation list item.
+- onUpdateReadCount: Occurs when a conversation list item is updated.
+- sortPolicy: Sets the rules of sorting out conversation list items.
+- RenderItem: Customizes the style of the conversation list items.
+
+## Chat Detail Fragment Component
+
+The methods it provides include:
+
+- sendTextMessage: Sends a text message.
+- sendImageMessage: Sends an image message.
+- sendVoiceMessage: Sends a voice message.
+- sendCustomMessage: Sends a custom message.
+- sendFileMessage: Sends a file message.
+- sendVideoMessage: Sends a video message.
+- sendLocationMessage: Sends a location message.
+- loadHistoryMessage: Loads historical messages.
+- deleteLocalMessage: Deletes local messages.
+- resendMessage: Resend a message that fails to be sent.
+- downloadAttachment: Downloads a message attachment.
+
+The properties and callback notifications it provides include:
+
+- propsRef: Sets the chat component controller.
+- screenParams: Sets the parameters of the chat component.
+- messageBubbleList: Set the custom message bubble component.
+- onUpdateReadCount: Occurs when the count of unread messages is updated.
+- onClickMessageBubble: Occurs upon a click on the message bubble notification
+- onLongPressMessageBubble: Occurs when a message bubble is held down.
+- onClickInputMoreButton: Occurs when the More button is pressed.
+- onPressInInputVoiceButton: Occurs when the voice button is pressed.
+- onPressOutInputVoiceButton: Occurs when the voice button is released.
+- onSendMessage: Occurs when the message starts to be sent.
+- onSendMessageEnd: Occurs when the message sending is complete.
+- onVoiceRecordEnd: Occurs when the recording of a voice message is complete.
+
+**SubComponent chat message bubble component:**
+
+The methods it provides include:
+
+- scrollToEnd: Scrolls to the bottom of the page.
+- scrollToTop: Scrolls to the top of the page.
+- addMessage: Adds a message.
+- updateMessageState: Updates the message state.
+- delMessage: Deletes a message bubble item.
+- resendMessage: Resend a message.
+
+The properties and callback notifications it provides include:
+
+- onRequestHistoryMessage: pull down to refresh request history message notification
+- TextMessageItem: Customizes the style of text messages.
+- ImageMessageItem: Customizes the style of image messages.
+- VoiceMessageItem: Customizes the style of voice messages.
+- FileMessageItem: Customizes the style of file messages.
+- LocationMessageItem: Customizes the style of location messages.
+- VideoMessageItem: Customizes the style of video messages.
+- CustomMessageItem: Customizes the style of custom messages.
### Other components