https://github.com/lukebrandonfarrell/react-native-screen-keyboard

On-screen keyboard with customisable keys and tactile / UI feedback 📱
https://github.com/lukebrandonfarrell/react-native-screen-keyboard

feedback javascript keyboard native on-screen on-screen-keyboard pin-code pins react-native react-native-pins

Last synced: 2 months ago
JSON representation

On-screen keyboard with customisable keys and tactile / UI feedback 📱

Host: GitHub
URL: https://github.com/lukebrandonfarrell/react-native-screen-keyboard
Owner: lukebrandonfarrell
Created: 2019-05-01T09:44:34.000Z (over 6 years ago)
Default Branch: master
Last Pushed: 2023-04-24T23:56:06.000Z (over 2 years ago)
Last Synced: 2025-07-17T21:15:01.022Z (3 months ago)
Topics: feedback, javascript, keyboard, native, on-screen, on-screen-keyboard, pin-code, pins, react-native, react-native-pins
Language: JavaScript
Homepage:
Size: 2.06 MB
Stars: 29
Watchers: 3
Forks: 12
Open Issues: 7
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# react-native-screen-keyboard

[![All Contributors](https://img.shields.io/badge/all_contributors-5-orange.svg?style=flat-square)](#contributors-)

[![npm](https://img.shields.io/npm/v/react-native-screen-keyboard.svg?style=flat-square)](https://www.npmjs.com/package/react-native-screen-keyboard)
[![npm licence](http://img.shields.io/npm/l/react-native-screen-keyboard.svg?style=flat-square)](https://npmjs.org/package/react-native-screen-keyboard)
[![npm downloads](http://img.shields.io/npm/dt/react-native-screen-keyboard.svg?style=flat-square)](https://npmjs.org/package/react-native-screen-keyboard)

## Install

To get started install via npm:
```sh
npm install react-native-screen-keyboard
```

#### Usage

Import:
```js
import { VirtualKeyboard } from 'react-native-screen-keyboard';
```

Then add it to your code:
```js
(this.keyboard = ref)}
keyDown={this.keyDown.bind(this)}
/>

// Callback function which receives the key pressed
keyDown(key) {
// Key pressed
}
```

The back and custom key will pass a string, either `"back"` or `"custom"` to the keyDown callback.

The `` also has a number of functions which can be triggered through refs.

- `back()` this will execute the back action to delete one character.
- `setText(text)` this will set the keyboard text to the given value.
- `displayMessage(message)` this will create a popup above the
keyboard displaying the given a message. The style of the popup can be customized through props.
- `clearMessage()` this will clear the keyboard message dialog.
- `enable()` this will enable the keyboard for input.
- `disable()` this will disable the keyboard.

#### VirtualKeyboard

The `` uses two arrays to allow you to set keys and define custom functions for each key.

| Prop
|----------------
| onRef
| onKeyDown
| onChange
| onCustomKey
| onPressFunction
| keyboard
| keyboardFunc
| keyboardCustomKeyImage
| keyboardCustomBackKey
| keyDisabled
| keyboardMessageDisplayTime
| vibration
| keyboardStyle
| keyboardDisabledStyle
| keyCustomStyle
| keyStyle
| keyTextStyle
| keyImageStyle
| messageStyle
| messageTextStyle
| messageTestID
| messageTextTestID | Type | Optional | Default | Description | ------------|----------|----------|------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | any | Yes | | onRef allows you to call the `throwError(message)` method. | | function | Yes | | Callback function triggered when a key is pressed. Returns the key value. | | function | Yes | | Callback function triggered when a key is pressed. Returns the full string. | | function | Yes | | Callback function triggered when custom left button is pressed, use with `onChange` | | string | Yes | onPressIn | Determines which function to call when the user pressed a key. Could be one of the following three functions: `onPress`, `onPressIn` or `onPressOut`. For an explanation how the functions work take a look at the GitHub page from the [react-native-material-ripple](https://github.com/n4kz/react-native-material-ripple#properties) project. | | array | Yes | See VirtualKeyboard.js | 4 x 3 matrix containing the value for each key. See VirtualKeyboard.js. | | array | Yes | See VirtualKeyboard.js | 4 x 3 matrix containing custom functions for each key. Pass null for no function. | | number | Yes | null | Image for the custom key (bottom left key) | | element | Yes | backAsset | Element for the back key (bottom right key) | | array | Yes | See VirtualKeyboard.js | 4 x 3 matrix containing the disabled value for each key. See VirtualKeyboard.js. | | number | Yes | 3000 | Time in milliseconds for the message dialog to automatically clear. | | bool | Yes | false | Key / Tactile vibration enabled | | object | Yes | See VirtualKeyboard.js | Style applied to the keyboard. | | object | Yes | See VirtualKeyboard.js | Style applied when the keyboard is disabled. | | array | Yes | See VirtualKeyboard.js | 4 x 3 matrix containing a custom style for each key. Pass null for default style or to use keyStyle as an override. | | object | Yes | See VirtualKeyboard.js | Style applied to each key on the keyboard. | | object | Yes | See VirtualKeyboard.js | Style applied to the text inside each key. | | object | Yes | See VirtualKeyboard.js | Style applied to image in a key. If an image is passed. | | object | Yes | See VirtualKeyboard.js | Style applied to popup error. Can set the background colour here. | | object | Yes | See VirtualKeyboard.js | Style applied to the text inside the popup error. | | string | Yes | "MessageContainer" | TestID belonging to the view component of the popup error. | | string | Yes | "Message" | TestID belonging to the text component inside the popup error. |