📘

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

⚠️

Android specific

The theme of your app or activity 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.

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:

tsx

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

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:

tsx

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

Some features require filling your info.plist file:

• To use the camera to send photo messages, you must fill your info.plist with the key NSCameraUsageDescription, otherwise the option won't show.
• To make the recording of voice messages work, you must fill your info.plist with the key NSMicrophoneUsageDescription, otherwise the option won't show.

Conversation screen as React Native Component

The conversation screen is also available as a React Native Component: NablaConversationView.

NablaConversationView encompasses a scrollable list of all messages, along with the composer to send new messages.
The scrolling in the list is wired with a paginated loading of messages.

Simply include it in your layout:

export default function Screen() {
  return (
    <NablaConversationView
      conversationId={conversationId}
      style={{ flex: 1 }}
    />
  );
}

⚠️

Android known issue

When sending a media that require user's permission, the media capture is not shown immediately after the user grants the permission.
The user need to tap again on the media capture button in the composer.

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 startConversation = () => {
  NablaMessagingClient.getInstance().startConversation((conversationId) => {
    NablaMessagingUI.navigateToConversation(conversationId);
  });
};

// ...
<Button title="Start Conversation" onPress={startConversation} />;
//...