Hey everyone! I’m encountering an issue while attempting to animate height changes of the content inside safeAreaInset(edge:alignment:spacing:content:).
When animating a reduction in the frame height, the container view (in my case, Map) also animates unexpectedly. However, when animating an increase in the frame height, the animation works smoothly, and the Map view remains still.
How can I address this odd resizing behavior of the container?
Code:
struct MapView: View {
var body: some View {
Map()
.safeAreaInset(edge: .bottom) {
MapDetailView()
}
}
}
struct MapDetailView: View {
@State private var oldHeightOffset: CGFloat = 0
@State private var newHeightOffset: CGFloat = 0
@State private var containerHeight: CGFloat = 0
private var drag: some Gesture {
DragGesture(coordinateSpace: .global)
.onChanged { value in
withAnimation(.interactiveSpring) {
newHeightOffset = oldHeightOffset + value.translation.height
}
}
.onEnded { value in
switch newHeightOffset {
case containerHeight * 0.625...containerHeight:
withAnimation(.spring) {
newHeightOffset = containerHeight * 0.75
}
case containerHeight * 0.25..<containerHeight * 0.625:
withAnimation(.spring) {
newHeightOffset = containerHeight * 0.5
}
case 0..<containerHeight * 0.25:
withAnimation(.spring) {
newHeightOffset = 0
}
default:
break
}
oldHeightOffset = newHeightOffset
}
}
var body: some View {
NavigationStack {
Rectangle()
.fill(.clear)
.containerBackground(.ultraThinMaterial, for: .navigation)
}
.gesture(drag)
.containerRelativeFrame(.vertical) { length, _ in
length - newHeightOffset
}
.onGeometryChange(for: CGFloat.self) { geometryProxy in
let frame = geometryProxy.frame(in: .local)
return frame.height + newHeightOffset
} action: { containerHeight in
self.containerHeight = containerHeight
}
}
}
Reducing safe area inset's content height (drag down):
Increasing safe area inset's content height (drag up):
