{"id":4157,"url":"https://github.com/DickyT/react-native-textinput-utils","last_synced_at":"2025-08-04T00:32:18.326Z","repository":{"id":57337943,"uuid":"45888437","full_name":"DickyT/react-native-textinput-utils","owner":"DickyT","description":"A react native extension which allows you to control TextInput better.","archived":true,"fork":false,"pushed_at":"2020-08-18T20:34:45.000Z","size":174,"stargazers_count":85,"open_issues_count":7,"forks_count":32,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-07-23T04:06:10.357Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Objective-C","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/DickyT.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-11-10T04:58:56.000Z","updated_at":"2023-09-07T07:18:29.000Z","dependencies_parsed_at":"2022-08-29T21:10:30.381Z","dependency_job_id":null,"html_url":"https://github.com/DickyT/react-native-textinput-utils","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/DickyT/react-native-textinput-utils","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DickyT%2Freact-native-textinput-utils","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DickyT%2Freact-native-textinput-utils/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DickyT%2Freact-native-textinput-utils/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DickyT%2Freact-native-textinput-utils/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DickyT","download_url":"https://codeload.github.com/DickyT/react-native-textinput-utils/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DickyT%2Freact-native-textinput-utils/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268634017,"owners_count":24281886,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-03T02:00:12.545Z","response_time":2577,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-01-05T20:17:02.858Z","updated_at":"2025-08-04T00:32:18.003Z","avatar_url":"https://github.com/DickyT.png","language":"Objective-C","readme":"## React Native TextInput Utils (iOS only)\n[![npm version](https://badge.fury.io/js/react-native-textinput-utils.svg)](https://badge.fury.io/js/react-native-textinput-utils)\n[![MIT](https://img.shields.io/dub/l/vibe-d.svg)]()\n\n**THIS PACKAGE IS NO LONGER MAINTAINED SINCE 2018 AND DOES NOT WORK WITH LATEST REACT NATIVE**\n\nA react native extendsion which allows you to control TextInput better.\n\nThe original name is [react-native-keyboard-toolbar](http://github.com/DickyT/react-native-keyboard-toolbar), because the latest add some features, I think the old name is not suitable for this package.\n\n![react-native-textinput-utils](https://cloud.githubusercontent.com/assets/4535844/11055687/f2652524-874f-11e5-96f0-333c6bc4ba1c.gif)\n\n## Timeline\n0.3.7 - Now support RN 0.40\n\n0.3.6 - New feature of `setPickerRowByIndex` and `reloadPickerData` by @DaveAdams88\n\n0.2.5 - Added the fully support of `multiline` `\u003cTextInput/\u003e`\n\n0.2.1 - Added the support of `tintColor`, which can set the cursor color\n\n0.2 - Added the support of `dismissKeyboard`, `moveCursorToLast` and `setSelection`\n\n0.1 - Added the support of setting an `UIPickerView` as the `inputView`\n\n\n## What can I do?\n\n1. Adding `UITabBarItem`(s) into the keyboard of `\u003cTextInput/\u003e`\n2. Adding a `UIPickerView` as a default keyboard of `\u003cTextInput/\u003e`\n3. Setting the selection area or cursor using only two parameters, which are `start` and `length`\n\n*The `PickerIOS` Component in React Native 0.13 cannot be styled well outside `NavigatorIOS`*\n\n\n## Limitation\nThis extension does not support `\u003cTextInput/\u003e` 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.\n\n## Installation\n\n__I am still very simple to use__\n\n```cd``` to your React Native project directory and run\n\n```npm install react-native-textinput-utils --save```\n\n## How to run\n\n### Runing the demo\nDownload and open the `RCTTextInputUtilsDemo.xcodeproj` file, and runs.\n\n### Using this package in other project\nYou 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`\n\n## iOS configuration\n\n1. In XCode, in the project navigator right click `Libraries` ➜ `Add Files to [your project's name]`\n2. Go to `node_modules` ➜ `react-native-textinput-utils` and *ADD* `RCTTextInputUtils.xcodeproj` \n3. Drag `libRCTKeyboardToolbar.a` (from 'Products' under RCTTextInputUtils.xcodeproj) into `General` ➜ `Linked Frameworks and Libraries` phase. (GIF below)\n5. Run your project (`Cmd+R`)\n\n![RCTTextInputUtilsGuide](https://cloud.githubusercontent.com/assets/4535844/11019656/9ff660dc-85d8-11e5-9823-b4437f498a77.gif)\n\n## Basic Usage\n```jsx\nvar RCTKeyboardToolbarTextInput = require('react-native-textinput-utils');\n```\n\n```jsx\n\u003cRCTKeyboardToolbarTextInput\n  leftButtonText='I_AM_CANCEL_BUTTON'\n  rightButtonText='I_AM_DONE_BUTTON'\n  onCancel={(dismissKeyboard)=\u003edismissKeyboard()}\n  onDone={(dismissKeyboard)=\u003edismissKeyboard()}\n/\u003e\n```\n\n### If you want a UIPickerView\n```jsx\nvar pickerViewData = [\n  {\n    label: 'One',\n    value: 'ValueOne'\n  },\n  {\n    label: 'Two',\n    value: 'ValueTwo'\n  },\n  {\n    label: 'Three',\n    value: 'ValueThree'\n  }\n];\n```\n```jsx\n\u003cRCTKeyboardToolbarTextInput\n  pickerViewData={pickerViewData}\n  onPickerSelect={(selectedIndex)=\u003e{console.log(`selected ${selectedIndex}`)}}\n  ...\n/\u003e\n```\n\n### If you want to set the cursor color\n```jsx\n\u003cRCTKeyboardToolbarTextInput\n  tintColor='red'\n  ...\n/\u003e\n```\n\n### If you want to set the selection area\n```jsx\n\u003cRCTKeyboardToolbarTextInput\n  ref='reference'\n  ...\n/\u003e\n```\nand you can call\n```jsx\nthis.refs['reference'].setSelection(start, length);\n```\n\n#### Or you just want to simply move the cursor to the last\n```jsx\nthis.refs['reference'].moveCursorToLast();\n```\n\n#### Or dismiss the keyboard whenever you want\n```jsx\nthis.refs['reference'].dismissKeyboard();\n```\n\n## Configurations\nThe **`\u003cTabBarNavigator/\u003e`** object can take the following props:\n\n### Basic Parameters\n- `leftButtonText`: The text in the *left-side* `UIToolBarItem`, if this value is empty, the UIToolBarItem on the *left* side will not be created\n- `rightButtonText`: The text in the *right-side* `UIToolBarItem`, if this value is empty, the UIToolBarItem on the *right* side will not be created\n- `onCancel`: The callback function of *left-side* `UIToolBarItem`\n- `onDone`: The callback function of *right-side* `UIToolBarItem`\n- `tintColor`: The cusor color\n\nAnd both `onCancel` and `onDone` will passing an function back, if you call that function, the keyboard will be dismissed.\n\n```jsx\nfunction onCancel_Or_onDone(dismissKeyboardFunction) {\n    console.log(`I will dismiss the keyboard`);\n    dismissKeyboardFunction();\n}\n```\n\n### PickerView related Parameters\n- `pickerViewData`: The data source of the `PickerView`, should be an `Array`, which each element is an `Object`, and the `label` in each `Object` will be display in the `PickerView`\n- `onPickerSelect`: The callback function when user picks an option, will pass the `selectedIndex` back, you can use this index to reference back to your data `Array`\n\n```jsx\nfunction onPickerSelectCallback(selectedIndex) {\n    console.log(`Selected Index is ${selectedIndex}`);\n}\n```\n\n__If you set the `ref` props of this Component, you can reference it back after `constructor` is called. You can use `this.refs[YOUR_REFERENCE]` to access the Component`s related methods.__\n\nHere is the methods\n- `dismissKeyboard`: If you want to dismiss the keyboard or the `UIPickerView`, just call it.\n- `moveCursorToLast`: If you want to set the cursor to the last position, just call it.\n- `setSelection(start, length)`: Using this method, you can set the selection area, if the `length = 0`, the cursor will move to `start` position.\n\nQuestions\n--------------\nIf 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.\n\nAnything else\n--------------\nFeel free to request new features, just create an issue.\nIt will be very welcome to pull request for me.\n\nMy email ```me@idickyt.com```\n\nFacebook [Dicky Tsang](https://www.facebook.com/idickytsang)\n\nSina Weibo ```@桐乃```\n","funding_links":[],"categories":["Components","Others"],"sub_categories":["UI"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FDickyT%2Freact-native-textinput-utils","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FDickyT%2Freact-native-textinput-utils","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FDickyT%2Freact-native-textinput-utils/lists"}