How to show relative time in Atlas Conversation List Controller (Layer Chat)

Atlas is a fully featured, high performance, 100% customizable UI kit, built by Layer to power communications interfaces in any app. If you want to learn how to integrate chat in your iOS app, take a look at Implementing Chat/Messaging in iOS apps with Layer.

Although, Atlas is highly customizable, there are a few things that it doesn’t have an option to customize. This post explains how you can update the conversation list in Atlas to include relative time for the same day instead of absolute time. Here’s how it looks by default:

Digging into the code, you will find that the cells in converstaion list are built in ATLConversationTableViewCell. There it defaults to using an absolute time if the date the message was sent on was today. We can create a subclass of the cell and override the date formatting methods to return a relative time instead. Let’s use the DateTools library to handle conversion of NSDates to relative time strings. Add this to your Podfile and do a pod install

pod 'DateTools', '~> 1.5'

Now create a subclass of ATLConversationTableViewCell named PGConversationListTableViewCell.

//
//  PGConversationListTableViewCell.h
//
#import "ATLConversationTableViewCell.h"
@interface PGConversationListTableViewCell : ATLConversationTableViewCell <ATLConversationPresenting>
@end

//
//  PGConversationListTableViewCell.m
//
#import "PGConversationListTableViewCell.h"
#import "NSDate+DateTools.h"

@interface PGConversationListTableViewCell ()
- (NSString *)dateLabelForLastMessage:(LYRMessage *)lastMessage;
@end

@implementation PGConversationListTableViewCell

- (NSString *)dateLabelForLastMessage:(LYRMessage *)lastMessage {
    if (!lastMessage) return @"";
    if (!lastMessage.receivedAt) return @"";
    return lastMessage.receivedAt.timeAgoSinceNow;
}
@end

Now, all we need to do is make Atlas pick up this class instead of the default one when laying out the table view. We can do this when customizing our ATLConversationListViewController. If you created a subclass of the conversation list controller, do this somewhere in viewDidLoad. Otherwise, set the cell class on the ATLConversationListViewController instance when you set up the controller.

[self setCellClass:[PGConversationListTableViewCell class]];

Here’s how your conversation list should look now. Easy, right?

Need help setting this up or just want to chat? Shoot me an email at pulkit110@gmail.com.