WheelDatePicker is invisible in iOS 15.0

Question

I'm building an app in SwiftUI that needs DatePicker in the custom alert. Each time I use DatePicker with a WheelDatePickerStyle, it is invisible in IOS 15.0 (also in compact mode - after clicking a month and year in the upper left corner).

What's strange, the DatePicker works on the same device with iOS 14.4. I thought it was an iOS 15 beta error, however, on the internet, I couldn't find any information about this bug, which is why I assumed that I could do something wrong. The only thing I know is that WheelDatePicker has changed slightly in iOS 15.

The error applies to smaller devices, i.e. iPod touch, iPhone SE 2020, etc. - those with a TouchID. On the physical iPhone SE (2nd generation) with IOS 15.0 (beta 3), this error also occurs.

Below, I attached the code and screenshot of the problem. Thank you in advance for tips, solutions, and explanations of why this problem occurs.

CODE:

// Custom DatePicker Alert
import SwiftUI

struct BirthdayPicker: View {
    // Properties
    @State private var previousDate: Date = Date()
    @Binding var birthday: Date
    @Binding var isVisible: Bool
    let savingAction: (() -> ())?
    
    var body: some View {
        ZStack {
            // A field outside, which - if has been tapped - hides alert with DatePicker.
            Color.black.opacity(0.00001)
                .onTapGesture {
                    withAnimation { self.isVisible = false }
                }
            
            // Alert with DatePicker
            VStack {
                Text(LocalizedStrings.chooseBirthday)
                    .padding(.top)
                
                DatePicker("",
                           selection: $birthday,
                           in: ...Date(),
                           displayedComponents: [.date])
                    .datePickerStyle(WheelDatePickerStyle())
                    .labelsHidden()
                
                HStack {
                    // Cancel Button
                    Button(LocalizedStrings.cancel) {
                        self.birthday = previousDate
                        self.isVisible = false
                    }
                    .foregroundColor(.red)
                    
                    Spacer()
                    
                    // Save Button
                    Button(LocalizedStrings.save) {
                        if let savingAction = savingAction {
                            savingAction()
                        } else {
                            self.isVisible = false
                        }
                    }
                }
                .padding([.horizontal, .bottom])
            }
            .frame(width: UIScreen.main.bounds.width - 40)
            .background(Color(.systemBackground))
            .clipShape(RoundedRectangle(cornerRadius: 15))
            .contentShape(RoundedRectangle(cornerRadius: 15))
            .shadow(radius: 10)
            .onAppear { self.previousDate = birthday }
        }
    }
}

// A sample View that uses this DatePicker alert - other than in the picture below
import SwiftUI

struct WelcomeSlide2: View {
    // Properties
    @State var birthday: Date = Date()
    
    var body: some View {
        ZStack {
            Background()
            
            GeometryReader { geom in
                ScrollView(.vertical) {
                    // Title and Subtitle
                    Text(LocalizedStrings.welcomeTitle2)
                        .font(.largeTitle)
                        .fontWeight(.semibold)
                        .padding(.top)
                    Text(LocalizedStrings.welcomeSubtitle2)
                        .font(.headline)
                        .padding([.bottom, .horizontal])
                        .multilineTextAlignment(.center)
                    
                    // Image Button
                    Button(action: { self.showingImagePicker = true }) {
                        ProfileImagePlaceholder(image: $image, inputImage: $inputImage)
                    }
                    .frame(width: 100, height: 100)
                    .shadow(radius: 10)
                    .padding(.vertical)
                    .accessibility(label: Text(LocalizedStrings.addPhotoButton))
                    
                    VStack(alignment: .leading) {
                        // Name TextField
                        TextField(LocalizedStrings.name, text: $name)
                            .font(.title3)
                        
                        Divider()
                        
                        // CUSTOM DATEPICKER ALERT - BUGGED
                        // ---------------------------------------------------------
                        // Birthday DatePicker
                        HStack {
                            Text(LocalizedStrings.birthday)
                            Spacer()
                            Button(action: { withAnimation { self.showingBirthdayPicker.toggle() } }) {
                                Text(UserDataManager.shared.dateFormatter.string(from: birthday))
                            }
                        }
                        // ---------------------------------------------------------
                        
                        Divider()
                        
                        // Zodiac Sign
                        HStack {
                            Text(LocalizedStrings.zodiacSign)
                            Spacer()
                            Text(zodiacSign)
                        }
                        
                        Divider()
                        
                        // About
                        Text(LocalizedStrings.aboutMe)
                        TextEditor(text: $about)
                            .foregroundColor(.gray)
                            .offset(x: -4, y: -15)
                    }
                    .padding(.horizontal)
                    .font(.subheadline)
                    
                    Spacer()
                    
                    HStack {
                        Spacer()
                        NavigationLink(destination: WelcomeSlide3(), isActive: $didTapNextSlide) {
                            Button {
                                self.containsCustomImage = inputImage == nil ? false : true
                                self.zodiacSign = didChangeDate ? zodiacSign : ""
                                self.didTapNextSlide = true
                            } label: {
                                Image(systemName: "arrow.right")
                                    .font(.system(size: 30))
                                    .foregroundColor(Color(.label))
                            }

                        }
                    }
                    .padding([.trailing, .bottom, .top])
                }
                .frame(minHeight: geom.size.height)
                .overlay(Color.black.opacity(showingBirthdayPicker ? 0.5 : 0).ignoresSafeArea())
                
                if self.showingBirthdayPicker {
                    BirthdayPicker(birthday: $birthday, isVisible: $showingBirthdayPicker, savingAction: nil)
                }
            }
        }
        .navigationBarHidden(true)
    }
}

SCREENSHOT:

Answer 1

I have a same problem.

For the wheel picker, you just need to explicitly set a picker style .pickerStyle(.wheel) and picker will work like before.