SwiftUI Keyboard Toolbar Item downsides and Better Alternative

Keyboard Toolbar with Custom Modifier

SwiftUI 3.0 brings many fixes and new APIs. Toolbar Item with keyboard placement is introduced in WWDC’21. This allows us to create a simple toolbar over keyboard and useful in many scenarios. But,I found using this in some scenarios not producing the exact result I expected. Few things are when the height of View I would like to place on top of keyboard is having more height and when i try to place a view with two dynamic layers above keyboard.

ToolbarItem with keyboard placement

Alternative

Custom Modifier

Here I created simple View Modifier which takes the view and Adds to the bottom of view on which the modifier used. And, the background modifier is only to calculate the height of toolbarView.

This actually solve some problems if you expect following kind of solution where toolbar view always present irrespective of keyboard presence. But if you are particular in appearance of toolbarView only with keyboard, the following will help you.

Here I added Publisher for keyboard show and hide notifications. Then I started observing changes inside modifier to show/hide content accordingly.

The output with above changes looks as follows:

Also the above modifier works well with view which changes height dynamically.

Thanks for reading:)

👉 Did you find this post useful? You can now support my efforts to keep by buying me a pizza!