Need help upgrading to Ionic Framework 4.0? Get assistance with our Enterprise Migration Services EXPLORE NOW

Native Keyboard

Improve this doc

A cross platform WhatsApp / Messenger / Slack -style keyboard even. For your Cordova app.



  1. Install the Cordova and Ionic Native plugins:
    $ ionic cordova plugin add cordova-plugin-native-keyboard
    $ npm install --save @ionic-native/native-keyboard@4
  2. Add this plugin to your app's module

Supported platforms


import { NativeKeyboard } from '@ionic-native/native-keyboard';

constructor(private nativeKeyboard: NativeKeyboard) { }


Instance Members


Show messenger

Param Type Details
options NativeKeyboardOptions


Hide messenger

Param Type Details
options NativeKeyboardOptions


Programmatically pop up the keyboard again if the user dismissed it.

Returns: Promise<any>


Programmatically hide the keyboard (but not the messenger bar)


Manipulate the messenger while it’s open. For instance if you want to update the text programmatically based on what the user typed.

Param Type Details


Param Type Details
onSubmit Function

A function invoked when the user submits his input. Receives the text as a single property. Make sure your page is UTF-8 encoded so Chinese and Emoji are rendered OK.

onKeyboardWillShow Function

A function invoked when the keyboard is about to pop up. Receives the height as a single property. (iOS only)

onKeyboardDidShow Function

A function invoked when the keyboard popped up. Receives the height as a single property.

onKeyboardWillHide Function

A function invoked when the keyboard is about to close. (iOS only)

onKeyboardDidHide Function

A function invoked when the keyboard closed.

onTextChanged Function

A function invoked when any key is pressed, sends the entire text as response.

autoscrollElement HTMLElement

Highly recommended to pass in if you want to replicate the behavior of the video's above (scroll down when the keyboard opens). Pass in the scrollable DOM element containing the messages.

scrollToBottomAfterMessengerShows boolean

If autoscrollElement was set you can also make the list scroll down initially, when the messenger bar (without the keyboard popping up) is shown.

keepOpenAfterSubmit boolean

Setting this to true is like the video's above: the keyboard doesn't close upon submit. Defaults to false.

animated boolean

Makes the messenger bar slide in from the bottom. Defaults to false.

showKeyboard boolean

Open the keyboard when showing the messenger. Defaults to false.

text string

The default text set in the messenger input bar.

textColor string

The color of the typed text. Defaults to #444444.

placeholder string

Like a regular HTML input placeholder.

placeholderColor string

The color of the placeholder text. Defaults to #CCCCCC.

backgroundColor string

The background color of the messenger bar. Defaults to #F6F6F6.

textViewBackgroundColor string

The background color of the textview. Looks nicest on Android if it's the same color as the backgroundColor property. Defaults to #F6F6F6.

textViewBorderColor string

The border color of the textview. Defaults to #666666. (iOS only)

maxChars number

Setting this > 0 will make a counter show up on iOS (and ignore superfluous input on Android, for now)

counterStyle string

Options are: "none", "split", "countdown", "countdownreversed". Note that if maxChars is set, "none" will still show a counter. Defaults to "none". (iOS only)

type string

Options are: "default", "decimalpad", "phonepad", "numberpad", "namephonepad", "number", "email", "twitter", "url", "alphabet", "search", "ascii". (iOS only)

appearance string

Options are: "light", "dark". (iOS only)

secure boolean

Disables things like the Emoji keyboard and the Predicive text entry bar (iOS only)

leftButton NativeKeyboardLeftButton
rightButton NativeKeyboardButton


Param Type Details
type string

Either "text" (Android only currently), "fontawesome" or "ionicon".

value string

Depends on the type. Examples: for "text" use "Send", for "fontawesome" use "fa-battery-quarter", for "ionicon" use "\uf48a" (go to, right-click and inspect the icon and use the value you find in :before). Note that some fonticons are not supported as the embedded fonts in the plugin may lag behind a little. So try one of the older icons first.

textStyle string

If type is "text" you can set this to either "normal", "bold" or "italic".

onPress Function

A function invoked when the button is pressed. Use this button to prompt the user what he wants to do next by for instance rendering an ActionSheet.


Param Type Details
disabledWhenTextEntered boolean

Set to true to disable the button once text has been entered.


Param Type Details
text string

Replace the messenger's text by this. The current text remains if omitted.

caretIndex number

Position the cursor anywhere in the text range. Defaults to the end of the text.

showKeyboard boolean

If false or omitted no changes to the keyboard state are made.