How to add more padding bellow a TextView when the keyboard is shown

Question

Created Jan ’22

Replies 3

Boosts 2

Views 3k

Participants 5

When i have TextField inside ScrollView and tap on it the keyboard is shown as expected. But it seems that the TextField is moved up just enough to show the input area but i want to be moved enough so that is visible in its whole. Otherwise it looks cropped. I couldn't find a way to change this behaviour.

struct ContentView: View {
  @State var text:String = ""

  var body: some View {
    ScrollView {
      VStack(spacing: 10) {
        ForEach(1...12, id: \.self) {
          Text("\($0)…")
            .frame(height:50)
        }
        TextField("Label..", text: self.$text)
          .padding(10)
          .background(.white)
          .cornerRadius(10)
          .overlay(
            RoundedRectangle(cornerRadius: 10)
              .stroke(.blue, lineWidth: 1)
          )
      }
      .padding()
      .background(.red)
    }
  }
   
}

Boost

Answer 1

SamsLogic OP

Aug ’22

Hi, did you ever find a solution to this? I don't understand why something that should be so simple is such a pain to implement. If the SwiftUI Textfield internal frame height, tappable area can't be changed, is it really even worth using at all?

0

Answer 2

klaytonb OP

Dec ’22

This seems to work. Maybe it can be optimized more. You could also parameterize the view modifier for customizable padding.

ScrollView(.vertical) {
   content
}
 .keyboardAvoiding()

import SwiftUI
import Combine

public extension Publishers {
    static var keyboardHeight: AnyPublisher<CGFloat, Never> {
        let willShow = NotificationCenter.default.publisher(for: UIApplication.keyboardWillShowNotification)
            .map { $0.keyboardHeight }
        let willHide = NotificationCenter.default.publisher(for: UIApplication.keyboardWillHideNotification)
            .map { _ in CGFloat(0) }

        return MergeMany(willShow, willHide)
            .eraseToAnyPublisher()
    }
}

public extension Notification {
    var keyboardHeight: CGFloat {
        return (userInfo?[UIResponder.keyboardFrameEndUserInfoKey] as? CGRect)?.height ?? 0
    }
}

public struct KeyboardAvoiding: ViewModifier {
    @State private var keyboardActiveAdjustment: CGFloat = 0

    public func body(content: Content) -> some View {
        content
            .safeAreaInset(edge: .bottom, spacing: keyboardActiveAdjustment) {
                EmptyView().frame(height: 0)
            }
            .onReceive(Publishers.keyboardHeight) {
                self.keyboardActiveAdjustment = min($0, <<YOUR PADDING>>)
            }
    }
}

public extension View {
    func keyboardAvoiding() -> some View {
        modifier(KeyboardAvoiding())
    }
}

5

Answer 3

gsdfgsfhsfhsdfhsfhsfgsdfgsfg OP

May ’24

Best solution I have found so far. The others on stack overflow did not work.

0