0

I am trying to build a sheet that has a textfield which (when focused) opens the keyboard and also has some further content as well. I want the presentationDetents from the sheet to be the height of the content inside the sheet and when the keyboard appears the sheet should expand its height to fit the keyboard at the bottom plus the actual content on top of it. So in short: The sheet should always be the size of its content and when the keyboard appears it should be the size of the content plus the size of the keyboard.

I have already tried using a GeometryReader but when I use .presentationDetents([.height(geometry.size.height)]) the bottom sheet is too small to show the content (see attached photo). I also tried using preference keys, but couldn't make that work either...

This is my (basic) code:

struct TestView: View {
    @State private var showSheet: Bool = false
    @State private var textfieldInput: String = ""
    var body: some View {
        VStack {
            Button("Show Sheet") {
                showSheet.toggle()
            }
            .sheet(isPresented: $showSheet) {
                GeometryReader { geometry in
                    VStack (alignment: .leading) {
                        TextField("This is a textfield", text: $textfieldInput)
                            .bold()
                            .font(.title3)
                        Text("More (variable) content underneath the textfield")
                    }
                    .padding(20)
                    .border(Color.red)
                    .presentationDetents([.height(geometry.size.height)])
                }
            }
        }
    }
}

Result with GeometryReader Result without GeometryReader and presentationDetents

I would be very happy for any ideas / suggestions!

Konrad
  • 1
  • 1
  • Make a custom view and display it on top of current view like you do with the sheet e.g. `ZStack { button if(showSheet) { showCustomSheet }}`. You can add animation and so on as well. Also the keyboard is not part of the view, in fact it changes the view to be sized just above the keyboard. So what you want is actually move view up when keyboard appears. If you align view to the bottom, it should happen automatically. – timbre timbre Jun 02 '23 at 17:20
  • @timbretimbre Thanks for your suggestion! I already thought about doing something like that, but I have seen several apps using a sheet for that and I don't think it should be too hard to achieve (there already is the .height() presentationDetent, so only things we need would be detecting the contents height and the keyboards height, but I cant make this work sadly). But If I don't find a solution that uses a sheet, I will probably go for a ZStack as you mentioned, thanks again! – Konrad Jun 02 '23 at 19:11

0 Answers0