nuǝɯ pǝɥsᴉꞁod mǝu

    react-native-screen-keyboard

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

    💻 📖 🚇

    Aike van den Brink

    🔣 💻 📖

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

    Install

    npm i react-native-screen-keyboard

    DownloadsWeekly Downloads

    224

    Version

    1.2.2

    License

    MIT

    Unpacked Size

    19.9 kB

    Total Files

    11

    Last publish

    Collaborators

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