Skip to content

hablemosonline/react-native-keyboard-tracking-view

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

88 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react-native-keyboard-tracking-view

A react native UI component that enables “keyboard tracking" for this view and it's sub-views. Would typically be used when you have a TextInput inside this view.

Demo

Installation

  • Install using npm:

     npm i react-native-keyboard-tracking-view --save
    
  • Locate the module lib folder in your node modules: PROJECT_DIR/node_modules/react-native-keyboard-tracking-view/lib.

  • Drag the KeyboardTrackingView.xcodeproj project file into your project

  • Add libKeyboardTrackingView.a to your target's Linked Frameworks and Libraries.

How To Use

Require the native component:

import {KeyboardTrackingView} from 'react-native-keyboard-tracking-view';

Now use it in your jsx as the parent of the views you whish to track the keyboard (usually wraps a TextInput at the bottom of the screen):

<KeyboardTrackingView style={styles.textInputContainer}>
	<TextInput style={styles.textInput} />
</KeyboardTrackingView>

##Native Properties

Attribute Description
trackInteractive boolean property that enables tracking of the keyboard when it's dismissed interactively. False by default. Why? When using an external keyboard (BT), you still get the keyboard events and the view just hovers when you focus the input. Also, if you're not using interactive style of dismissing the KB (or if you don't have an input inside this view) it doesn't make sense to track it anyway. (This is caused because of the usage of inputAccessory to be able to track the keyboard interactive change and it introduces this bug)

Example Project

Check out the full example project here.

In the example folder, perform npm install and then run it from the Xcode project.

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • Objective-C 79.5%
  • JavaScript 13.6%
  • Python 3.9%
  • Java 3.0%