---
name: "onKeyboardWillShow"
mode: "kit"
versionRequirements:
  - { name: "BaseKit", version: "3.6.6" }
  - { name: "@ray-js/ray", version: "1.5.30" }
platform:
  - "iOS"
  - "Android"
async: true
title: "onKeyboardWillShow - Keyboard show event"
---

## onKeyboardWillShow

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

> [PLATFORM] iOS, Android

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

### Description

Keyboard pop-up

### 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 { onKeyboardWillShow, scanCode } from '@ray-js/ray'

// Register the keyboard show 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, triggering onKeyboardWillShow.
onKeyboardWillShow(e => {
  console.log("[onKeyboardWillShow]", e);
});

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