Adding Done button to iOS Keyboard in NativeScript

Its a pretty common need to have a keyboard dismiss when you’re done typing in an app.

Adding the Done Button

Lets pretend we have 3 inputs all with different keyboard types, ones text, another is number and the last is email. Done button can not be added to the phone keyboard type.

// import view module
import * as view from "ui/core/view";
// get an id handle on our text fields
// page is just args.object
var name = view.getViewById(page, "name");
var phone = view.getViewById(page, "phone");
var email = view.getViewById(page, "email");
// set the keyboard return types to Done
if(app.ios){
name._ios.returnKeyType = UIReturnKeyDone;
phone._ios.returnKeyType = UIReturnKeyDone;
email._ios.returnKeyType = UIReturnKeyDone;
}

Want more return key types?

https://developer.apple.com/reference/uikit/uireturnkeytype?language=objc

Not sure about getViewById? http://docs.nativescript.org/ui/basics#execute-business-logic

Check here: https://docs.nativescript.org/api-reference/modules/_ui_core_view_.html#getviewbyid

Thats it! It will now dismiss the keyboard when the user is done typing and taps done.

Function to dismiss keyboard from code

If you’re interested here is a helper method I wrote to activate it the functionality on a provided page and id. NOTE this dismiss function works on iOS and Android.

// written for typescript
export function dismissKeyboard(page: pagesModule.Page, id: string){
page.getViewById(id).dismissSoftInput();
}
// really all you need though is
page.getViewById("mytextbox").dismissSoftInput();