I have buttons toggle isOverlayShowing which calls out the overlay using edge transition from bottom. You can see from the video below, both using the same OverlayModal and same animation duration, but the one for the wheel picker seems to stutter for just a bit every time I call on it. I've tries using different duration and animation method but it doesn't seem to solve the issue.
https://youtube.com/shorts/LGEb8WTcVO8
This has be bugging me for days. Any help would be appreciated!
This is the OverlayModal both Quick Add and Repeat Entry shares. But the animation on Quick Add is quite smooth.
struct OverlayModal<Content: View>: View {
@ObservedObject var keyboard: KeyboardObserver = KeyboardObserver()
let content: () -> Content
@Binding var isShowing: Bool
init(isShowing: Binding<Bool>, @ViewBuilder content: @escaping() -> Content) {
self.content = content
self._isShowing = isShowing
}
var body: some View {
ZStack (alignment: .bottom) {
if isShowing {
Color.black
.opacity(0.3)
.ignoresSafeArea()
.onTapGesture {
keyboard.resignFirstResponder()
isShowing.toggle()
}
content()
.transition(.move(edge: .bottom))
.background(Color.clear)
}
}
.onAppear { self.keyboard.addObserver() }
.frame(maxWidth: .infinity,
maxHeight: .infinity,
alignment: .bottom)
.ignoresSafeArea()
.animation(.easeOut(duration: 0.275), value: isShowing)
}
}
var body: some View {
OverlayModal(isShowing: $isShowing) {
ZStack {
RoundedTopRectangle(radius: customConstants.roundedRectRadius)
.foregroundColor(.overlayKeyboard)
VStack {
HStack {
Image(systemName: "xmark")
Spacer()
Text("Copy From")
.font(.subheadline)
.fontWeight(.semibold)
Spacer()
Image(systemName: "checkmark")
}
.padding(.horizontal)
.padding(.top)
Divider()
Spacer()
overlayCopyFromPicker()
Spacer()
Spacer()
}
}
.frame(height: 250 + customConstants.verticalPadding)
.onAppear { selectedDate = thisViewDate }
}
}
private func overlayCopyFromPicker() -> some View {
Picker("", selection: $selectedDate) {
ForEach(pickerDateArray, id: \.self) {date in
Text(dateHelper.copyFromPickerDate(date: date)).tag(date)
}
}
.padding(.horizontal)
.pickerStyle(.wheel)
.frame(height: 170)
}