DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Fabio Giolito
Fabio Giolito

Posted on

Facebook Reactions in SwiftUI

About 60 Lines. I’d never guess you could do all that in so few lines. With those transitions and interruptible animations?

I spent the weeks following WWDC looking into Swift UI. At first I thought it was really basic and you couldn’t do much custom work. But when you start building components from scratch you get how flexible it is.

This is a prototype built in 1 hour before going to bed. I woke up to it blowing up on Twitter (at least for my engagement average).

Animated gif showing a prototype of a Facebook Reactions implementation over XCode

And here’s the code, if you know some things about SwiftUI and programming it should be understandable. But here’s the overview:

UI is controlled by state. Am I dragging my finger from the Like Button? Then show/hide reactions. Which reaction is selected? Make that one bigger.

Then it’s just a matter of changing those states. When I start dragging, change the isDragging to true. Then based on how far I’ve dragged calculate which reaction is selected.

Code:
https://gist.github.com/fabiogiolito/424e1d68766fc054ad4bf6fd3506e9c3

Tweet:
https://twitter.com/fabiogiolito/status/1142226669471748096

Top comments (0)

12 Rarely Used Javascript APIs You Need

>> Check out this classic DEV post <<