Message component

The message component of the In-app Chat Kit provides the message list and message transmission features.

• Message list: Allow you to view the message history of a chat.
• Message transmission: Allow you to send or receive one-to-one messages and group messages.

Integrate the message component into your project

Prerequisites

Integrate the In-app Chat Kit SDK into your project (finished the initialization and login are required). For more information, see Quick start.

Add the MessageList component

In the file that needs to use the MessageList component, import the MessageList component. (The MessageListPage component consists of the top bar, MessageList component, and the MessageInput component.)

import { View } from 'react-native';
import { MessageList } from '@zegocloud/zimkit-rn';

// your App.js
export default function App() {
    const conversation = {
        conversationID: '', // The ID of the conversation you want to send messages to.
        type: 0 // 0: One-on-one chat. 2: Group chat.
    }
    return (
        <View style={{flex: 1}}>
             <MessageList
                 conversationID={conversation.conversationID}
                 conversationType={conversation.type}
             ></MessageList>
        </View>
    );
}

Customize features/UI

If the default message-relevant features, behaviors or UI don't fully meet your needs, we allow you to flexibly customize those through the parameters provided by the MessageList and MessageInput mentioned in this section.

MessageListPage has all the parameters of MessageList and MessageInput, so you can pass any parameters to MessageList and MessageInput through MessageListPage.

The usage of commonly used parameters is as follows: