npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

androidx-react-native-keyboard-input

v5.3.1

Published

React Native Custom Input Controller

Downloads

4

Readme

React Native Keyboard Input

Presents a React component as an input view which replaces the system keyboard. Can be used for creating custom input views such as an image gallery, stickers, etc.

Supports both iOS and Android.

Installation

Install the package from npm:

yarn add react-native-keyboard-input or npm i --save react-native-keyboard-input

Android

Update your dependencies in android/app/build.gradle:

dependencies {
  // Add this dependency:
  compile project(":reactnativekeyboardinput")
}

Update your android/settings.gradle:

include ':reactnativekeyboardinput'
project(':reactnativekeyboardinput').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-keyboard-input/lib/android')

In your MainApplication.java, add to the getPackages() list:

import com.wix.reactnativekeyboardinput.KeyboardInputPackage;

@Override
protected List<ReactPackage> getPackages() {
  return Arrays.<ReactPackage>asList(
      // Add this package:
      new KeyboardInputPackage(this) // (this = Android application object)
    );
}

ProGuard

If you have pro-guard enabled and are having trouble with your build, apply this to your project's main proguard-rules.pro:

-dontwarn com.wix.reactnativekeyboardinput.**

iOS

In Xcode, drag both RCTCustomInputController.xcodeproj and KeyboardTrackingView.xcodeproj from your node_modules to the Libraries folder in the Project Navigator, then add libRCTCustomInputController.a and libKeyboardTrackingView.a to your app target "Linked Frameworks and Libraries".

Covering the whold keyboard in predictive mode

To utilize this feature you'll need to add KeyboardTrackingView to your projects scheme build action.

From Xcode menu:

  1. product -> scheme -> manage schemes -> double-click your project
  2. Slect build at the right menu, click the + icon at the bottom of the targets list and select KeyboardTrackingView.
  3. Drag and position KeyboardTrackingView to be first, above your project, and unmark "Parallelize Build" option at the top.

If necessary, you can take a look at how it is set-up in the demo project.

Usage

There are 2 main parts necessary for the implementation:

1. A keyboard component

Create a component that you wish to use as a keyboard input. For example:

class KeyboardView extends Component {
  static propTypes = {
    title: PropTypes.string,
  };
  render() {
    return (
      <ScrollView contentContainerStyle={[styles.keyboardContainer, {backgroundColor: 'purple'}]}>
        <Text style={{color: 'white'}}>HELOOOO!!!</Text>
        <Text style={{color: 'white'}}>{this.props.title}</Text>
      </ScrollView>
    );
  }
}

Now register with the keyboard registry so it can be used later as a keyboard:

import {KeyboardRegistry} from 'react-native-keyboard-input';

KeyboardRegistry.registerKeyboard('MyKeyboardView', () => KeyboardView);

When you need to notify about selecting an item in the keyboard, use:

KeyboardRegistry.onItemSelected(`MyKeyboardView`, params);

2. Using the keyboard component as an input view

While this package provides several component and classes for low-level control over custom keyboard inputs, the easiets way would be to use KeyboardAccessoryView. It's the only thing you'll need to show your Keyboard component as a custom input. For example:

<KeyboardAccessoryView
  renderContent={this.keyboardToolbarContent}
  kbInputRef={this.textInputRef}
  kbComponent={this.state.customKeyboard.component}
  kbInitialProp={this.state.customKeyboard.initialProps}
/>

| Prop | Type | Description | | ---- | ---- | ----------- | | renderContent | Function | a fucntion for rendering the content of the keyboard toolbar | | kbInputRef | Object | A ref to the input component which triggers the showing of the keyboard | | kbComponent | String | The registered component name | | kbInitialProps | Object | Initial props to pass to the registered keyboard component | | onItemSelected | Function | a callback function for a selection of an item in the keyboard component |

This component takes care of making your toolbar (which is rendered via renderContent ) "float" above the keyboard (necessary for iOS), and for setting your component as the keyboard input when the kbComponent changes.

Demo

See demoScreen.js for a full working example.