The weeks before WWDC are an interesting time to be someone working on an iOS app.

You can hit a dilemma where something that you want/need might not currently exist but could be introduced at WWDC. That was the scenario for me with emoji. With SwiftUI there’s not a built-in emoji picker. For the project I’m working on I really needed one. I had already taken the first steps to writing my own. Emojipedia has lists of emoji categories. I was able to copy/paste them and with the help of awk I extracted just the emojis themselves. I put them into a SwiftUI Sheet and initially it seemed pretty good.

The Emojipedia list didn’t have the emojis that have multiple variations (skin tones, etc). I think those are so important and I would feel terrible if I excluded them. Plus since I was just copy/pasting the emojis I didn’t have any sort of categorization method. I decided to hold off on major changes until the new SwiftUI goodies were announced at WWDC 2021. When a SwiftUI emoji picker wasn’t announced I knew it was time to jump back on the building train.

List appearance

I get distracted by issues a lot. I wanted to put the emojis in a List with sections but realized that I was encountering scenarios where a .listStyle of SidebarListStyle would produce very different looking Lists in two of my projects.

This one actually baffled me for hours but I eventually figured out that in my complex project the View that nagivates to my View with the List was using navigationViewStyle(.stack). That’s what makes the SwiftUI List look different. I’m using navigationViewStyle(.stack) to get around an issue where “isActive” won’t dismiss a View that’s more than one View deep (opened Feedback FB9212872 on this one). Shout out to Marc Palmer for that tip!

JSON bundle found!

With that fixed a Tweet from Jordi really caught my eye.

It turns out that Stewart Lynch had found an emoji JSON blob on UNPKG that contained all kinds of juicy details for categorizing them. I quickly threw together a test project to parse the JSON and was very happy with what I saw. The emojis had all of their different variations present!

Jordi wrote some Swift code for parsing it and was nice enough to put it on GitHub. Give him a shout out if you make use of it! Since Jordi’s code made use of the built-in categories from the JSON I could focus on how to display those categories.

I decided to see how it would look being able to horizontonally scroll through the different categories.

Expanded by default

The one thing I just could not figure out is how he got the List sections to be collapsed by default. Mine always were expanded and no matter how much I searched I couldn’t find a description of how to configure List properly. I finally broke down and asked him the secret. It turns out he didn’t use a List at all. He used a DisclosureGroup!! 🤯 I was able to switch to that and have all of the sections collapsed by default.

Note: The video above was taken on my iPhone running iOS 14. The simulator in Xcode beta 5 has some issues with my project.

The adventure continues later

The emoji adventures will continue later in part two!