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.
I'm currently debating if I should spend time improving this clunky emoji picker I wrote in SwiftUI. I have a feeling that if I do they'll introduce one with iOS 15. pic.twitter.com/giYy1IXHXs— Chris Wu (@MuseumShuffle) April 15, 2021
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.
I was going to be so smug about my SwiftUI emoji picker. pic.twitter.com/6J42mmfuxQ— Chris Wu (@MuseumShuffle) June 9, 2021
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.
I could really use some ideas as to why two SwiftUI Lists using the same .listStyle of SidebarListStyle look so different. The right is a super simple test project. Left is a "real" project. For the left where are the separators? Where is the white background for the sections? pic.twitter.com/FVONYmIdQ9— Chris Wu (@MuseumShuffle) July 8, 2021
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!
It took me hours to figure out but I now know that it looks this way because in the View that links to my View with the List it uses navigationViewStyle(.stack) to get around a bug where isActive would stop working. https://t.co/OduRUgkCQQ— Chris Wu (@MuseumShuffle) July 8, 2021
JSON bundle found!
With that fixed a Tweet from Jordi really caught my eye.
Biiiig shoutout to @StewartLynch for finding a great emoji JSON to use 😃— Jordi Bruin (@jordibruin) July 14, 2021
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!
I wrote a clunky emoji picker but it didn't handle emojis that had multiple variations. I had my fingers crossed for a built-in emoji picker in SwiftUI with iOS 15. Since that didn't happen this will be incredibly useful. Thank you @StewartLynch and @jordibruin ! https://t.co/NU4giM1tmm pic.twitter.com/SYEbdYaGV1— Chris Wu (@MuseumShuffle) July 14, 2021
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.
Pretty happy with how upgrading my clunky SwiftUI emoji picker is going using the blob of JSON I saw @jordibruin mention. I kind of like how horizontal scrolling for each section looks. Now to figure out how he got Bakery to have all List sections collapsed by default... pic.twitter.com/QsPmuOXeOi— Chris Wu (@MuseumShuffle) August 8, 2021
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.
In building my SwiftUI emoji picker I've been using a List with SidebarListStyle. I just could not figure out how @jordibruin had an emoji picker in Bakery where the sections were collapsed by default. He told me the secret. He isn't using a List but a DisclosureGroup instead! 🤯 pic.twitter.com/nIqlhyGW4n— Chris Wu (@MuseumShuffle) August 18, 2021
Note: The video above was taken on my iPhone running iOS 14. The simulator in Xcode beta 5 has some issues with my project.
If your project runs well on your iPhone but the Xcode simulator hates it is that bad? Asking for a friend. pic.twitter.com/UBajtxtTs3— Chris Wu (@MuseumShuffle) August 19, 2021
The adventure continues later
The emoji adventures will continue later in part two!