React Native Chat SDK Quick Start | DeadSimpleChat

In this guide we will learn how you can use the Dead Simple Chat's React Native Chat SDK to quickly add chat to your React Native Applications.

Expo Quick Start

If you have a React Native Application using Expo then you can install the Dead Simple Chat React Native SDK using the following command.

expo install deadsimplechat-sdk-react-native

Then in your Component where you can add the Chat, you can use import <DeadSimpleChat /> component.

import { DeadSimpleChat } from "deadsimplechat-sdk-react-native";
import { StatusBar } from "expo-status-bar";
import { Text, View } from "react-native";

export default function App() {
  return (
    <View style={styles.container}>
      <StatusBar style="auto" />

      <DeadSimpleChat roomId="kv-BpWw" publicKey="pub_3732..." />
    </View>
  );
}

You need to add your roomId and your publicKey.

You can obtain the roomId from Dashboard -> Rooms and the public key from Dashboard -> Developers.

React Native Cli Quick Start

Follow the following steps if you are using the React Native Cli instead of expo.

Run the following command to install the SDK and its dependencies.

Step 1: Install Dependencies

npm install deadsimplechat-sdk-react-native react-native-webview@11.26.0 --save

Step 2: Platform Specific Setup

iOS

Then cd into the ios directory and run the pod install command to install Cocapods.

cd ios
npx pod install

Android

No special step need to be performed on Android

Step 4: Usage

Then in your Component where you can add the Chat, you can use import <DeadSimpleChat /> component.

import { DeadSimpleChat } from "deadsimplechat-sdk-react-native";
import { StatusBar } from "expo-status-bar";
import { Text, View } from "react-native";

export default function App() {
  return (
    <View style={styles.container}>
      <StatusBar style="auto" />

      <DeadSimpleChat roomId="kv-BpWw" publicKey="pub_3732..." />
    </View>
  );
}

Listening to Events

You can register callback to listen to the events. For example when a new Message is sent the handleMessage method will be called.

import { DeadSimpleChat } from "deadsimplechat-sdk-react-native";

export default function App() {
  function handleMessage(message) {
    console.log("New Message Arrived::", message);
  }

  return (
    <View>
      <DeadSimpleChat
        debug={true}
        roomId={roomId}
        publicKey={pubKey}
        style={{ marginTop: 0, maxHeight: 500 }}
        ref={chatComponentRef}
        onMessage={handelMessage}
      />
      ;
    </View>
  );
}

List of Available Events

onMessage?
onChannelSelected?
onRoomJoined?
onMessageHistory?
onMessageApproved?
onMessageDeleted?
onUpdateUsers?
onInvalidRoomPassword?
onRoomLimitReached?
onNotAuthorized?
onMessageLiked?
onConversationCreated?
onConversationMessage?
onChannelCreated?
onChannelMessage?
onChannelMessageDeleted?
onChannelMessageApproved?
onChannelMessageLiked?
onConnectError?
onConnectSuccess?
onJoinRoomError?
onLoadCustomizationSuccess?
onLoadCustomizationError?
onLoadTranslationSuccess?
onLoadTranslationError?
onSendMessageError?

Calling Methods

To call the method you have to assing the ref to the <DeadSimpleChat /> component, and then on the ref you can call methods.

import { DeadSimpleChat } from "deadsimplechat-sdk-react-native";
import React from "react";
import { View } from "react-native";

export default function App() {
  const chatComponentRef = useRef();

  const logout = () => {
    chatComponentRef.current?.logout();
  };

  return (
    <View>
      <Button title="Logout" onPress={logout} />
      <DeadSimpleChat
        ref={chatComponentRef}
        debug={true}
        roomId={roomId}
        publicKey={pubKey}
        style={{ marginTop: 0, maxHeight: 500 }}
        ref={chatComponentRef}
        onMessage={handelMessage}
      />;
    </View>
  );
}

List of Available Methods

The methods available are same as in the "JavaScript Chat SDK". To call the method you have use the chatComponentRef.current?.<Method_Name>()

Example: chatComponentRef.current?.logout();

Method Name	Description	Arguments
`connect`	Establishes a connection with the chat server.	No arguments
`joinRoom`	Allows a user to join a specific chat room.	`options: JoinOptions`
`loadCustomization`	Loads customization options for the chat interface.	`customization: Customization`
`loadTranslation`	Loads translation for various elements in the chat interface.	`translation: Translation`
`logout`	Allows a user to log out from the chat server.	No arguments
`sendMessage`	Sends a message to the chat room.	`message: string`
`getMessages`	Retrieves messages from the chat room with optional pagination.	`skip?: Number`
`getChannelMessages`	Retrieves messages from a specific channel with optional pagination.	`channelId: string, skip?: Number`
`getOnlineUsers`	Retrieves a list of users currently online.	No arguments
`getActiveChannels`	Retrieves a list of currently active chat channels.	No arguments
`getActiveConversations`	Retrieves a list of currently active conversations.	No arguments
`createConversation`	Creates a new conversation with a specific user.	`userId: string`
`likeMessage`	Allows a user to like/unlike a specific message.	`messageId: string, reaction: string, action: string`
`replyMessage`	Allows a user to reply to a specific message.	`messageId: string, message: string`
`sendPrivateMessage`	Sends a private message to a specific conversation.	`message: string, conversationId: string`
`sendChannelMessage`	Sends a message to a specific channel.	`message: string, channelId: string`
`selectChannel`	Selects a specific channel to be the active channel.	`channelId: string`
`openConversation`	Opens a specific conversation to be the active conversation.	`conversationId: string`
`approveMessage`	Approves a specific message for display in the chat.	`messageId: string`
`deleteMessage`	Deletes a specific message from the chat.	`messageId: string`
`approveChannelMessage`	Approves a specific message for display in a specific channel.	`messageId: string, channelId: string`
`deleteChannelMessage`	Deletes a specific message from a specific channel.	`messageId: string, channelId: string`
`likeChannelMessage`	Allows a user to like/unlike a specific message in a channel.	`messageId: string, channelId: string, reaction: string, action: string`
`replyChannelMessage`	Allows a user to reply to a specific message in a channel.	`messageId: string, channelId: string, message: string`
`banUser`	Bans a specific user from the chat.	`userId: string`
`banIp`	Bans a specific IP address from accessing the chat.	`ip: string`
`unBanUser`	Unbans a specific user, allowing them to access the chat again.	`userId: string`
`unBanIp`	Unbans a specific IP address, allowing it to access the chat again.	`ip: string`
`getBannedUsers`	Retrieves a list of currently banned users.	No arguments

Expo Quick Start​

React Native Cli Quick Start​

Step 1: Install Dependencies​

Step 2: Platform Specific Setup​

iOS​

Android​

Step 4: Usage​

Listening to Events​

List of Available Events​

Calling Methods​

List of Available Methods​