{"id":17700712,"url":"https://github.com/wrathchaos/react-native-header-search-bar","last_synced_at":"2025-04-13T06:41:52.980Z","repository":{"id":35153963,"uuid":"213726678","full_name":"WrathChaos/react-native-header-search-bar","owner":"WrathChaos","description":"Fully customizable header search bar for React Native","archived":false,"fork":false,"pushed_at":"2023-10-21T00:16:27.000Z","size":4046,"stargazers_count":118,"open_issues_count":3,"forks_count":9,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-10-25T16:58:28.108Z","etag":null,"topics":["android","apple","freakycoder","front-end","google","header","ios","javascript","js","mobile","programming","react","react-native","reactjs","search","search-bar"],"latest_commit_sha":null,"homepage":"https://freakycoder.com","language":"JavaScript","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/WrathChaos.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":"2019-10-08T18:53:29.000Z","updated_at":"2024-06-19T10:45:20.000Z","dependencies_parsed_at":"2024-06-21T15:34:09.386Z","dependency_job_id":"b17f282e-6af0-48fd-85d5-ae1223e86f19","html_url":"https://github.com/WrathChaos/react-native-header-search-bar","commit_stats":{"total_commits":67,"total_committers":6,"mean_commits":"11.166666666666666","dds":0.5223880597014925,"last_synced_commit":"e1c90b58438966e9aa46cd6f21f435718f8172aa"},"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WrathChaos%2Freact-native-header-search-bar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WrathChaos%2Freact-native-header-search-bar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WrathChaos%2Freact-native-header-search-bar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WrathChaos%2Freact-native-header-search-bar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/WrathChaos","download_url":"https://codeload.github.com/WrathChaos/react-native-header-search-bar/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248675435,"owners_count":21143763,"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":["android","apple","freakycoder","front-end","google","header","ios","javascript","js","mobile","programming","react","react-native","reactjs","search","search-bar"],"created_at":"2024-10-24T17:42:53.520Z","updated_at":"2025-04-13T06:41:52.957Z","avatar_url":"https://github.com/WrathChaos.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cimg alt=\"React Native Header Search Bar\" src=\"assets/logo.png\" width=\"1050\"/\u003e\n\n[![Battle Tested ✅](https://img.shields.io/badge/-Battle--Tested%20%E2%9C%85-03666e?style=for-the-badge)](https://github.com/WrathChaos/react-native-header-search-bar)\n\n[![Fully customizable header search bar for React Native](https://img.shields.io/badge/-Fully%20customizable%20header%20search%20bar%20for%20React%20Native-lightgrey?style=for-the-badge)](https://github.com/WrathChaos/react-native-header-search-bar)\n\n[![npm version](https://img.shields.io/npm/v/react-native-header-search-bar.svg?style=for-the-badge)](https://www.npmjs.com/package/react-native-header-search-bar)\n[![npm](https://img.shields.io/npm/dt/react-native-header-search-bar.svg?style=for-the-badge)](https://www.npmjs.com/package/react-native-header-search-bar)\n![Platform - Android and iOS](https://img.shields.io/badge/platform-Android%20%7C%20iOS-blue.svg?style=for-the-badge)\n[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg?style=for-the-badge)](https://opensource.org/licenses/MIT)\n[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier)\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n      \u003cb\u003eHeader Search Bar\u003c/b\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n      \u003cb\u003eHeader Classic Search Bar\u003c/b\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\n       \u003cimg alt=\"React Native Header Search Bar\"\n        src=\"assets/Screenshots/example.png\" /\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n     \u003cimg alt=\"React Native Header Classic Search Bar\"\n        src=\"assets/Screenshots/example2.png\" /\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n## Installation\n\nAdd the dependency:\n\n### React Native:\n\n```ruby\nnpm i react-native-header-search-bar\n```\n\n## Peer Dependencies\n\n###### IMPORTANT! You need install them.\n\n```js\n\"react-native-androw\": \"\u003e= 0.0.33\",\n\"react-native-vector-icons\": \"\u003e= 6.6.0\",\n\"react-native-safe-area-context\": \"\u003e= 0.6.1\",\n\"react-native-dynamic-vector-icons\": \"\u003e= 0.2.1\",\n\"@freakycoder/react-native-helpers\": \"\u003e= 0.0.21\"\n```\n\n# Component Options\n\n- HeaderSearchBar\n- HeaderClassicSearchBar\n\n## Import\n\n```js\nimport {\n  HeaderSearchBar,\n  HeaderClassicSearchBar\n} from \"react-native-header-search-bar\";\n```\n\n# HeaderSearchBar Usage\n\n```jsx\n\u003cHeaderSearchBar onChangeText={text =\u003e console.log(text)} /\u003e\n```\n\n# HeaderClassicSearchBar Usage\n\n```jsx\n\u003cHeaderClassicSearchBar onChangeText={text =\u003e console.log(text)} /\u003e\n```\n\n# Configuration - Props\n\n## Main Props\n\n| Property             |   Type    |      Default      | Description                                                |\n| -------------------- | :-------: | :---------------: | ---------------------------------------------------------- |\n| backgroundColor      |   color   |       #fff        | change the background color                                |\n| shadowColor          |   color   |       #000        | change the main shadow color                               |\n| firstTitle           |  string   |     Find your     | set the first title itself                                 |\n| secondTitle          |  string   | Favorite Art Work | set the second title itself                                |\n| firstTitleColor      |   color   |      #959597      | change the first title's text color                        |\n| secondTitleColor     |   color   |      #34343b      | change the second title's text color                       |\n| firstTitleFontSize   |  number   |        18         | change the first title font size                           |\n| secondTitleFontSize  |  number   |        18         | change the second title font size                          |\n| iconComponent        | component |  hamburger icon   | set your own component instead of hamburger icon component |\n| onPressHamburgerIcon | function  |       null        | set your own function when hamburger icon is on pressed    |\n\n## SearchBox Props\n\n| Property                 |   Type    |          Default          | Description                                           |\n| ------------------------ | :-------: | :-----------------------: | ----------------------------------------------------- |\n| iconName                 |  string   |          search           | set the icon name                                     |\n| iconType                 |  string   |         EvilIcons         | set the icon type                                     |\n| iconSize                 |  number   |            25             | set the icon size                                     |\n| iconColor                |   color   |           #000            | set the icon color                                    |\n| onChangeText             | function  |         function          | set your own logic for changing text                  |\n| value                    |  string   |         undefined         | set the value for search box's text input             |\n| searchBoxText            |  string   | What are you looking for? | set the search box's text                             |\n| searchBoxTextStyle       |   style   |          default          | set your own style for text input's style             |\n| searchBoxOnPress         | function  |         function          | set your own logic when tapping the search box itself |\n| searchBoxWidth           |  number   |            95%            | change the search box's width                         |\n| searchBoxBorderRadius    |  number   |             8             | change the search box's border radius                 |\n| searchBoxBackgroundColor |   color   |          #f5f5f5          | change the search box's background color              |\n| iconComponent            | component |           Icon            | set your own icon component instead of Icon           |\n| disableTextInput         |  boolean  |           false           | disable or enable the text input itself               |\n\n## Future Plans\n\n- [x] ~~LICENSE~~\n- [x] ~~Header Classic Search Bar Component~~\n- [ ] Write an article about the lib on Medium\n\n## Inspiration\n\nHeader Search Bar Component is designed by: [Jawadur Rahman](https://www.instagram.com/p/B3RSEG9APnH/)\n\n## Author\n\nFreakyCoder, kurayogun@gmail.com\n\n## License\n\nReact Native Header Search Bar is available under the MIT license. See the LICENSE file for more info.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwrathchaos%2Freact-native-header-search-bar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwrathchaos%2Freact-native-header-search-bar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwrathchaos%2Freact-native-header-search-bar/lists"}