Messaging UI components

Integrate Nabla Messaging UI components into your app

📘

This guide assumes that you want to use Nabla's built-in UI components to build your messaging experience. If you're interested in getting only the data and build your own UI, follow Core SDK guide.

⚠️

On Android, your app theme should inherit from Theme.Material3.* by Material3 for Nabla UI components to behave correctly.

Conversations list

Once the user is authenticated in your app, you can access their conversations and display them.

Preview of the conversations list UI componentPreview of the conversations list UI component

To display the list of conversations your user is a part of, the Nabla SDK provides a Component called NablaConversationListView.

NablaConversationListView encompasses a scrollable list of all conversations, along with UI for loading and error states.
The scrolling in the list is wired with a paginated loading of conversations.

Simply include it in your layout:

export default function App() {
  return (
    // ...
    <NablaConversationListView
      onConversationSelected={(conversationId) => {
        // TODO: wire click
      }}
      style={{ flex: 1 }}
    />
    // ...
  );
}

Conversations list in the InboxScreen

While NablaConversationListView provides a higher flexibility and customization,
if all you want is an already-wired standalone screen containing conversations list,
a toolbar and a Start a conversation button, then use:

import { NablaMessagingUI } from "@nabla/react-native-messaging-ui";

NablaMessagingUI.navigateToInbox();

Conversation screen

Preview of the conversations list UI componentPreview of the conversations list UI component

Now the next step is to wire a click on a conversation in the list to launching the conversation screen.
All you need id to define the onConversationSelected prop on NablaConversationListView and use NablaMessagingUI.navigateToConversation:

export default function App() {
  return (
    // ...
    <NablaConversationListView
      onConversationSelected={(conversationId) => {
        NablaMessagingUI.navigateToConversation(conversationId);
      }}
      style={{ flex: 1 }}
    />
    // ...
  );
}

The ConversationScreen contains:

  • The toolbar with a back button and the conversation’s title and subtitle.
  • The timeline of conversation’s content, i.e. messages, with a pagination mechanism.
  • The composer where to type a new message or send media attachments.

⚠️

iOS Specific

Note that in order for users to use the camera to send photo messages, you must fill your info.plist with the key NSCameraUsageDescription, otherwise the option won't show.

And also to make the recording of voice messages work, you must fill your info.plist with the key NSMicrophoneUsageDescription, otherwise the option won't show.

Create a new conversation

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

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

// ...
<Button title="Create Conversation" onPress={createConversation} />;
//...

Did this page help you?