Using environmental size classes

[dkk]

Is there a way to use environmental size classes when defining a custom TabItemStyle?

I would like to show text bellow the icon when the app has a .regular .horizontalSizeClass, and only show the icon when it is .compact. With the current implementation I'm not really sure how to do it in a way that the size class variable gets updated correctly and I don't get "Accessing Environment<Optional<UserInterfaceSizeClass>>'s value outside of being installed on a View. This will always read the default value and will not update."

[dkk]

I just found a way.

Hold the @Environment(\.horizontalSizeClass) var sizeClass in the View where you add the TabBar and then just:

TabBar {
/// ... snip ...
}
.if(sizeClass == .regular, {
    $0.tabItem(style: CustomRegularStyle())
}, else: {
    $0.tabItem(style: CustomCompactStyle())
} // I hope this custom modifier is self-explanatory