@capacitor/keyboard

What is @capacitor/keyboard?

@capacitor/keyboard is a Capacitor plugin that provides keyboard-related functionalities for mobile applications. It allows developers to manage the keyboard's behavior, such as showing or hiding the keyboard, listening to keyboard events, and adjusting the viewport when the keyboard is displayed.

What are @capacitor/keyboard's main functionalities?

Show Keyboard

This feature allows you to programmatically show the keyboard.

import { Keyboard } from '@capacitor/keyboard';

Keyboard.show();

Hide Keyboard

This feature allows you to programmatically hide the keyboard.

import { Keyboard } from '@capacitor/keyboard';

Keyboard.hide();

Listen to Keyboard Events

This feature allows you to listen to keyboard events such as when the keyboard is about to show or hide.

import { Keyboard } from '@capacitor/keyboard';

Keyboard.addListener('keyboardWillShow', info => {
  console.log('Keyboard will show with height:', info.keyboardHeight);
});

Keyboard.addListener('keyboardWillHide', () => {
  console.log('Keyboard will hide');
});

Set Accessory Bar Visibility

This feature allows you to set the visibility of the accessory bar above the keyboard.

import { Keyboard } from '@capacitor/keyboard';

Keyboard.setAccessoryBarVisible({ isVisible: true });

Set Resize Mode

This feature allows you to set the resize mode of the web view when the keyboard is displayed. Modes include 'native', 'ionic', and 'body'.

import { Keyboard } from '@capacitor/keyboard';

Keyboard.setResizeMode({ mode: 'native' });

Other packages similar to @capacitor/keyboard

cordova-plugin-keyboard

cordova-plugin-keyboard is a Cordova plugin that provides similar functionalities for managing the keyboard in mobile applications. It allows you to show/hide the keyboard, listen to keyboard events, and adjust the viewport. However, it is designed for Cordova-based projects, whereas @capacitor/keyboard is designed for Capacitor-based projects.

react-native-keyboard-aware-scroll-view

react-native-keyboard-aware-scroll-view is a React Native package that helps manage the keyboard in React Native applications. It provides functionalities to automatically adjust the scroll view when the keyboard is displayed. While it offers similar functionalities, it is specifically designed for React Native, unlike @capacitor/keyboard which is for Capacitor.

ionic-plugin-keyboard

ionic-plugin-keyboard is an Ionic plugin that provides keyboard management functionalities similar to @capacitor/keyboard. It allows you to show/hide the keyboard, listen to keyboard events, and adjust the viewport. It is designed for Ionic projects using Cordova, whereas @capacitor/keyboard is for Ionic projects using Capacitor.

README

@capacitor/keyboard

The Keyboard API provides keyboard display and visibility control, along with event tracking when the keyboard shows and hides.

Install

npm install @capacitor/keyboard
npx cap sync

Example

import { Keyboard } from '@capacitor/keyboard';

Keyboard.addListener('keyboardWillShow', info => {
  console.log('keyboard will show with height:', info.keyboardHeight);
});

Keyboard.addListener('keyboardDidShow', info => {
  console.log('keyboard did show with height:', info.keyboardHeight);
});

Keyboard.addListener('keyboardWillHide', () => {
  console.log('keyboard will hide');
});

Keyboard.addListener('keyboardDidHide', () => {
  console.log('keyboard did hide');
});

Configuration

On iOS, the keyboard can be configured with the following options:

Prop	Type	Description	Default	Since
resize	KeyboardResize	Configure the way the app is resized when the Keyboard appears. Only available on iOS.	native	1.0.0
style	KeyboardStyle	Override the keyboard style if your app doesn't support dark/light theme changes. If not set, the keyboard style will depend on the device appearance. Only available on iOS.		1.0.0
resizeOnFullScreen	boolean	There is an Android bug that prevents the keyboard from resizing the WebView when the app is in full screen (i.e. if StatusBar plugin is used to overlay the status bar). This setting, if set to true, add a workaround that resizes the WebView even when the app is in full screen. Only available for Android		1.1.0

Examples

In capacitor.config.json:

{
  "plugins": {
    "Keyboard": {
      "resize": "body",
      "style": "DARK",
      "resizeOnFullScreen": true
    }
  }
}

In capacitor.config.ts:

/// <reference types="@capacitor/keyboard" />

import { CapacitorConfig } from '@capacitor/cli';
import { KeyboardResize, KeyboardStyle } from '@capacitor/keyboard';

const config: CapacitorConfig = {
  plugins: {
    Keyboard: {
      resize: KeyboardResize.Body,
      style: KeyboardStyle.Dark,
      resizeOnFullScreen: true,
    },
  },
};

export default config;

Compatibility with cordova-plugin-ionic-keyboard

To maintain compatibility with cordova-plugin-ionic-keyboard, the following events also work with window.addEventListener:

• keyboardWillShow
• keyboardDidShow
• keyboardWillHide
• keyboardDidHide

API

• show()
• hide()
• setAccessoryBarVisible(...)
• setScroll(...)
• setStyle(...)
• setResizeMode(...)
• getResizeMode()
• addListener('keyboardWillShow', ...)
• addListener('keyboardDidShow', ...)
• addListener('keyboardWillHide', ...)
• addListener('keyboardDidHide', ...)
• removeAllListeners()
• Interfaces
• Enums

show()

show() => Promise<void>

Show the keyboard. This method is alpha and may have issues.

This method is only supported on Android.

Since: 1.0.0

---

hide()

hide() => Promise<void>

Hide the keyboard.

Since: 1.0.0

---

setAccessoryBarVisible(...)

setAccessoryBarVisible(options: { isVisible: boolean; }) => Promise<void>

Set whether the accessory bar should be visible on the keyboard. We recommend disabling the accessory bar for short forms (login, signup, etc.) to provide a cleaner UI.

This method is only supported on iPhone devices.

Param	Type
options	{ isVisible: boolean; }

Since: 1.0.0

---

setScroll(...)

setScroll(options: { isDisabled: boolean; }) => Promise<void>

Programmatically enable or disable the WebView scroll.

This method is only supported on iOS.

Param	Type
options	{ isDisabled: boolean; }

Since: 1.0.0

---

setStyle(...)

setStyle(options: KeyboardStyleOptions) => Promise<void>

Programmatically set the keyboard style.

This method is only supported on iOS.

Param	Type
options	KeyboardStyleOptions

Since: 1.0.0

---

setResizeMode(...)

setResizeMode(options: KeyboardResizeOptions) => Promise<void>

Programmatically set the resize mode.

This method is only supported on iOS.

Param	Type
options	KeyboardResizeOptions

Since: 1.0.0

---

getResizeMode()

getResizeMode() => Promise<KeyboardResizeOptions>

Get the currently set resize mode.

This method is only supported on iOS.

Returns: Promise<KeyboardResizeOptions>

Since: 4.0.0

---

addListener('keyboardWillShow', ...)

addListener(eventName: 'keyboardWillShow', listenerFunc: (info: KeyboardInfo) => void) => Promise<PluginListenerHandle>

Listen for when the keyboard is about to be shown.

On Android keyboardWillShow and keyboardDidShow fire almost at the same time.

Param	Type
eventName	'keyboardWillShow'
listenerFunc	(info: KeyboardInfo) => void

Returns: Promise<PluginListenerHandle>

Since: 1.0.0

---

addListener('keyboardDidShow', ...)

addListener(eventName: 'keyboardDidShow', listenerFunc: (info: KeyboardInfo) => void) => Promise<PluginListenerHandle>

Listen for when the keyboard is shown.

On Android keyboardWillShow and keyboardDidShow fire almost at the same time.

Param	Type
eventName	'keyboardDidShow'
listenerFunc	(info: KeyboardInfo) => void

Returns: Promise<PluginListenerHandle>

Since: 1.0.0

---

addListener('keyboardWillHide', ...)

addListener(eventName: 'keyboardWillHide', listenerFunc: () => void) => Promise<PluginListenerHandle>

Listen for when the keyboard is about to be hidden.

On Android keyboardWillHide and keyboardDidHide fire almost at the same time.

Param	Type
eventName	'keyboardWillHide'
listenerFunc	() => void

Returns: Promise<PluginListenerHandle>

Since: 1.0.0

---

addListener('keyboardDidHide', ...)

addListener(eventName: 'keyboardDidHide', listenerFunc: () => void) => Promise<PluginListenerHandle>

Listen for when the keyboard is hidden.

On Android keyboardWillHide and keyboardDidHide fire almost at the same time.

Param	Type
eventName	'keyboardDidHide'
listenerFunc	() => void

Returns: Promise<PluginListenerHandle>

Since: 1.0.0

---

removeAllListeners()

removeAllListeners() => Promise<void>

Remove all native listeners for this plugin.

Since: 1.0.0

---

Interfaces

KeyboardStyleOptions

Prop	Type	Description	Default	Since
style	KeyboardStyle	Style of the keyboard.	KeyboardStyle.Default	1.0.0

KeyboardResizeOptions

Prop	Type	Description	Since
mode	KeyboardResize	Mode used to resize elements when the keyboard appears.	1.0.0

PluginListenerHandle

Prop	Type
remove	() => Promise<void>

KeyboardInfo

Prop	Type	Description	Since
keyboardHeight	number	Height of the heyboard.	1.0.0

Enums

KeyboardStyle

Members	Value	Description	Since
Dark	'DARK'	Dark keyboard.	1.0.0
Light	'LIGHT'	Light keyboard.	1.0.0
Default	'DEFAULT'	On iOS 13 and newer the keyboard style is based on the device appearance. If the device is using Dark mode, the keyboard will be dark. If the device is using Light mode, the keyboard will be light. On iOS 12 the keyboard will be light.	1.0.0

KeyboardResize

Members	Value	Description	Since
Body	'body'	Only the body HTML element will be resized. Relative units are not affected, because the viewport does not change.	1.0.0
Ionic	'ionic'	Only the ion-app HTML element will be resized. Use it only for Ionic Framework apps.	1.0.0
Native	'native'	The whole native Web View will be resized when the keyboard shows/hides. This affects the vh relative unit.	1.0.0
None	'none'	Neither the app nor the Web View are resized.	1.0.0