DatePicker, Having A Range or Selecting Date Causes View To Shift - swift

Question

I have an odd issue where my view is being shifted down on a DatePicker that has the style GraphicalDatePickerStyle(). The things I've noticed are that if you have a minimum range added, in my case Date() it will flicker after a moment or two and shift downwards. I have also noticed if I remove that, it doesn't happen until the moment when I actually select a date on the picker itself. Here is a gif of that happening. In this example, I have removed the minimum selectable date.
The way that this view is being presented is via .offset modifier on the main view. This view is always present, though not visible and when you tap the add button it sets the offset back to 0. I stripped 99% of everything out and I still can't identify the problem.
Presentation Code (Minimal Reproducible, I Think)
struct TimeListView: View {
#ObservedObject var vm = TimerListViewModel()
#State var showsAddModal = false
var body: some View {
ZStack(alignment: .bottomTrailing) {
ScrollView {
LazyVStack {
ForEach (vm.events) { dueDate in
CountdownView(dueDate: dueDate)
.shadow(color: Color.black.opacity(0.4), radius: 3, x: 3, y: 3)
}
}
.padding(.horizontal)
}
.listStyle(PlainListStyle())
.background(Color.promptlyLightNavy)
Button(action: {
withAnimation {
showsAddModal.toggle()
}
}, label: {
Text("+")
.font(.custom("system", size: 50))
.frame(width: 70, height: 70)
.foregroundColor(.promptlyNavy)
.padding(.bottom, 7)
})
.background(
Circle()
.fill(Color.promptlyTeal)
.shadow(color: Color.black.opacity(0.4), radius: 3, x: 3, y: 3))
.padding()
Rectangle()
.fill(showsAddModal ? Color.promptlyNavy.opacity(0.8) : .clear)
.edgesIgnoringSafeArea(.all)
.onTapGesture {
withAnimation { showsAddModal.toggle() }
}
if showsAddModal {
AddCountdownView(dismissed: {
withAnimation { showsAddModal.toggle() }
}, add: { date, title in
vm.addEvent(event: Event(date: date, title: title))
}).transition(.move(edge: .bottom))
}
}
}
}
View That Is Causing The Problem (Minimal Reproducible)
struct AddCountdownView: View {
var dismissed: () -> ()
var add: ((date: Date, title: String)) -> ()
#State private var eventDate = Date.now
#State private var eventTitle = ""
var body: some View {
ZStack(alignment: .bottomLeading) {
Spacer()
VStack {
Divider()
RoundedRectangle(cornerRadius: 20)
.fill(Color.promptlyOrange)
.frame(width: 100, height: 4)
TextField("", text: $eventTitle)
.placeholder(when: eventTitle.isEmpty, placeholder: {
Text("Event Title").foregroundColor(.promptlyLightTeal)
})
.underlineTextField()
.font(.title)
DatePicker("asdf",selection: $eventDate, in: Date()...)
.applyTextColor(.white)
.datePickerStyle(GraphicalDatePickerStyle())
HStack(spacing: 50) {
Button(action: {
withAnimation { dismissed() }
}, label: {
Image(systemName: "trash")
.font(.title)
.frame(width: 100)
.background(
RoundedRectangle(cornerRadius: 10)
.fill(Color.promptlyTeal)
.shadow(color: Color.black.opacity(0.4), radius: 3, x: 3, y: 3)
.frame( height: 50)
)
})
Button(action: {
add((date: eventDate, title: eventTitle))
}, label: {
Image(systemName: "checkmark.seal")
.font(.title)
.frame(width: 100)
.background(
RoundedRectangle(cornerRadius: 10)
.fill(Color.promptlyTeal)
.shadow(color: Color.black.opacity(0.4), radius: 3, x: 3, y: 3)
.frame( height: 50)
)
})
}
.padding()
.foregroundColor(.promptlyNavy)
}
.background(Color.promptlyNavy)
.shadow(color: Color.black.opacity(0.4), radius: 3, x: 0, y: -3)
}
}
}

Answer 1

The problem is related directly to the way that DatePicker handles it's coloring. In my problem I was attempting to set the color by using a Hacky solution provided by a bunch of other people.
Hacky Solution (That's Bugged on iOS 15.X)
This is only bugged in this particular situation, where there's also a shadow added the the parent view.
#ViewBuilder func applyTextColor(_ color: Color) -> some View {
if UITraitCollection.current.userInterfaceStyle == .light {
self.colorInvert().colorMultiply(color)
} else {
self.colorMultiply(color)
}
}
Proper Solution (iOS 15.X)
DatePicker("asdf", selection: $eventDate, in: Date()...)
.datePickerStyle(GraphicalDatePickerStyle())
.accentColor(.promptlyOrange) // Sets Accent Color
.colorScheme(.dark) //Gets The white text.