Streamoji - Custom Emoji Library for iOS UITextView

Custom emojis are a fun way to bring more life and customizability to your apps. They're available in some of the most popular apps, such Slack, Discord, and Twitch. However, iOS SDK doesn't provide straight forward support for custom emojis out of the box. Now, you're a couple lines of code away from adding them to your own app with a new free and open source library for iOS, Streamoji.

Image is an animated Streamoji banner showing various custom mojis gifs with the words Streamoji and this is a UITextView

Streamoji is a custom emoji rendering library for iOS. It supports GIF, images (png, jpg, etc...), and Unicode. It loads from URLs or local assets. Caching is taken care of and performance is lightning fast! In this initial version, you can configure a UITextView to render the emojis. You can control the display quality as well as the scale compared to the surrounding text.

Using Streamoji

To get started using Streamoji, create a new iOS project, or navigate to your existing one. You can install Streamoji with CocoaPods, Swift Package Manager, or Carthage. If you just want to see it working, you can clone the Streamoji repository and run the example included.

Where to find custom emojis

Custom emojis can be found on a number of different sites. I recommend looking through Slackmojis and selecting your favorites. You can also create your own.

Define emojis

First step is to define your custom emojis in a dictionary with the key being the :shortcode: for the emoji and the EmojiSource being the, uhmmm, source of the emoji! It can be from GIF or image in a local asset, remote URL, or even a unicode character. You can also define aliases (alternate codes).

import Streamoji

let exampleEmojis: [String: EmojiSource] = [
    // from assets [animated GIF]
    "baby_yoda": .imageAsset("baby-yoda-soup.gif"),
    "banana_dance": .imageAsset("bananadance.gif"),
    "excuse_me": .imageAsset("excuseme.gif"),
    "party_parrot": .imageAsset("party_parrot.gif"),
    "this_is_fine": .imageAsset("this-is-fine-fire.gif"),
    "homer_disappear": .imageAsset("homer-disappear.gif"),
    "carlton": .imageAsset("carlton.gif"),
    
    // from assets [still image (jpg, png, etc)]
    "what": .imageAsset("what.png"),
    "baby_yoda_2": .imageAsset("baby-yoda.png"),
    
    // from remote url
    "let_me_in": .imageUrl("https://github.com/GetStream/Streamoji/blob/main/meta/emojis/let_me_in.gif?raw=true"),
    
    // from unicode
    "smiley": .character("😄"),
    "heart": .character("❤️"),
    
    // aliases
    "banana": .alias("banana_dance"),
    "parrot": .alias("party_parrot")
]

Configure UITextView

After defining your emojis, you should call UITextView.configureEmojis:

textView.attributedText = NSAttributedString(string:
    """
    :banana_dance: Streamoji :party_parrot:
    :baby_yoda: This is a UITextView! :excuse_me:

    Supports:
    GIF :this_is_fine:
    Image :what:
    Local file :homer_disappear:
    Remote file :let_me_in:
    Unicode :smiley:
    """
)

textView.configureEmojis(exampleEmojis, rendering: .highestQuality)

You can also tweak a couple (for now) rendering options: quality and scale in relation to the surrounding text.

Contributing

If you have a feature suggestion or bug report, please file an issue in the Streamoji repository. If you want to take a stab at contributing code, don't hesitate in submitting a PR. Don't forget to leave a star 🙂

Product Hunt

Streamoji is also on Product Hunt. Follow it there to get notified of updates!