A new interaction in Big Mail is swiping between messages. The message background extends into the UI chrome, and when combined with the device-matched corner radius, creates the illusion of pushing the whole display – satisfying!
🧵 Here's how it's built, along with some code
If you're familiar with SwiftUI, you might think it’s a TabView with a page style, but it's not.
TabView needs to know all your views upfront, which if you have lots of messages, is very expensive.
In this example, TabView reevaluates all 1,000 items on each and every swipe 🥴
Instead, our new PageView container requests views one by one, only as they're needed.
Sometimes an imperative API is what you want 😅
PageView then has platform specific implementations using UIPageViewController and NSPageController, respectively.
You can take a look at the full code here: https://gist.github.com/phillipcaudell/01beca262f940781a53f64454516d15b
The final part of the effect is to get the toolbar and page to move together as one. SwiftUI toolbars are anchored to their parent NavigationStack, so are unaffected by any page movements.
The trick here was to implement my own replica toolbar, and embed it in the safe area of the page.
@phill How did you manage to get the devices corner radius? Did you have to manually determine it with each device and build a manual check, or did something like ContainerRelativeShape work out?
@anthony there is a private property on UIScreen called _displayCornerRadius which you should definitely not use.
@phill ahh noted 😉
@phill this is actually fantastic 🤩
@phill maybe for all the font newsletters I get.
@phill `safeAreaInset(…)` is such a neat modifier. Cool effect!
Have you ever wanted your inbox to be an eBook?
Me neither.