React Native TextInput Utils (iOS only)

THIS PACKAGE IS NO LONGER MAINTAINED SINCE 2018 AND DOES NOT WORK WITH LATEST REACT NATIVE

A react native extendsion which allows you to control TextInput better.

The original name is react-native-keyboard-toolbar, because the latest add some features, I think the old name is not suitable for this package.

Timeline

0.3.7 - Now support RN 0.40

0.3.6 - New feature of setPickerRowByIndex and reloadPickerData by @DaveAdams88

0.2.5 - Added the fully support of multiline <TextInput/>

0.2.1 - Added the support of tintColor, which can set the cursor color

0.2 - Added the support of dismissKeyboard, moveCursorToLast and setSelection

0.1 - Added the support of setting an UIPickerView as the inputView

What can I do?

1. Adding UITabBarItem(s) into the keyboard of <TextInput/>
2. Adding a UIPickerView as a default keyboard of <TextInput/>
3. Setting the selection area or cursor using only two parameters, which are start and length

The PickerIOS Component in React Native 0.13 cannot be styled well outside NavigatorIOS

Limitation

This extension does not support <TextInput/> with multiline={true}, and I need some time to figure out. If you got some idea, it will really welcome to send me a PR.

Installation

I am still very simple to use

cd to your React Native project directory and run

npm install react-native-textinput-utils --save

How to run

Runing the demo

Download and open the RCTTextInputUtilsDemo.xcodeproj file, and runs.

Using this package in other project

You might need to add the es7.classProperties into your PROJECT_ROOT/npm_modules/react-native/packager/transformer.js and PROJECT_ROOT/npm_modules/react-native/packager/react-packager/.babelrc

iOS configuration

1. In XCode, in the project navigator right click Libraries ➜ Add Files to [your project's name]
2. Go to node_modules ➜ react-native-textinput-utils and ADD RCTTextInputUtils.xcodeproj
3. Drag libRCTKeyboardToolbar.a (from 'Products' under RCTTextInputUtils.xcodeproj) into General ➜ Linked Frameworks and Libraries phase. (GIF below)
4. Run your project (Cmd+R)

Basic Usage

var RCTKeyboardToolbarTextInput = require('react-native-textinput-utils');

<RCTKeyboardToolbarTextInput
  leftButtonText='I_AM_CANCEL_BUTTON'
  rightButtonText='I_AM_DONE_BUTTON'
  onCancel={(dismissKeyboard)=>dismissKeyboard()}
  onDone={(dismissKeyboard)=>dismissKeyboard