Native KeyboardPaid

Improve this doc

This plugin might require a paid license, or might take a share of your app's earnings. Check the plugin's repo for more information.

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

Repo: https://github.com/EddyVerbruggen/cordova-plugin-native-keyboard

Installation

Install the Cordova and Ionic Native plugins:

$ ionic cordova plugin add cordova-plugin-native-keyboard
$ npm install --save @ionic-native/native-keyboard@4

Add this plugin to your app's module

Supported platforms

Android
iOS

Usage

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


constructor(private nativeKeyboard: NativeKeyboard) { }

...

Instance Members

`showMessenger(options)`

Show messenger

Param	Type	Details
options	`NativeKeyboardOptions`

`hideMessenger(options)`

Hide messenger

Param	Type	Details
options	`NativeKeyboardOptions`

`showMessengerKeyboard()`

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

Returns: Promise<any>

`hideMessengerKeyboard()`

Programmatically hide the keyboard (but not the messenger bar)

`updateMessenger(options)`

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
options

NativeKeyboardOptions

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`

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 https://ionicons.com, 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.

NativeKeyboardLeftButton

Param	Type	Details
disabledWhenTextEntered	`boolean`	Set to `true` to disable the button once text has been entered.

NativeKeyboardUpdateMessengerOptions

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.