React-native-screen-keyboard NPM

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.