Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including @junctiontv/react-native-on-screen-keyboard with all npm packages installed. Try it out:

require("react/package.json"); // react is a peer dependency. require("react-native/package.json"); // react-native is a peer dependency. var reactNativeOnScreenKeyboard = require("@junctiontv/react-native-on-screen-keyboard")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

@junctiontv/react-native-on-screen-keyboard v1.0.4

On Screen Keyboard for React Native

React Native On-screen Keyboard

A React Native component onscreen keyboard for React Native that displays an onscreen keyboard and puts the input into a `TextInput` component.

Installation

npm i @junctiontv/react-native-on-screen-keyboard

Usage

import Keyboard from "@junctiontv/react-native-on-screen-keyboard";
...

<Keyboard
  title={title}
  textInput={textInputRef}
  onInput={this.handleInput}
  inputType={inputType}
  keyboardContainerStyle={styles.keyboardContainer}
  keyboardTitleStyle={styles.keyboardTitle}
  keyboardButtonContainerStyle={styles.keyboardButtonContainer}
  keyboardButtonTextStyle={styles.keyboardButtonText}
  keyboardButtonTextPressStyle={styles.keyboardButtonTextPress}
  keyboardButtonStyle={styles.keyboardButton}
  keyboardButtonPressStyle={styles.keyboardButtonPress}
/>
PropTypeOptionalDescription
titleString:heavy_check_mark:sets the title of the keyboard
textInputReact Ref:x:the reference of the TextInput which is to be attached
onInputFunction:x:callback to set the value of the text from the keyboard
inputTypeString:x:sets the input type of the keyboard. Currently only textEmailAddress and textPassword are supported
keyboardContainerStyleObject:heavy_check_mark:style to set the style for the keyboard container
keyboardTitleStyleObject:heavy_check_mark:style to set the style for the keyboard title
keyboardButtonContainerStyleObject:heavy_check_mark:style to set the style for the keyboard buttons container
keyboardButtonTextStyleObject:heavy_check_mark:style to set the style for the keyboard buttons text in unpressed state
keyboardButtonTextPressStyleObject:heavy_check_mark:style to set the style for the keyboard buttons text in pressed state
keyboardButtonStyleObject:heavy_check_mark:style to set the style for the keyboard buttons in unpressed state
keyboardButtonPressStyleObject:heavy_check_mark:style to set the style for the keyboard buttons in pressed state

Contributing

All contributions including new features, requests, bug fixes are open to everyone. Feel free to open a PR!

License

React Native On-screen Keyboard is MIT licensed.

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free