Repository files navigation

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 isreact-native-keyboard-toolbar, because the latest add some features, I think the old name is not suitable for this package.

0.3.7 - Now support RN 0.40

0.3.6 - New feature ofsetPickerRowByIndex andreloadPickerData by @DaveAdams88

0.2.5 - Added the fully support ofmultiline<TextInput/>

0.2.1 - Added the support oftintColor, which can set the cursor color

0.2 - Added the support ofdismissKeyboard,moveCursorToLast andsetSelection

0.1 - Added the support of setting anUIPickerView as theinputView

1. AddingUITabBarItem(s) into the keyboard of<TextInput/>
2. Adding aUIPickerView as a default keyboard of<TextInput/>
3. Setting the selection area or cursor using only two parameters, which arestart andlength

ThePickerIOS Component in React Native 0.13 cannot be styled well outsideNavigatorIOS

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

I am still very simple to use

cd to your React Native project directory and run

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

Download and open theRCTTextInputUtilsDemo.xcodeproj file, and runs.

You might need to add thees7.classProperties into yourPROJECT_ROOT/npm_modules/react-native/packager/transformer.js andPROJECT_ROOT/npm_modules/react-native/packager/react-packager/.babelrc

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

varRCTKeyboardToolbarTextInput=require('react-native-textinput-utils');

<RCTKeyboardToolbarTextInputleftButtonText='I_AM_CANCEL_BUTTON'rightButtonText='I_AM_DONE_BUTTON'onCancel={(dismissKeyboard)=>dismissKeyboard()}onDone={(dismissKeyboard)=>dismissKeyboard()}/>

varpickerViewData=[{label:'One',value:'ValueOne'},{label:'Two',value:'ValueTwo'},{label:'Three',value:'ValueThree'}];

<RCTKeyboardToolbarTextInputpickerViewData={pickerViewData}onPickerSelect={(selectedIndex)=>{console.log(`selected${selectedIndex}`)}}.../>

<RCTKeyboardToolbarTextInputtintColor='red'.../>

<RCTKeyboardToolbarTextInputref='reference'.../>

and you can call

this.refs['reference'].setSelection(start,length);

this.refs['reference'].moveCursorToLast();

this.refs['reference'].dismissKeyboard();

The<TabBarNavigator/> object can take the following props:

• leftButtonText: The text in theleft-sideUIToolBarItem, if this value is empty, the UIToolBarItem on theleft side will not be created
• rightButtonText: The text in theright-sideUIToolBarItem, if this value is empty, the UIToolBarItem on theright side will not be created
• onCancel: The callback function ofleft-sideUIToolBarItem
• onDone: The callback function ofright-sideUIToolBarItem
• tintColor: The cusor color

And bothonCancel andonDone will passing an function back, if you call that function, the keyboard will be dismissed.

functiononCancel_Or_onDone(dismissKeyboardFunction){console.log(`I will dismiss the keyboard`);dismissKeyboardFunction();}

• pickerViewData: The data source of thePickerView, should be anArray, which each element is anObject, and thelabel in eachObject will be display in thePickerView
• onPickerSelect: The callback function when user picks an option, will pass theselectedIndex back, you can use this index to reference back to your dataArray

functiononPickerSelectCallback(selectedIndex){console.log(`Selected Index is${selectedIndex}`);}

If you set theref props of this Component, you can reference it back afterconstructor is called. You can usethis.refs[YOUR_REFERENCE] to access the Component`s related methods.

Here is the methods

• dismissKeyboard: If you want to dismiss the keyboard or theUIPickerView, just call it.
• moveCursorToLast: If you want to set the cursor to the last position, just call it.
• setSelection(start, length): Using this method, you can set the selection area, if thelength = 0, the cursor will move tostart position.

If something is undocumented here, and it is not clear with you, feel free to create an issue here, I will tried my best to answer you.

Feel free to request new features, just create an issue.It will be very welcome to pull request for me.

My emailme@idickyt.com

FacebookDicky Tsang

Sina Weibo@桐乃