react-native-screen-keyboard

Install

To get started install via npm:

 npm install react-native-screen-keyboard

Usage

Import:

 import { VirtualKeyboard } from 'react-native-screen-keyboard';

Then add it to your code:

<VirtualKeyboard
    onRef={ref => (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 <VirtualKeyboard /> 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 <VirtualKeyboard /> uses two arrays to allow you to set keys and define custom functions for each key.

| Prop | Type | Optional | Default | Description | |----------------------------|----------|----------|------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | onRef | any | Yes | | onRef allows you to call the throwError(message) method. | | onKeyDown | function | Yes | | Callback function triggered when a key is pressed. Returns the key value. | | onChange | function | Yes | | Callback function triggered when a key is pressed. Returns the full string. | | onCustomKey | function | Yes | | Callback function triggered when custom left button is pressed, use with onChange | | onPressFunction | 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 project. | | keyboard | array | Yes | See VirtualKeyboard.js | 4 x 3 matrix containing the value for each key. See VirtualKeyboard.js. | | keyboardFunc | array | Yes | See VirtualKeyboard.js | 4 x 3 matrix containing custom functions for each key. Pass null for no function. | | keyboardCustomKeyImage | number | Yes | null | Image for the custom key (bottom left key) | | keyboardCustomBackKey | element | Yes | backAsset | Element for the back key (bottom right key) | | keyDisabled | array | Yes | See VirtualKeyboard.js | 4 x 3 matrix containing the disabled value for each key. See VirtualKeyboard.js. | | keyboardMessageDisplayTime | number | Yes | 3000 | Time in milliseconds for the message dialog to automatically clear. | | vibration | bool | Yes | false | Key / Tactile vibration enabled | | keyboardStyle | object | Yes | See VirtualKeyboard.js | Style applied to the keyboard. | | keyboardDisabledStyle | object | Yes | See VirtualKeyboard.js | Style applied when the keyboard is disabled. | | keyCustomStyle | 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. | | keyStyle | object | Yes | See VirtualKeyboard.js | Style applied to each key on the keyboard. | | keyTextStyle | object | Yes | See VirtualKeyboard.js | Style applied to the text inside each key. | | keyImageStyle | object | Yes | See VirtualKeyboard.js | Style applied to image in a key. If an image is passed. | | messageStyle | object | Yes | See VirtualKeyboard.js | Style applied to popup error. Can set the background colour here. | | messageTextStyle | object | Yes | See VirtualKeyboard.js | Style applied to the text inside the popup error. | | messageTestID | string | Yes | "MessageContainer" | TestID belonging to the view component of the popup error. | | messageTextTestID | string | Yes | "Message" | TestID belonging to the text component inside the popup error. |

Contributing

If you want to issue a PR, go ahead ;)

License

This project is licensed under the MIT License

Contributors ✨

Thanks goes to these wonderful people (emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!