SwiftUI iOS16 TextField .keyboardType add return key. How to?

Question

My app is in landscape mode and I have a textfield which is only numbers, so I put the modifier:

.keyboardType (.numberPad)

However when the keypad is open there is no return key and the button/navigation link is covered by the keypad. What is the best solution for this issue? Can I have a keyboard only number with the return key or are there any better solutions? This is my code:

struct Bet2: View {
    @Binding var path: NavigationPath
    @State private var amount : String = ""
    var body: some View {
        GeometryReader { reader in
            ZStack {
                Color("db").ignoresSafeArea()
                VStack {
                    NavigationHeader(userName: "Paolo")
                    Spacer()
                    HStack(spacing: 60) {
                        ImageRowView2(fighter1: "leonidas", fighter2: "decimus", fighter3: "artemisia", fighter4: "spartacus")
                        Spacer()
                        VStack {
                            ZStack {
                                Color ("db")
                                .ignoresSafeArea ()
                                Rectangle ()
                                .foregroundColor (Color("db"))
                                .frame (width: 280, height: 230)
                                .cornerRadius (10)
                                .overlay (
                                    RoundedRectangle (cornerRadius: 10)
                                    .stroke (
                                        LinearGradient (
                                            gradient : Gradient (colors: [Color("lb"), Color("rb")]),
                                            startPoint : .top,
                                            endPoint : .bottom
                                        ),
                                        lineWidth : 1
                                    )
                                )
                                .shadow (color: Color("lb").opacity(0.5), radius: 14, y: 10)
                                VStack {
                                    Text ("Bet Amount")
                                    .font (.custom("Bebas Neue", size: 24))
                                    .foregroundStyle (
                                        LinearGradient (
                                            gradient : Gradient (colors: [Color("lb"), Color("rb")]),
                                            startPoint : .top,
                                            endPoint : .bottom
                                        )
                                    )
//                                    Spacer ()
                                    VStack (spacing: 0)
                                    {
                                        HStack {
                                            Text ("Enter amount here")
                                            .font (.custom("Bebas Neue", size: 13))
                                            .foregroundStyle (
                                                LinearGradient (
                                                    gradient : Gradient (colors: [Color("lb"), Color("rb")]),
                                                    startPoint : .top,
                                                    endPoint : .bottom
                                                )
                                            )
                                            Spacer ()
                                            Text ("Available:")
                                            .font (.custom("Bebas Neue", size: 13))
                                            .foregroundColor (.white)
                                            Text ("256.688")
                                            .font (.custom("Bebas Neue", size: 13))
                                            .foregroundStyle (
                                                LinearGradient (
                                                    gradient : Gradient (colors: [Color("lb"), Color("rb")]),
                                                    startPoint : .top,
                                                    endPoint : .bottom
                                                )
                                            )
                                        }
                                        .frame (width: 250)
                                        ZStack {
                                            TextField ("", text: $amount)
                                            .multilineTextAlignment (.center)
                                            .background (Color("db"))
                                            .font (.custom("Bebas Neue", size: 40))
                                            .foregroundStyle (
                                                LinearGradient (
                                                    gradient : Gradient (colors: [Color("lb"), Color("rb")]),
                                                    startPoint : .top,
                                                    endPoint : .bottom
                                                )
                                            )
                                            .frame (width: 250, height: 50)
                                            .padding (.horizontal,100)
                                            .frame (width: 250)
                                            .frame (height: 50)
                                            .overlay (
                                                RoundedRectangle (cornerRadius: 7)
                                                .stroke (
                                                    LinearGradient (
                                                        gradient : Gradient (colors: [Color("lb"), Color("rb")]),
                                                        startPoint : .top,
                                                        endPoint : .bottom
                                                    ),
                                                    lineWidth : 1
                                                )
                                            )
                                            .keyboardType (.numberPad)
                                            Button {
                                                // Max amount
                                            }
                                            label : {
                                                Text ("Max")
                                                .background (Color("db"))
                                                .font (.custom("Bebas Neue", size: 20))
                                                .foregroundStyle (
                                                    LinearGradient (
                                                        gradient : Gradient (colors: [Color("lb"), Color("rb")]),
                                                        startPoint : .top,
                                                        endPoint : .bottom
                                                    )
                                                )
                                                .padding (.horizontal, 5)
                                                .padding (.top, 2)
                                                .overlay (
                                                    RoundedRectangle (cornerRadius: 7)
                                                    .stroke (
                                                        LinearGradient (
                                                            gradient : Gradient (colors: [Color("lb"), Color("rb")]),
                                                            startPoint : .top,
                                                            endPoint : .bottom
                                                        ),
                                                        lineWidth : 1
                                                    )
                                                )
                                            }
                                            .padding (.leading, 195)
                                            .padding (.bottom, 9)
                                        }
                                    }
                                    HStack {
                                        Text("Winner:").font (.custom("Bebas Neue", size: 15)).foregroundColor(.white)
                                        Spacer()
                                        Text("King Leonidas & Maximums").font (.custom("Bebas Neue", size: 15))
                                            .foregroundStyle (
                                                LinearGradient (
                                                    gradient : Gradient (colors: [Color("lb"), Color("rb")]),
                                                    startPoint : .top,
                                                    endPoint : .bottom
                                                )
                                            )
                                    }.frame(maxWidth: 250)
                                    HStack {
                                        Text("Joo Amount:").font (.custom("Bebas Neue", size: 15)).foregroundColor(.white)
                                        Spacer()
                                        Text("32").font (.custom("Bebas Neue", size: 15))
                                            .foregroundStyle (
                                                LinearGradient (
                                                    gradient : Gradient (colors: [Color("lb"), Color("rb")]),
                                                    startPoint : .top,
                                                    endPoint : .bottom
                                                )
                                            )
                                    }.frame(maxWidth: 250)
                                    HStack {
                                        Text("Tx Fee JOO:").font (.custom("Bebas Neue", size: 15)).foregroundColor(.white)
                                        Spacer()
                                        Text("0.05").font (.custom("Bebas Neue", size: 15))
                                            .foregroundStyle (
                                                LinearGradient (
                                                    gradient : Gradient (colors: [Color("lb"), Color("rb")]),
                                                    startPoint : .top,
                                                    endPoint : .bottom
                                                )
                                            )
                                    }.frame(maxWidth: 250)
                                    HStack {
                                        Text("Total").font (.custom("Bebas Neue", size: 15)).foregroundColor(.white)
                                        Spacer()
                                        Text("32.05").font (.custom("Bebas Neue", size: 15))
                                            .foregroundStyle (
                                                LinearGradient (
                                                    gradient : Gradient (colors: [Color("lb"), Color("rb")]),
                                                    startPoint : .top,
                                                    endPoint : .bottom
                                                )
                                            )
                                    }.frame(maxWidth: 250).padding(.bottom, -40)
                                    NavigationLink ("Bet", value: Route.linkStaking2)
                                    .buttonStyle (BtnFull())
                                }
                                .frame (maxHeight: 200)
                            }
//                            Spacer ()
                        }
                    }
                    Spacer()
                    NavigationFooter()
                }
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .navigationBarBackButtonHidden()
        }
    }
}

How to solve this issue?

Answer 1

You can attach a button to the keyboard and close it when the button is pressed using FocusState like so:

@State private var number = ""
@FocusState private var isFocused

TextField("What's your favourite number?", text: $number)
    .keyboardType(.numberPad)

    .focused($isFocused)
    .toolbar {
        ToolbarItem(placement: .keyboard) {
            Button("Done") { isFocused = false }
        }
    }

Hope this helps :)