Picker support for iOS14 SwiftUI

Question

I had my app working fine with SwiftUI and iOS13, and now I'm trying to add support to 14 and part of the app looks like this:

That gray are in the background shouldn't be there. I tried, setting the background to white inside the picker, removing some components, removing the frame and nothing works.

Here's the code:

 ZStack {
        if showingNewMealTime {
            ZStack {
                VStack(alignment: .center) {
                    ZStack{
                        Color.black.opacity(0.4)
                            .edgesIgnoringSafeArea(.vertical)
                        VStack(spacing: 20) {
                            Text("Change Time")
                                .bold().padding()
                                .frame(maxWidth: .infinity)
                                .background(Color.yellow)
                                .foregroundColor(Color.white)
                            
                            HStack {
                                VStack {
                                    Picker("", selection: $pickerHour){
                                        ForEach(1..<12, id: \.self) { i in
                                            Text("\(i)").tag(i)
                                        }
                                    }
                                    .frame(width: 50, height: 120)
                                    .clipped()
                                }
                                
                                VStack {
                                    Picker("", selection: $pickerMinutes){
                                        ForEach(0..<60, id: \.self) { i in
                                            Text("\(i)").tag(i)
                                        }
                                    }
                                    .frame(width: 50, height: 120)
                                    .clipped()
                                }
                                VStack {
                                    Picker("", selection: $pickerAmOrPm[pickerAmOrPmSelection]){
                                        ForEach(pickerAmOrPm, id: \.self) { i in
                                            Text("\(i)").tag(i)
                                        }
                                    }
                                    .frame(width: 50, height: 120)
                                    .clipped()
                                }
                            }
                            
                            Spacer()
                            
                            Button(action: {
                                ...
                            }){
                                Text("Save")
                            }
                            .padding(.horizontal)
                            .padding(.bottom, 30)
                        }
                        .frame(width:300, height: 300)
                        .background(Color.white)
                        .mask(RoundedRectangle(cornerRadius: 20))
                        .shadow(radius: 20)
                    }
                }
            }
        }
    }

What's changed and what do I have to fix to correct that gray area?

Thanks

Answer 1

Use the native DatePicker instead.

import SwiftUI

struct DatePickerView: View {
    @State var date: Date = Date()

    var body: some View {
        VStack {
            DatePicker("Date", selection: $date,
                   displayedComponents: .hourAndMinute)
                .frame(height: 50)
            Spacer()
        }
        .padding()
    }
 }

 struct DatePickerView_Previews: PreviewProvider {
    static var previews: some View {
        DatePickerView()
    }
 }

Image showing the result of the above code

For more info:

SwiftUI DatePicker - swiftcompiled.com

Selecting dates and times with DatePicker - hackingwithswift.com

How to create a date picker and read values from it - hackingwithswift.com

DatePicker - Documentation

(Oct 11, 2020 Edit): Edited adding links to more information.