react-native-chat-uikit

Overview

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.

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.

UIKit SDK mainly includes the following fragment components:

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.

See the parent document for details on the project development environment, repository download address, configuration information and configuration files.

Important features

• Conversation List
• Chatting in a conversation
• Message bubble List in a conversation

Integrate UIKit Into Your Project.

Create Your Project

1npx react-native init ChatApp

Install UIKit and the required dependencies

1yarn add react-native-chat-uikit

Permission Requirements

On iOS platform:

add permission properties in ios/example/Info.plist file.

1<dict>
2  <key>NSCameraUsageDescription</key>
3  <string></string>
4  <key>NSMicrophoneUsageDescription</key>
5  <string></string>
6  <key>NSPhotoLibraryUsageDescription</key>
7</dict>

On Android platform:

add permission properties in android/app/src/main/AndroidManifest.xml file.

1<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.hyphenate.rn.example">
2  <uses-permission android:name="android.permission.INTERNET"/>
3  <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
4  <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
5  <uses-permission android:name="android.permission.VIBRATE"/>
6  <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
7  <uses-permission android:name="android.permission.CAMERA" />
8  <uses-permission android:name="android.permission.RECORD_AUDIO" />
9</manifest>

Implement Application Code

Minimize integration. If you need to log in, please add additional information or refer to the demo.

1import {
2  ChatFragment,
3  GlobalContainer as UikitContainer,
4  UikitModalPlaceholder,
5} from 'react-native-chat-uikit';
6export default function App() {
7  const appKey = '<your app key>';
8  const chatId = '<peer target ID>'; // The Chat ID. It can be a person or a group.
9  const chatType = 0; // 0 means single person chat. 1 means group chat.
10  return (
11    <UikitContainer
12      option={{ appKey: appKey }}
13      ModalComponent={() => <UikitModalPlaceholder />}
14    >
15      <ChatFragment screenParams={{ chatId, chatType }} />
16    </UikitContainer>
17  );
18}

If you want to experience it quickly, you can refer to this project. UIKit Quick Start Demo

UIKit Instructions

Conversation List Fragment Component

The conversation list component supports updating, adding, deleting session records, style modification, status changes, etc.

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.

The simplest integration example is as follows:

1import * as React from 'react';
2import {
3  ConversationListFragment,
4  ScreenContainer,
5} from 'react-native-chat-uikit';
6export default function ChatScreen(): JSX.Element {
7  const chatId = 'xxx';
8  const chatType = 0;
9  return (
10    <ScreenContainer mode="padding" edges={['right', 'left', 'bottom']}>
11      <ConversationListFragment />
12    </ScreenContainer>
13  );
14}

Typical scenario: You can click on the conversation list item to enter the chat details page. If you need to customize it, you can pay attention to this callback notification.

1export default function ChatScreen(): JSX.Element {
2  const chatId = 'xxx';
3  const chatType = 0;
4  return (
5    <ScreenContainer mode="padding" edges={['right', 'left', 'bottom']}>
6      <ConversationListFragment
7        onPress={(data?: ItemDataType) => {
8          // todo: enter to chat detail screen.
9        }}
10      />
11    </ScreenContainer>
12  );
13}

Typical scenario: You can long-press a session list item to display the context menu for that item. If you need to customize it, you can pay attention to this callback notification.

1export default function ChatScreen(): JSX.Element {
2  const chatId = 'xxx';
3  const chatType = 0;
4  return (
5    <ScreenContainer mode="padding" edges={['right', 'left', 'bottom']}>
6      <ConversationListFragment
7        onLongPress={(data?: ItemDataType) => {
8          // todo: show context menu.
9        }}
10      />
11    </ScreenContainer>
12  );
13}

Typical scenario: Many components need to pay attention to the unread notification to change the status of the message reminder. Follow the callback notification if needed.

1export default function ChatScreen(): JSX.Element {
2  const chatId = 'xxx';
3  const chatType = 0;
4  return (
5    <ScreenContainer mode="padding" edges={['right', 'left', 'bottom']}>
6      <ConversationListFragment
7        onUpdateReadCount={(unreadCount: number) => {
8          // todo: show unread message count.
9        }}
10      />
11    </ScreenContainer>
12  );
13}

Typical scenario: The default sorting is to sort convId, you can set it yourself if you want. Typical application: session sticking to the top.

1export default function ChatScreen(): JSX.Element {
2  const chatId = 'xxx';
3  const chatType = 0;
4  return (
5    <ScreenContainer mode="padding" edges={['right', 'left', 'bottom']}>
6      <ConversationListFragment
7        sortPolicy={(a: ItemDataType, b: ItemDataType) => {
8          if (a.key > b.key) {
9            return 1;
10          } else if (a.key < b.key) {
11            return -1;
12          } else {
13            return 0;
14          }
15        }}
16      />
17    </ScreenContainer>
18  );
19}

Typical scenario: Customize the style of session list items. For example, message top status and second interruption status can be displayed in a customized way. Note If you activate the side sliding function, you need to set the width of the side sliding component.

1export default function ChatScreen(): JSX.Element {
2  const chatId = 'xxx';
3  const chatType = 0;
4  return (
5    <ScreenContainer mode="padding" edges={['right', 'left', 'bottom']}>
6      <ConversationListFragment
7        RenderItem={(props) => {
8          return <View />;
9        }}
10      />
11    </ScreenContainer>
12  );
13}

Chat Detail Fragment Component

The chat component provides a wealth of functions and supports the input of text, emoticons, pictures, voice, files and other types of messages. Supports displaying message list, custom avatar, custom message status, custom message bubble, and can change message status.

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.

The simplest integration example is as follows:

1import * as React from 'react';
2import { ChatFragment, ScreenContainer } from 'react-native-chat-uikit';
3export default function ChatScreen(): JSX.Element {
4  const chatId = 'xxx';
5  const chatType = 0;
6  return (
7    <ScreenContainer mode="padding" edges={['right', 'left', 'bottom']}>
8      <ChatFragment screenParams={{ chatId, chatType }} />
9    </ScreenContainer>
10  );
11}

Typical scenario: After recording the voice, you may need to hide the voice style and send a voice message.

1export default function ChatScreen(): JSX.Element {
2  const chatId = 'xxx';
3  const chatType = 0;
4  return (
5    <ScreenContainer mode="padding" edges={['right', 'left', 'bottom']}>
6      <ChatFragment
7        screenParams={{ chatId, chatType }}
8        onVoiceRecordEnd={(params) => {
9          chatRef.current.sendVoiceMessage(params);
10        }}
11      />
12    </ScreenContainer>
13  );
14}

For example: After selecting a picture, send a picture message

1import type { BizEventType, DataActionEventType } from '../events';
2import { DataEventType } from 'react-native-chat-uikit';
3export default function ChatScreen(): JSX.Element {
4  const chatId = 'xxx';
5  const chatType = 0;
6  React.useEffect(() => {
7    const sub = DeviceEventEmitter.addListener(
8      'DataEvent' as DataEventType,
9      (event) => {
10        const { action } = event as {
11          eventBizType: BizEventType;
12          action: DataActionEventType;
13          senderId: string;
14          params: any;
15          timestamp?: number;
16        };
17        switch (action) {
18          case 'chat_open_media_library':
19            Services.ms
20              .openMediaLibrary({ selectionLimit: 1 })
21              .then((result) => {
22                chatRef.current?.sendImageMessage(result as any);
23              })
24              .catch((error) => {
25                console.warn('error:', error);
26              });
27            break;
28
29          default:
30            break;
31        }
32      }
33    );
34    return () => {
35      sub.remove();
36    };
37  }, [addListeners]);
38  return (
39    <ScreenContainer mode="padding" edges={['right', 'left', 'bottom']}>
40      <ChatFragment screenParams={{ chatId, chatType }} />
41    </ScreenContainer>
42  );
43}

Typical scenario: When the default chat bubble cannot meet the custom requirements, you can design the style of the chat bubble yourself.

Suppose MessageBubbleList is a custom chat bubble list component.

1import type { MessageBubbleListProps } from '../fragments/MessageBubbleList';
2import MessageBubbleList from '../fragments/MessageBubbleList';
3export default function ChatScreen(): JSX.Element {
4  const chatId = 'xxx';
5  const chatType = 0;
6  return (
7    <ScreenContainer mode="padding" edges={['right', 'left', 'bottom']}>
8      <ChatFragment
9        screenParams={{ chatId, chatType }}
10        messageBubbleList={{
11          bubbleList: MessageBubbleListFragment,
12          bubbleListProps: {
13            TextMessageItem: MyTextMessageBubble,
14            VideoMessageItem: MyVideoMessageBubble,
15            FileMessageItem: MyFileMessageBubble,
16          } as MessageBubbleListProps,
17          bubbleListRef: messageBubbleListRefP as any,
18        }}
19      />
20    </ScreenContainer>
21  );
22}

Typical scenario: Unread Count Notifications

1export default function ChatScreen(): JSX.Element {
2  const chatId = 'xxx';
3  const chatType = 0;
4  return (
5    <ScreenContainer mode="padding" edges={['right', 'left', 'bottom']}>
6      <ChatFragment
7        screenParams={{ chatId, chatType }}
8        onUpdateReadCount={(unreadCount: number) => {
9          // TODO: Broadcast no reading notification.
10        }}
11      />
12    </ScreenContainer>
13  );
14}

Typical scenario: playing voice messages, displaying picture previews.

1export default function ChatScreen(): JSX.Element {
2  const chatId = 'xxx';
3  const chatType = 0;
4  return (
5    <ScreenContainer mode="padding" edges={['right', 'left', 'bottom']}>
6      <ChatFragment
7        screenParams={{ chatId, chatType }}
8        onClickMessageBubble={(data: MessageItemType) => {
9          // TODO: If it is a voice message, it plays it, if it is a picture message, it previews it.
10        }}
11      />
12    </ScreenContainer>
13  );
14}

Typical scenario: Long press the message bubble notification

1export default function ChatScreen(): JSX.Element {
2  const chatId = 'xxx';
3  const chatType = 0;
4  return (
5    <ScreenContainer mode="padding" edges={['right', 'left', 'bottom']}>
6      <ChatFragment
7        screenParams={{ chatId, chatType }}
8        onLongPressMessageBubble={() => {
9          // TODO: Displays the context menu. For example, message forwarding, message deletion, message resending, etc.
10        }}
11      />
12    </ScreenContainer>
13  );
14}

Typical scenario: display message context menu, and perform operations such as message forwarding and message cancellation.

1export default function ChatScreen(): JSX.Element {
2  const chatId = 'xxx';
3  const chatType = 0;
4  return (
5    <ScreenContainer mode="padding" edges={['right', 'left', 'bottom']}>
6      <ChatFragment
7        screenParams={{ chatId, chatType }}
8        onClickInputMoreButton={() => {
9          // TODO: Open drawer menu, pop up list, for example: open media library, open document library, etc.
10        }}
11      />
12    </ScreenContainer>
13  );
14}

Typical scenario: Press the voice button notification

1export default function ChatScreen(): JSX.Element {
2  const chatId = 'xxx';
3  const chatType = 0;
4  return (
5    <ScreenContainer mode="padding" edges={['right', 'left', 'bottom']}>
6      <ChatFragment
7        screenParams={{ chatId, chatType }}
8        onPressInInputVoiceButton={() => {
9          // TODO: The voice recording starts.
10        }}
11      />
12    </ScreenContainer>
13  );
14}

Typical scenario: Raise the voice button notification

1export default function ChatScreen(): JSX.Element {
2  const chatId = 'xxx';
3  const chatType = 0;
4  return (
5    <ScreenContainer mode="padding" edges={['right', 'left', 'bottom']}>
6      <ChatFragment
7        screenParams={{ chatId, chatType }}
8        onPressOutInputVoiceButton={() => {
9          // TODO: The voice recording stops.
10        }}
11      />
12    </ScreenContainer>
13  );
14}

Typical scenario: send message notification

1export default function ChatScreen(): JSX.Element {
2  const chatId = 'xxx';
3  const chatType = 0;
4  return (
5    <ScreenContainer mode="padding" edges={['right', 'left', 'bottom']}>
6      <ChatFragment
7        screenParams={{ chatId, chatType }}
8        onSendMessage={(message: ChatMessage) => {
9          // TODO: Update the message.
10        }}
11      />
12    </ScreenContainer>
13  );
14}

Typical scenario: send message completion notification

1export default function ChatScreen(): JSX.Element {
2  const chatId = 'xxx';
3  const chatType = 0;
4  return (
5    <ScreenContainer mode="padding" edges={['right', 'left', 'bottom']}>
6      <ChatFragment
7        screenParams={{ chatId, chatType }}
8        onSendMessageEnd={(message: ChatMessage) => {
9          // TODO: Update message status, success or failure.
10        }}
11      />
12    </ScreenContainer>
13  );
14}

Typical scenario: voice recording end notification

1export default function ChatScreen(): JSX.Element {
2  const chatId = 'xxx';
3  const chatType = 0;
4  return (
5    <ScreenContainer mode="padding" edges={['right', 'left', 'bottom']}>
6      <ChatFragment
7        screenParams={{ chatId, chatType }}
8        onVoiceRecordEnd={(params: any) => {
9          // TODO: Voice files are processed and voice messages are sent.
10        }}
11      />
12    </ScreenContainer>
13  );
14}

Typical scenario: custom background color

1export default function ChatScreen(): JSX.Element {
2  const chatId = 'xxx';
3  const chatType = 0;
4  return (
5    <ScreenContainer mode="padding" edges={['right', 'left', 'bottom']}>
6      <ChatFragment
7        screenParams={{ chatId, chatType }}
8        messageBubbleList={{
9          bubbleList: MessageBubbleListFragment,
10          bubbleListProps: {
11            style: { backgroundColor: 'yellow' },
12          } as MessageBubbleListProps,
13          bubbleListRef: messageBubbleListRefP as any,
14        }}
15      />
16    </ScreenContainer>
17  );
18}

Typical scenario: hide time label

1export default function ChatScreen(): JSX.Element {
2  const chatId = 'xxx';
3  const chatType = 0;
4  return (
5    <ScreenContainer mode="padding" edges={['right', 'left', 'bottom']}>
6      <ChatFragment
7        screenParams={{ chatId, chatType }}
8        messageBubbleList={{
9          bubbleList: MessageBubbleListFragment,
10          bubbleListProps: {
11            showTimeLabel: false,
12          } as MessageBubbleListProps,
13          bubbleListRef: messageBubbleListRefP as any,
14        }}
15      />
16    </ScreenContainer>
17  );
18}

Typical scenario: custom text message style

For example: Modify text message background color, avatar, text bubble, message status, etc.

1export default function ChatScreen(): JSX.Element {
2  const chatId = 'xxx';
3  const chatType = 0;
4  return (
5    <ScreenContainer mode="padding" edges={['right', 'left', 'bottom']}>
6      <ChatFragment
7        screenParams={{ chatId, chatType }}
8        messageBubbleList={{
9          bubbleList: MessageBubbleListFragment,
10          bubbleListProps: {
11            TextMessageItem: (info: ListRenderItemInfo<MessageItemType>) => {
12              return <Text>{info.item.sender}</Text>;
13            },
14          } as MessageBubbleListProps,
15          bubbleListRef: messageBubbleListRefP as any,
16        }}
17      />
18    </ScreenContainer>
19  );
20}

Chat MessageBubble Fragment 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

Other components are in the experimental stage. If you are interested, you can try to use them.

• Basic UI components: Provide basic styles and usage. Reference.
• Internationalization tools: Provides UI language settings. Reference.
• Modal component management tool: Provides unified display and hiding of modal windows. Reference
• Tool class: Provide necessary functions. Reference
• Pasteboard service: Provides copy and paste services.
• Persistent storage service: Provides key-value service.
• Media service: Provides services like opening the media library and selecting pictures, videos, and files.
• Permission service: Provides services for applying for iOS or Android platform permissions.
• File service: Provides folder management service.

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT