How to Customize iMessage Bubbles UI

With every new technology comes the headache of figuring out how it works and what the limitations are. To save you some time, here’s a small recap on how to upload a picture for the new iMessage app bubbles and how to customize the layout in Objective-C to end up with something like this:

1. Upload a picture

The whole bubble UI is managed from the MSMessageTemplateLayout. According to Apple’s documentation, we should be able to use the mediaFileURL. Unfortunately, after multiple attempts, we couldn’t make it work (still not possible on xCode iOS10 GM), so we had to upload it manually using this function:

- (UIImage*) downloadAndCropImage:(NSURL*)URL {
    UIImage* rawImage = [UIImage imageWithData:[NSData dataWithContentsOfURL:URL]];
    int widthSize = MIN(300, rawImage.size.width);
    int heightSize = MIN(240, rawImage.size.height);
int top = (rawImage.size.height - heightSize) / 2;
    int left = (rawImage.size.width - widthSize) / 2;
    CGRect window = CGRectMake(left, top, widthSize , heightSize);
CGImageRef croppedImageRef = CGImageCreateWithImageInRect([rawImage CGImage], window);
    UIImage* cropped = [UIImage imageWithCGImage:croppedImageRef];
    CGImageRelease(croppedImageRef);
    return cropped;
}

You then need to add the image property this way:

MSMessageTemplateLayout* layout = [MSMessageTemplateLayout new];
NSURL* imgURL = [NSURL URLWithString:@"http://www.myimageurl.com"];
layout.image = [self downloadAndCropImage:imgURL];

2. Writing information on the iMessage bubble

Finally, there are six different sections where you can add text on the iMessage bubble. The code should be really straightforward:

The six different sections where you can add text

MSMessageTemplateLayout* layout = [MSMessageTemplateLayout new];
layout.caption = @"Caption";
layout.subcaption = @"Subcaption";
layout.trailingCaption = @"Trailing Caption";
layout.trailingSubcaption = @"Trailing Subcaption";
layout.imageTitle = @"Image Title";
layout.imageSubtitle = @"Image Subtitle";

Tip: Make sure you use a default picture if you don’t want it to end up like this:

How a bubble looks like without a picture

3. Don’t forget the icon images!

They are now required in a new format (60x45, 67x50, 74x55, 27x20, 32x24, etc.). Just make sure you don’t forget them! :)

We built our first iMessage Application using React Native! If you’re curious, it’s now available on the iOS 10 App Store (and featured by Apple!): https://itunes.apple.com/us/app/voo-plan-for-imessage/id1150848622?mt=8