Messaging UI components
Integrate Nabla Messaging UI components into your app
The NablaMessagingUI
library is compatible with iOS 13 and higher, but some features will only be available from iOS 14 and higher:
- selecting multiple images at once from the library.
- uploading document from the
Files
app on users' phone.
This guide assumes that you want to use Nabla's built-in UI components to build your messaging experience. If you're interesting in getting only the data and build your own UI, follow our Core SDK guide.
Conversations list
Once the user is authenticated in your app, you can access their conversations and display them. Be sure to import NablaMessagingUI
for Xcode to find the definition of NablaViewFactory
.
To display the list of conversations your user is a part of, the Nabla SDK provides a NablaViewFactory.createConversationListView
method that returns a ConversationListView
.
Simply include it in your view or view controller:


import NablaMessagingCore
import NablaMessagingUI
import UIKit
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
let conversationListView = NablaViewFactory.createConversationListView(delegate: self)
view.addSubview(conversationListView)
}
}
extension ViewController: ConversationListDelegate {
func conversationList(didSelect conversation: Conversation) {
print("User did select \(conversation.id)")
}
}
ConversationListView
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.
Conversation screen


It's up to you to decide what to do when a user taps a conversation by implementing ConversationListDelegate.conversationList(didSelect:)
.
Usually, you will want to "open" this conversation by pushing a new screen. Change the implementation of ConversationListDelegate
to be as follow:
extension ViewController: ConversationListDelegate {
func conversationList(didSelect conversation: Conversation) {
let destination = NablaViewFactory.createConversationViewController(conversation)
navigationController?.pushViewController(destination, animated: true)
}
}
The ConversationViewController
contains:
- 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.
- A default
navigationItem.titleView
with the conversation image and title.
This screen allows users to:
- Receive:
- A typing indicator
- Text messages
- Images messages (and open them fullscreen)
- Document messages (and open them fullscreen)
- Voice messages (and play them)
- Send:
- A text message
- An images message
- A PDF document message (with files already existing on their device)
- Voice messages (to record with their microphone)
- Act on messages:
- Delete (only their own messages)
Setting up voice messages
In order to make the recording of voice messages work, you must fill your info.plist
with the key NSMicrophoneUsageDescription
, otherwise a crash might occur.
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.shared.createConversation() { result ->
switch result {
case let .success(conversation):
print("User has a new conversation")
case let .error(error):
print("Error \(error)")
}
}
Updated about 1 month ago