react-native-screen-keyboard

react-native-screen-keyboard

Install

To get started install via npm:

 npm install react-native-screen-keyboard

Usage

Import:

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

Then add it to your code:

<PinKeyboard
    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 sting, either "back" or "custom" to the keyDown callback.

The <PinKeyboard /> also has a number of functions which can be triggered through refs.

• 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.

PinKeyboard

The <PinKeyboard /> uses two arrays to allow you to set keys and define custom functions for each key.

Prop	Type	Optional	Default	Description
onRef	any	No		onRef allows you to call the throwError(message) method.
keyDown	function	No		Callback function triggered when a key is pressed. Returns the key value.
keyboard	array	Yes	See PinKeyboard.js	4 x 3 matrix containing the value for each key. See PinKeyboard.js.
keyboardFunc	array	Yes	See PinKeyboard.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)
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 PinKeyboard.js	Style applied to the keyboard.
keyboardDisabledStyle	object	Yes	See PinKeyboard.js	Style applied when the keyboard is disabled.
keyStyle	object	Yes	See PinKeyboard.js	Style applied to each key on the keyboard.
keyTextStyle	object	Yes	See PinKeyboard.js	Style applied to the text inside each key.
keyImageStyle	object	Yes	See PinKeyboard.js	Style applied to image in a key. If an image is passed.
messageStyle	object	Yes	See PinKeyboard.js	Style applied to popup error. Can set the background colour here.
messageTextStyle	object	Yes	See PinKeyboard.js	Style applied to the text inside the popup error.

Contributing

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

Authors

• Luke Brandon Farrell - Author

License

This project is licensed under the MIT License