“I love typing on my mobile keyboard”
- no one ever
What if you could help your users with little tools like hints and buttons to make using the mobile keyboard sucks a little less?
Enter the NativeScript Keyboard Toolbar plugin!
A toolbar. Much like Apple's input accessory view, so you may assume this plugin adds an accessory view on iOS, but then what would we do on Android? And what if we want to do something that's not supported by said native widget? And how on earth can plugin users easily declare the UI of the accessory view?
So I call it a toolbar and the plugin is NOW available for iOS and Android!
The design 🥅 goals 🥅 of this plugin were..
⌨ Support declaring any NativeScript layout and put it on top of the soft keyboard.
🏒 Make the toolbar stick to the keyboard, no matter its shape or form.
🙅♀️ Don't use third party dependencies, but only stuff from tns-core-modules.
👭 Allow multiple toolbars (with possibly different designs) on one page.
Head over to the plugin's GitHub repo and follow the instructions on running either the Core demo app, the Angular demo, or even the Vue demo. By far the most extensive one is the Core demo, of which you can see a video here:
⚠️ Do not scroll past this point without watching. Seeing this plugin run on both iOS and Android is simply too awesome to skip. I mean it!
As usual, add the plugin by running this in the root of your project: tns plugin add nativescript-keyboard-toolbar
Then open any page which has a TextField or TextView and define a toolbar in plain old NativeScript layout markup and wrap it in a <kt:Toolbar> which references the id of your editable view.
You can throw any NativeScript layout you fancy inside it. Want a horizontally scrolling ListView with images? Fine. Want to stack two Sliders for fancy numerical input? You got it.
If you want to learn more about why you need to wrap it all in a <GridLayout> and how the plugin uses that to animate the toolbar, then hop over to the plugin documentation on GitHub. That's also where you'll find Angular and Vue examples.
Toolbar all the things!
And if you do, please add a comment to this post as I'm dying to see how y'all'll abuse this plugin! (is that even correct English? Ah well, it's probably correct American.)