---
name: "onKeyboardHeightChange"
mode: "kit"
versionRequirements:
  - { name: "BaseKit", version: "3.6.1" }
  - { name: "@ray-js/ray", version: "1.5.30" }
platform:
  - "iOS"
  - "Android"
async: true
title: "onKeyboardHeightChange - onKeyboardHeightChange Send keyboard event to JS"
---

## onKeyboardHeightChange

> [VERSION] BaseKit >= 3.6.1 | @ray-js/ray >= 1.5.30

> [PLATFORM] iOS, Android

> ⚡ **Supports Promise** — Returns a Promise when success / fail / complete callbacks are omitted.

### Description

onKeyboardHeightChange sends keyboard events to JS

### Parameters

`(listener: Function)`

| Parameter | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `listener` | `(params: KeyboardBeanRes) => void` | Yes | - |  |

### Referenced Types

##### `interface` KeyboardBeanRes

| Property | Type | Since | Description |
| --- | --- | --- | --- |
| `height` | `number` | `3.6.1` | Keyboard height |
| `keyBoardArea` | `KeyBoardArea` | `3.32.6` | Keyboard pop-up position |

##### `interface` KeyBoardArea

| Property | Type | Since | Description |
| --- | --- | --- | --- |
| `top` | `number` | `3.32.6` | Top position of the keyboard when shown |
| `bottom` | `number` | `3.32.6` | Bottom position of the keyboard when shown |
| `left` | `number` | `3.32.6` | Left position of the keyboard when shown |
| `right` | `number` | `3.32.6` | Right position of the keyboard when shown |


### Examples

#### Demo

```tsx
import { onKeyboardHeightChange, scanCode } from '@ray-js/ray'

// Register the keyboard height change event and use scanCode's keyboard input mode to bring up the system keyboard.
// Passing isShowKeyboard: true to scanCode provides a "Keyboard input" entry on the scan page; after entering, the input field auto-focuses to show the system keyboard, and keyboard height changes trigger onKeyboardHeightChange.
onKeyboardHeightChange(e => {
  console.log("[onKeyboardHeightChange]", e);
});

scanCode({
  onlyFromCamera: false,
  isShowKeyboard: true,
  keyboardBean: { title: "Keyboard input" },
  success: data => {
    console.log(data);
  },
  fail: error => {
    console.error(error);
  },
});
```