Messaging Core SDK

📘

If you want to just query the user data and take care of the UI by yourself, this part describes how to do it. For a quick start with built-in UI components, you can use our Messaging UI Components.

Integrating the SDK

Install the Messaging Core SDK by running:

yarn add '@nabla/react-native-messaging-core'

or

npm install --save '@nabla/react-native-messaging-core' 

Watch user conversations list

You can watch the list of conversations a user has access to.
The successCallback will be called every time there's a change in those conversations and will always return all the data (you don't need to accumulate it in your own properties):

const subscription = NablaMessagingClient.getInstance().watchConversations(
  (error) => {
    // TODO: handle error
    subscription.remove();
  },
  (result: ConversationList) => {
    // You can update your UI with the list of conversations:
    const conversations = result.conversations

    // If hasMore is true, more conversations are available, otherwise you already have all the conversations
    // To load more conversation, you can use `NablaMessagingClient.getInstance().loadMoreConversations`
    const hasMore = result.hasMore
  },
);

Create a new conversation

If you want your user to be able to start a new conversation, you can allow to create it into your app directly:

NablaMessagingClient.getInstance().createConversation(
  (error) => {
    // TODO: Handle error
  },
  (conversationId) => {
    // Conversation is created, watchConversations will be called with that new conversation
  },
);

Send a new message

Creating and sending your message

The user can send a message in an existing conversation:

NablaMessagingClient.getInstance().sendMessage(
  (error) => {
    // TODO: handle error
  },
  () => {
    // Message has been sent successfully!
  },
  new TextMessageInput('Hello World!'),
  conversationId,
);

📘

Message sending is asynchronous

Note that here you don't need to handle failure or success directly: As soon as you call sendMessage(..) the new message will be locally added to the conversation: its status will be SendStatus.Sending.

Different types of messages

You can send following types of messages:

  • Text
  • Image
  • Video
  • Document
  • Audio

Here is how to create each of them:

const textMessageInput = new TextMessageInput('Hello World!');

const imageMessageInput = new ImageMessageInput(
  'file:///uri/from/device/img.jpg',
  ImageMimeType.Jpeg,
  'File name',
);

const videoMessageInput = new VideoMessageInput(
  'file:///uri/from/device/video.mp4',
  VideoMimeType.mp4,
  'File name',
);

const documentMessageInput = new DocumentMessageInput(
  'file:///uri/from/device/document.pdf',
  DocumentMimeType.pdf,
  'File name',
);

const audioMessageInput = new AudioMessageInput(
  'file:///uri/from/device/audio.mpeg',
  AudioMimeType.mpeg,
  'File name',
);

Did this page help you?