Skip to content

Re-pad the view on re-render while keyboard continues to show #6

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Re-pad the view on re-render while keyboard continues to show #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 23 additions & 9 deletions KeyboardAvoidanceSwiftUI/KeyboardAdaptive.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,24 +12,38 @@ import Combine
/// Note that the `KeyboardAdaptive` modifier wraps your view in a `GeometryReader`,
/// which attempts to fill all the available space, potentially increasing content view size.
struct KeyboardAdaptive: ViewModifier {
private let rerender: AnyPublisher<Any, Never>
@State private var bottomPadding: CGFloat = 0


init(rerender: AnyPublisher<Any, Never>? = nil) {
var publishers = [Publishers.keyboardHeight.map { arg -> Any in arg }.eraseToAnyPublisher()]
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Futzing with the types is really frustrating here considering I don't even care what the values are when self.rerender fires. Ideally, I wouldn't have to eraseToAnyPublisher nor map this to convert it to <Any, Never>, and the client wouldn't have to do likewise when passing in their publisher, but I'm not sure how to type things to accomplish that.

if let rerender = rerender {
publishers.append(rerender)
}
self.rerender = Publishers.MergeMany(publishers).eraseToAnyPublisher()
}

private func bottomPadding(forGeometry geometry: GeometryProxy) -> CGFloat {
let keyboardTop = geometry.frame(in: .global).height - Publishers.keyboardHeight.value
var focusedTextInputBottom = UIResponder.currentFirstResponder?.globalFrame?.maxY ?? 0
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It would be really nice if we could just observe the frame of this translating, that's the real condition that should prompt us to re-pad, without the client having to do anything. Maybe something using KVO?

focusedTextInputBottom += bottomPadding / 2
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm dividing by 2 and multiplying by 2 here for reasons described here. My keyboard is around 500pt tall, like I mention in the comments there.

return 2 * max(0, focusedTextInputBottom - keyboardTop - geometry.safeAreaInsets.bottom)
}

func body(content: Content) -> some View {
GeometryReader { geometry in
content
.padding(.bottom, self.bottomPadding)
.onReceive(Publishers.keyboardHeight) { keyboardHeight in
let keyboardTop = geometry.frame(in: .global).height - keyboardHeight
let focusedTextInputBottom = UIResponder.currentFirstResponder?.globalFrame?.maxY ?? 0
self.bottomPadding = max(0, focusedTextInputBottom - keyboardTop - geometry.safeAreaInsets.bottom)
}
.animation(.easeOut(duration: 0.16))
.onReceive(self.rerender, perform: { _ in
self.bottomPadding = self.bottomPadding(forGeometry: geometry)
})
.animation(.easeOut(duration: 0.16))
}
}
}

extension View {
func keyboardAdaptive() -> some View {
ModifiedContent(content: self, modifier: KeyboardAdaptive())
func keyboardAdaptive(rerender: AnyPublisher<Any, Never>? = nil) -> some View {
ModifiedContent(content: self, modifier: KeyboardAdaptive(rerender: rerender))
}
}
24 changes: 15 additions & 9 deletions KeyboardAvoidanceSwiftUI/KeyboardHeightPublisher.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,16 +9,22 @@
import Combine
import UIKit

fileprivate var keyboardUpdates: AnyCancellable?
fileprivate let keyboardHeightPublisher: CurrentValueSubject<CGFloat, Never> = {
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We change how we're publishing the keyboard height so that KeyboardAdaptive can read the current value when re-rendering not in response to the keyboard changing, but rather in response to another condition.

I tried caching the keyboard height on the KeyboardAdaptive modifier e.g. in a @State property and it didn't work but rather got reset, I would assume when the view hierarchy re-renders.

let subject = CurrentValueSubject<CGFloat, Never>(0)

let willShow = NotificationCenter.default.publisher(for: UIApplication.keyboardWillShowNotification)
.map { $0.keyboardHeight }
let willHide = NotificationCenter.default.publisher(for: UIApplication.keyboardWillHideNotification)
.map { _ in CGFloat(0) }
keyboardUpdates = Publishers.MergeMany(willShow, willHide).assign(to: \.value, on: subject)
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it would be really slick to convert this publisher into a CurrentValueSubject so that we didn't have to retain the return value separately, but not sure how to do that.


return subject
}()

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()
static var keyboardHeight: CurrentValueSubject<CGFloat, Never> {
keyboardHeightPublisher
}
}

Expand Down