0

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)
        
    }

0 Answers0