react-native-screen-keyboard

1.4.0Β β€’Β PublicΒ β€’Β Published

react-native-screen-keyboard

All Contributors

npm npm licence npm downloads


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):

Luke Brandon Farrell
Luke Brandon Farrell

πŸ’» πŸ“– πŸš‡
Aike van den Brink
Aike van den Brink

πŸ”£ πŸ’» πŸ“–
Andy Phillipson
Andy Phillipson

πŸ’» πŸ“–
Leonardo BALLAND
Leonardo BALLAND

πŸ’» πŸ“–
Tim Van Dijck
Tim Van Dijck

πŸ’»

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

Package Sidebar

Install

npm i react-native-screen-keyboard

Weekly Downloads

77

Version

1.4.0

License

MIT

Unpacked Size

30.8 kB

Total Files

11

Last publish

Collaborators

  • lukebrandonfarrell
  • amogh-jrules
  • chestersim
  • rodriigovieira
  • wahaheha