Skip to content

Latest commit

 

History

History
98 lines (75 loc) · 6.35 KB

README.md

File metadata and controls

98 lines (75 loc) · 6.35 KB
Raw

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

The <VirtualKeyboard /> 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.

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

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
💻 📖 🚇

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