Build In-App chatting with ZEGOCLOUD In-App chatting kit in React Native

Yar Coder's photo
Yar Coder
·

4 min read

Have you ever thought about building an e-commerce App? One of the key factors to make your e-commerce business more effective is to add an in-app chatting feature, with that feature your customers/users can interact in real time with your customer-service person about any queries so he/she doesn't need to visit your physical store every time.

ZEGOCLOUD In-app Chat Kit is a UI component library based on the In-app Chat SDK. It provides various pre-build components like One-to-One chatting or Group chatting etc. You just need to gather actual business logic and plug the UI components

You can also get free 10000 minutes every month as a free trial

By integrating UI features, and components of In-app chatting Kit, it will call related API methods of the Kit SDK for data processing, With this Kit, you just need to create/build logic and plug and play the predefine components.

Online shopping: Having In-App chatting feature in your online shopping business make a good impact on users, as they can ask queries live directly from customer representative.

Social interactions: We often saw live chatting features on youtube and other live streaming sites that make them more impeccable on influencers' fans as fans can interact with their ideas and ask questions.

Interactive live streaming: In-App feature is really useful for influencers who do live streaming frequently they can interact there audience and can answer their queries.

Online education: In the online teaching factor the In-App chatting feature can be really useful for mentors to note queries vie to chat and can answer them.

Online games: If you are in the digital gaming industry then In-App chatting feature is a must for you as while live gaming streaming fans can interact with you and you can gain most of the audience.

Features
In-app Chat Kit supports the following features:

With In-App chatting

  1. You can create/join one-to-one chatting room

  2. You can create/join a group chat room

Generate a UserID using your code, It can be string or number or any (the userID using in below code refers to the peer user you want to chat with.)

const createChat = () => {
    const userID = ''; // The ID of the user you want to talk to.
    navigation.navigate('MessageListPage', {
        conversationID: userID,
        conversationName: userID,
        conversationType: 0,
        appBarActions: [
            {
                icon: 'goBack',
                onPressed: () => {
                    navigation.goBack();
                },
            },
        ],
    });
};

Start a group chat
Generate the UserIDs and groupNames using you code logic (the userIDs using in below code refers to the ID list of the users that you want to invite to the group chat.)

const createGroupChat = () => {
    const groupName = 'test group';  // The name of the group you created.
    const userIDs = []; // The ID list of the users that you want to invite to the group chat.
    const optional = { groupID: 'group1' }; // Optional, you can set it as needed. 
    ZIMKit.createGroup(groupName, userIDs, optional)
        .then(data => {
            if (!data.code) {
                const { groupInfo, errorUserList } = data;
                const { baseInfo } = groupInfo;  // You can get the groupID from baseInfo.groupID, which can be used for other users to get into the group chat.
                // Enter the chat page when the group chat is created successfully.
                navigation.navigate('MessageListPage', {
                    conversationID: baseInfo.groupID,
                    conversationName: baseInfo.groupName,
                    conversationType: 2,
                    appBarActions: [
                        {
                            icon: 'goBack',
                            onPressed: () => {
                                navigation.goBack();
                            },
                        },
                    ],
                });
                if (errorUserList.length) {
                    // When there is no UserIds exist in codebase
                }  
            } else {
                // Implement your event handling logic when failing to create a group chat.
            }
        });
};

Join a group chat
Generate the groupID with you code logic (the groupID using in below code refers to the group chat you want to join.)

const joinGroupChat = () => {
    const groupID = 'group1'; // You can get the groupID via the [createGroup] method (the method used to start a group chat).
    ZIMKit.joinGroup(groupID)
        .then(data => {
            if (!data.code) {
                navigation.navigate('MessageListPage', {
                    conversationID: data.groupInfo.baseInfo.groupID,
                    conversationName: data.groupInfo.baseInfo.groupName,
                    conversationType: 2,
                    appBarActions: [
                        {
                            icon: 'goBack',
                            onPressed: () => {
                                navigation.goBack();
                            },
                        },
                    ],
                });
            } else {
                // Implement your event handling logic when failing to join a group chat.
            }
        });
};

download sample code from HERE
pre-build UI components
Conversation Component
Message Component

zegocloudReact Nativeapp development