I love the animated emoji on the apple watch. However I didn’t talk about it when I did the text input video for The Apple watchOS 4 App Development Essential Training, so here’s my chance to correct that. There’s some good news and bad news about implementation of this fun feature. The good news is it is easy to do. The bad news, we’ll get to.

If you download the example file, you’ll find a fully implemented text input control. It consists of two labels, a button and an image view.

Heading over to the code, I set it up for getting text input. Take look at the Apple watchOS4 course for details, but just to review, text is a separate modal view, with the ability to use several options, including a list of suggested responses. You make an array of your suggestions and send them to the modal. IN my code that is:

let suggestions = ["Yes","No","Later, Dude"]

I’ll add one more just for fun. Put two quotes in. Press control-command-spacebar to get the emoji panel and select an emoji.

I’ll go for the sunglasses.

let suggestions = ["Yes","No","😎","Later, Dude"]

The presentTextInputController method displays the text input modal. You have two parameters and a closure. The first parameter is the suggestions, the second what types of input you allow. The closure handles the results. With the .plain and .allowEmoji modes, you get text-based input. If the results are nil, the user cancelled the input.

presentTextInputController(withSuggestions: suggestions, allowedInputMode: .allowEmoji) { (results) in
            guard let responses = results else {
                self.label.setText("Cancelled")
                return
            }
            if let text = responses[0] as? String{
                self.label.setText(text)
            }
        }

I’ve got my simulators running already, so I’ll run this. I’ll press the button and get the types of input.

Scrolling down, The suggestions include my emoji guy,

but I can get emoji by tapping the Emoji button, and selecting one there too.

I get a emoji this way, which is text. I’ll stop the app, and change the allowedInputMode to .allowAnimatedEmoji. That’s all you need to do to select one of the animated emoji from the watch. To read it, you’ll need a bit more code, and there is both the good news and the bad news. results returns a Data object, and you can easily convert it to an image. So I’ll do that.

if let data = responses[0] as? Data{
    let emoji = UIImage(data: data)
}

And that brings us to the bad news. It’s a single image, not the array of images you need to animate the emoji.
In the example file, I added the image outlet for you, so send the image there.

self.image.setImage(emoji)

Its time to run Run this and try it out. However, It seems since I recorded the video , the current version (v10) of Simulator deprecated animated emojis. So You’ll need a watch to see this. I’ll run this on my watch.

I’ll tap the text button again, and then the emoji button.

Swipe left to get the face emojis, and turning the digital crown I’ll load that sunglasses guy.

Hit done and the image shows on the image part of the display.

You can hit text again and in the suggestion hit the sunglasses guy autosuggestion to see the difference.

Given that results is an array, I suspect some day we’ll get an array of Data and be able to animate this. I’d also love to add images here too, which you can’t yet. For now you get an image, which might be useful somewhere. This isn’t the most earth shattering innovation on the Apple watch, but you can have some fun with it.

The Whole Code

You’ll find the completed project at GitHub here

//
//  InterfaceController.swift
//  WatchText WatchKit Extension
//
//  Created by Steven Lipton on 9/21/16.
//  Copyright © 2016 Steven Lipton. All rights reserved.
//

import WatchKit
import Foundation


class InterfaceController: WKInterfaceController {
    @IBOutlet var label: WKInterfaceLabel!
    @IBOutlet var image: WKInterfaceImage!
    
    
    @IBAction func addText() {
   let suggestions = ["Yes","No","😎","Later, Dude"]
        presentTextInputController(withSuggestions: suggestions, allowedInputMode: .allowAnimatedEmoji) { (results) in
            guard let responses = results else {
                self.label.setText("Cancelled")
                return
            }
            if let text = responses[0] as? String{
                self.label.setText(text)
            }
            if let data = responses[0] as? Data{
                let emoji = UIImage(data: data)
                self.image.setImage(emoji)
            }                                                                                     
        }
        
        
        
    
    }
    
    override func awake(withContext context: Any?) {
        super.awake(withContext: context)
        
        // Configure interface objects here.
    }
    
    override func willActivate() {
        // This method is called when watch view controller is about to be visible to user
        super.willActivate()
    }
    
    override func didDeactivate() {
        // This method is called when watch view controller is no longer visible
        super.didDeactivate()
    }

}