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 🥴
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.
Have you ever wanted your inbox to be an eBook?
Me neither.
@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!
@phill I’m so disappointed with the built in TabView + Paged style :/
@dimillian there's room for improvement 😛
@phill We resorted to a very similar `UIPageViewController` wrapper for infinite agenda paging in Daybridge 😅
@phill Views are just values on the stack, basically negligible to init and their body is only called if on screen.
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