{"id":3989,"url":"https://github.com/umhan35/react-native-search-bar","last_synced_at":"2025-08-04T00:30:55.813Z","repository":{"id":33738351,"uuid":"37392981","full_name":"umhan35/react-native-search-bar","owner":"umhan35","description":"The high-quality iOS native search bar for react native.","archived":false,"fork":false,"pushed_at":"2023-04-16T13:04:33.000Z","size":1177,"stargazers_count":857,"open_issues_count":45,"forks_count":213,"subscribers_count":13,"default_branch":"master","last_synced_at":"2024-04-25T00:50:49.140Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"Objective-C","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/umhan35.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2015-06-14T00:19:53.000Z","updated_at":"2024-06-18T14:03:23.458Z","dependencies_parsed_at":"2024-06-18T14:03:06.486Z","dependency_job_id":"2df19acd-6005-4dfb-8d12-74b460ac321d","html_url":"https://github.com/umhan35/react-native-search-bar","commit_stats":{"total_commits":152,"total_committers":35,"mean_commits":"4.3428571428571425","dds":0.7039473684210527,"last_synced_commit":"f48eabc4590323782207fdfc38ce2e386ee47f28"},"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/umhan35%2Freact-native-search-bar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/umhan35%2Freact-native-search-bar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/umhan35%2Freact-native-search-bar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/umhan35%2Freact-native-search-bar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/umhan35","download_url":"https://codeload.github.com/umhan35/react-native-search-bar/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228508012,"owners_count":17931264,"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","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:16:57.775Z","updated_at":"2024-12-07T07:30:54.525Z","avatar_url":"https://github.com/umhan35.png","language":"Objective-C","funding_links":[],"categories":["Components","\u003ca name=\"UI:-Native-Modules\"\u003eUI: Native Modules\u003c/a\u003e","组件","Libraries","Objective-C","Others"],"sub_categories":["UI"],"readme":"\u003ch2 align=\"center\"\u003eReact Native Search Bar\u003c/h2\u003e\n\n\u003cp align=\"center\"\u003eThe high-quality\n \u003ca href=\"https://developer.apple.com/documentation/uikit/uisearchbar\"\u003enative search bar\u003c/a\u003e for \u003ca href=\"https://facebook.github.io/react-native/\"\u003ereact native.\u003c/a\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/react-native-search-bar\"\u003e\n    \u003cimg alt=\"npm version\" src=\"https://img.shields.io/npm/v/react-native-search-bar.svg?style=flat-square\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/react-native-react-native-search-bar\"\u003e\n    \u003cimg alt=\"npm downloads\" src=\"https://img.shields.io/npm/dm/react-native-search-bar.svg?style=flat-square\"\u003e\n  \u003c/a\u003e\n   \u003ca href=\"https://prettier.io\"\u003e\n    \u003cimg alt=\"code style: prettier\" src=\"https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./.github/SearchBar.png\"/\u003e\n\u003c/p\u003e\n\n\u003cbr\u003e\n\n## Getting Started\n\nThis is a native library. **It does not work with expo or\ncreate-react-native-app.**\n\n### Installation\n\n```bash\n# npm\nnpm install react-native-search-bar --save\n\n# yarn\nyarn add react-native-search-bar\n```\n\n### Pods\n\n\u003e If using CocoaPods or React Native version \u003e= 0.60.0\n\n```bash\ncd ios \u0026\u0026 pod install \u0026\u0026 cd ..\n```\n\n### Linking\n\n\u003e For React Native \u003c= 0.59 only\n\n```bash\nreact-native link react-native-search-bar\n```\n\nIf linking fails, follow the\n[manual linking steps](http://facebook.github.io/react-native/docs/linking-libraries-ios.html#manual-linking)\n\n## Usage\n\n```javascript\nimport SearchBar from 'react-native-search-bar';\n```\n\n```JSX\n\u003cSearchBar\n  ref=\"searchBar\"\n  placeholder=\"Search\"\n  onChangeText={...}\n  onSearchButtonPress={...}\n  onCancelButtonPress={...}\n/\u003e\n```\n\n### Managing the keyboard\n\n- Show - `this.refs.searchBar.focus();`\n- Hide\n  - `this.refs.searchBar.blur();` - uses the iOS `endEditing:true` method on the\n    underlying `UISearchBar` view.\n  - `this.refs.searchBar.unFocus();` - calls `resignFirstResponder` on the\n    `UITextField` used by the `UISearchBar`.\n\n### Examples\n\n- Show the keyboard when the view loads:\n\n```javascript\ncomponentDidMount() {\n  this.refs.searchBar.focus();\n}\n```\n\n- Hide the keyboard when the user searches:\n\n```javascript\n...\nonSearchButtonPress={this.refs.searchBar.unFocus}\n...\n```\n\nFor a full list of props check out\n[the typescript definitions file](./src/index.d.ts).\n\nThere is also an example project in the [example](./example) directory.\n\n## Contribution\n\nFor now, only some of the features of\n[UISearchBar](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UISearchBar_Class/)\nare implemented.\n\nFeel free to send a pull request to the\n[next](https://github.com/umhan35/react-native-search-bar/tree/next) branch. To\nget started, you can read the\n[\"Native UI Components (iOS)\"](http://facebook.github.io/react-native/docs/native-components-ios.html)\nguide on the React Native website.\n\nAlong with code contribution, you are welcomed to answer questions asked in the\n[Issues](https://github.com/umhan35/react-native-search-bar/issues).\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fumhan35%2Freact-native-search-bar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fumhan35%2Freact-native-search-bar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fumhan35%2Freact-native-search-bar/lists"}