More screenshots available at CocoaControls

Features

See the website for the list of features.

Dependencies

• JSQSystemSoundPlayer

Requirements

• iOS 7.0+
• ARC

Installation

From CocoaPods:

# For latest release in cocoapods
pod 'JSQMessagesViewController'  

# Feeling adventurous? Get the latest on develop
pod 'JSQMessagesViewController', :git => 'https://github.com/jessesquires/JSQMessagesViewController.git', :branch => 'develop'

# For version 5.3.2
pod 'JSQMessagesViewController', :git => 'https://github.com/jessesquires/JSQMessagesViewController', :branch => 'version_5.3.2_patch'

Without CocoaPods:

1. Why aren't you using CocoaPods?
2. Drag the JSQMessagesViewController/ folder to your project and install JSQSystemSoundPlayer.

NOTE:

This repo was formerly named MessagesTableViewController.

And this pod was formerly named JSMessagesViewController.

Getting Started

#import <JSQMessagesViewController/JSQMessages.h>    // import all the things

Read the blog post about the 6.0 release!

• Demo Project

  • There's a sweet demo project: JSQMessages.xcworkspace.
  • Run pod install first.
  • Firebase also has a sweet demo project, and it's in Swift!

• Message Model

  • Your message model objects should conform to the JSQMessageData protocol.
  • However, you may use the provided JSQMessage class.

• Media Attachment Model

  • Your media attachment model objects should conform to the JSQMessageMediaData protocol.
  • However, you may use the provided classes: JSQPhotoMediaItem, JSQLocationMediaItem, JSQVideoMediaItem.
  • Creating your own custom media items is easy! Simply follow the pattern used by the built-in media types.
  • Also see JSQMessagesMediaViewBubbleImageMasker for masking your custom media views as message bubbles.

• Avatar Model

  • Your avatar model objects should conform to the JSQMessageAvatarImageDataSource protocol.
  • However, you may use the provided JSQMessagesAvatarImage class.
  • Also see JSQMessagesAvatarImageFactory for easily generating custom avatars.

• Message Bubble Model

  • Your message bubble model objects should conform to the JSQMessageBubbleImageDataSource protocol.
  • However, you may use the provided JSQMessagesBubbleImage class.
  • Also see JSQMessagesBubbleImageFactory and UIImage+JSQMessages.h for easily generating custom bubbles.

• View Controller

  • Subclass JSQMessagesViewController.
  • Implement the required methods in the JSQMessagesCollectionViewDataSource protocol.
  • Implement the required methods in the JSQMessagesCollectionViewDelegateFlowLayout protocol.
  • Set your senderId and senderDisplayName. These properties correspond to the methods found in JSQMessageData and determine which messages are incoming or outgoing.

• Customizing

  • The demo project is well-commented. Please use this as a guide.

Quick Tips

Springy bubbles?

- (void)viewDidAppear:(BOOL)animated
{
    [super viewDidAppear:animated];
    self.collectionView.collectionViewLayout.springinessEnabled = YES;
}

Remove avatars?

- (void)viewDidLoad
{
    [super viewDidLoad];
    self.collectionView.collectionViewLayout.incomingAvatarViewSize = CGSizeZero;
    self.collectionView.collectionViewLayout.outgoingAvatarViewSize = CGSizeZero;
}

- (id<JSQMessageAvatarImageDataSource>)collectionView:(JSQMessagesCollectionView *)collectionView avatarImageDataForItemAtIndexPath:(NSIndexPath *)indexPath
{
    return nil;
}

Customize your cells?

- (UICollectionViewCell *)collectionView:(JSQMessagesCollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    JSQMessagesCollectionViewCell *cell = (JSQMessagesCollectionViewCell *)[super collectionView:collectionView cellForItemAtIndexPath:indexPath];
    
    // Customize the shit out of this cell
    // See the docs for JSQMessagesCollectionViewCell
    
    return cell;
}

Customize your toolbar buttons?

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    // This button will call the `didPressAccessoryButton:` selector on your JSQMessagesViewController subclass
    self.inputToolbar.contentView.leftBarButtonItem = /* custom button or nil to remove */
    
    // This button will call the `didPressSendButton:` selector on your JSQMessagesViewController subclass
    self.inputToolbar.contentView.rightBarButtonItem = /* custom button or nil to remove */
    
    // Swap buttons, move send button to the LEFT side and the attachment button to the RIGHT
    // For RTL language support
    self.inputToolbar.contentView.leftBarButtonItem = [JSQMessagesToolbarButtonFactory defaultSendButtonItem];
    self.inputToolbar.contentView.rightBarButtonItem = [JSQMessagesToolbarButtonFactory defaultAccessoryButtonItem];
    
    // The library will call the correct selector for each button, based on this value
    self.inputToolbar.sendButtonOnRight = NO;
}

Questions & Help

There's a label for that. Before asking a question, see if it has already been answered. Please only ask questions that are specific to this library.

NOTE: Please try to avoid emailing me with questions. I prefer to keep questions and their answers open-source.

Migrating between major versions

From 5.x to 6.x

See the 6.0 release notes for details about API changes.

From 6.x to 7.x

See the 7.0 release notes for details about API changes.

Documentation

Read the fucking docs, available here via @CocoaDocs.

Contribute

Please follow these sweet contribution guidelines.

Donate

Support the development of this free open-source library!

Donations made via Square Cash

Send $5 Just saying thanks. Here's a coffee! ☕

Send $10 This library is great. Lunch is on me! 🍜

Send $25 This totally saved me time. Go get a nice dinner! 🍴

Send $50 I love this library. I want new features! 👏

Send $100 I really want to support this project! 🎉

>*You can also send donations via [PayPal](https://www.paypal.com). Message me on [twitter](https://twitter.com/jesse_squires).*

Credits

Created by @jesse_squires, a programming-motherfucker.

• Assets extracted using @0xced / iOS-Artwork-Extractor.
• Originally inspired by @soffes / SSMessagingViewController.
• Many thanks to the contributors of this project.

About

I initially developed this library to use in Hemoglobe for private messages between users.

As it turns out, messaging is something that iOS devs and users really want. Messaging of any kind has turned out to be an increasingly popular mobile app feature in all sorts of contexts and for all sorts of reasons. Thus, I am supporting this project in my free time and have added features way beyond what Hemoglobe ever needed.

Feel free to read my blog and check out my work at Hexed Bits.

Apps using this library

• Hemoglobe
• PocketSuite
• Signal
• ClassDojo
• Schools App
• ChatSecure
• Bryx 911
• Kytt
• Spark Social
• Spabbit
• Elodie
• Instaply
• Loopse
• Oxwall Messenger
• FourChat
• vCinity
• Quick Text Message
• Libraries for developers
• Buhz|Hyve
• Ringring.io
• gDecide
• AwesomeChat
• ParseChat
• Jib
• Onvolo
• EVCloudKitDao
• Fluky Chat
• VillageUnity
• Pine
• NotificationChat
• RealtimeChat
• Bazar
• Roomie
• Your app here

License

JSQMessagesViewController is released under an MIT License. See LICENSE for details.

Copyright © 2013-present Jesse Squires.

Please provide attribution, it is greatly appreciated.