{"id":16098619,"url":"https://github.com/funnyzak/react-native-input-search-bar","last_synced_at":"2025-06-15T04:36:55.634Z","repository":{"id":63880887,"uuid":"571164684","full_name":"funnyzak/react-native-input-search-bar","owner":"funnyzak","description":"A simple search bar component for React Native.","archived":false,"fork":false,"pushed_at":"2023-07-14T08:19:55.000Z","size":772,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-14T15:54:36.818Z","etag":null,"topics":["react-native","react-native-search-bar","search-bar"],"latest_commit_sha":null,"homepage":"https://rnsb.gp.yycc.dev","language":"TypeScript","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/funnyzak.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":"2022-11-27T11:36:14.000Z","updated_at":"2024-01-12T18:49:28.000Z","dependencies_parsed_at":"2024-10-27T17:24:47.821Z","dependency_job_id":"2aea5ad5-6bb2-4b18-9287-73910dc40f0d","html_url":"https://github.com/funnyzak/react-native-input-search-bar","commit_stats":{"total_commits":25,"total_committers":3,"mean_commits":8.333333333333334,"dds":0.52,"last_synced_commit":"21e6d5b274ce1d0826c30b74f902fbdf832ed454"},"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/funnyzak%2Freact-native-input-search-bar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/funnyzak%2Freact-native-input-search-bar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/funnyzak%2Freact-native-input-search-bar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/funnyzak%2Freact-native-input-search-bar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/funnyzak","download_url":"https://codeload.github.com/funnyzak/react-native-input-search-bar/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243910715,"owners_count":20367538,"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":["react-native","react-native-search-bar","search-bar"],"created_at":"2024-10-09T18:24:10.490Z","updated_at":"2025-03-18T07:30:51.541Z","avatar_url":"https://github.com/funnyzak.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React-Native-Input-Search-Bar\n\nA simple search bar component for React Native.\n\n[![Build Status][build-status-image]][build-status]\n[![license][license-image]][repository-url]\n[![NPM version][npm-image]][npm-url]\n[![Release Date][rle-image]][rle-url]\n[![npm download][download-image]][download-url]\n\n\u003c!--[![GitHub repo size][repo-size-image]][repository-url]--\u003e\n\u003c!-- [![Sourcegraph][sg-image]][sg-url] --\u003e\n\n[repo-size-image]: https://img.shields.io/github/repo-size/funnyzak/react-native-input-search-bar\n[build-status-image]: https://github.com/funnyzak/react-native-input-search-bar/actions/workflows/ci.yml/badge.svg\n[build-status]: https://github.com/funnyzak/react-native-input-search-bar/actions\n[license-image]: https://img.shields.io/github/license/funnyzak/react-native-input-search-bar.svg?style=flat-square\n[repository-url]: https://github.com/funnyzak/react-native-input-search-bar\n[npm-image]: https://img.shields.io/npm/v/react-native-input-search-bar.svg?style=flat-square\n[npm-url]: https://npmjs.org/package/react-native-input-search-bar\n[download-image]: https://img.shields.io/npm/dm/react-native-input-search-bar.svg?style=flat-square\n[download-url]: https://npmjs.org/package/react-native-input-search-bar\n[sg-image]: https://img.shields.io/badge/view%20on-Sourcegraph-brightgreen.svg?style=flat-square\n[sg-url]: https://sourcegraph.com/github.com/funnyzak/react-native-input-search-bar\n[rle-image]: https://img.shields.io/github/release-date/funnyzak/react-native-input-search-bar.svg\n[rle-url]: https://github.com/funnyzak/react-native-input-search-bar/releases/latest\n\n## TOC\n\n- [React-Native-Input-Search-Bar](#react-native-input-search-bar)\n  - [TOC](#toc)\n  - [Preview](#preview)\n  - [Installation](#installation)\n  - [Getting Started](#getting-started)\n    - [Basic usage](#basic-usage)\n  - [Props](#props)\n    - [Props for ReactNativeInputSearchBar](#props-for-reactnativeinputsearchbar)\n    - [TypeDefine for ReactNativeInputSearchBar](#typedefine-for-reactnativeinputsearchbar)\n  - [Reference](#reference)\n  - [Contribution](#contribution)\n  - [License](#license)\n\n\n## Preview\n\n[![preview](https://raw.githubusercontent.com/funnyzak/react-native-input-search-bar/main/.github/docs/images/preview.png)](https://github.com/funnyzak/react-native-input-search-bar)\n\n## Installation\n\n[![NPM](https://nodei.co/npm/react-native-input-search-bar.png?downloads=true\u0026downloadRank=true\u0026stars=true)](https://nodei.co/npm/react-native-input-search-bar/)\n\n- 1.Run `npm i react-native-svg react-native-input-search-bar --save`\n  - or `yarn add react-native-svg react-native-input-search-bar`\n- 2.`import ReactNativeInputSearchBar from 'react-native-input-search-bar'`\n- 3. Run `npx pod-install` if you are using iOS, and `react-native link` if you are using Android. (this step is for `react-native-svg`)\n\n**Notes:** You need to install `react-native-svg` first, because this component depends on it to render the search icon.\n\n## Getting Started\n\nAdd `react-native-input-search-bar` to your js file.\n\n`import ReactNativeInputSearchBar from 'react-native-input-search-bar'`\n\nInside your component's render method, use ReactNativeInputSearchBar:\n\n```javascript\n render() {\n     return (\n         \u003cView\u003e\n          \u003cReactNativeInputSearchBar\n            onSubmitSearch={(_val) =\u003e {\n              console.log(_val);\n            }}\n            ...\n            buttonText=\"Search\"\n          /\u003e\n         \u003c/View\u003e\n     );\n }\n```\n\n### Basic usage\n\n```javascript\nimport ReactNativeInputSearchBar from 'react-native-input-search-bar'\nimport { useState } from 'react'\n\nconst SearchBar = () =\u003e {\n  const [query, setQuery] = useState\u003cstring\u003e('')\n  const [activeSearch, setActiveSearch] = useState\u003cboolean\u003e(false)\n\n  const onSubmitSearch = (val: string) =\u003e {\n    setQuery(val)\n  }\n\n  return (\n    \u003cReactNativeInputSearchBar\n      onSubmitSearch={onSubmitSearch}\n      onActiveSearch={setActiveSearch}\n      inputTextStyle={{}}\n      buttonStyle={{\n        paddingHorizontal: 20\n      }}\n      buttonTextStyle={{}}\n      searchToolContainerStyle={{ height: 40 }}\n      inputContainerStyle={{\n        backgroundColor: '#ffffff',\n        borderWidth: 0.3,\n        borderRadius: 20\n      }}\n      inputProps={{\n        placeholder: 'Please enter your search query'\n      }}\n      buttonText=\"Search\"\n    /\u003e\n  )\n}\n\nexport default SearchBar\n```\n## Props\n\n### Props for ReactNativeInputSearchBar\n\n| Prop                     | Type     | Default | Description                                          |\n| ------------------------ | -------- | ------- | ---------------------------------------------------- |\n| onSubmitSearch           | function |         | Callback function when the search button is pressed. |\n| onActiveSearch           | function |         | Callback function when the search bar is active.     |\n| inputTextStyle           | object   |         | Style for the input text.                            |\n| buttonStyle              | object   |         | Style for the search button.                         |\n| buttonTextStyle          | object   |         | Style for the search button text.                    |\n| searchToolContainerStyle | object   |         | Style for the search tool container.                 |\n| inputContainerStyle      | object   |         | Style for the input container.                       |\n| inputProps               | object   |         | Props for the input.                                 |\n| buttonText               | string   |         | Text for the search button.                          |\n| clearButton              | boolean  | true    | Whether to show the clear button.                    |\n| inputActiveColor         | string   |         | Color for the input when active.                     |\n| inputInactiveColor       | string   |         | Color for the input when inactive.                   |\n| iconStyle                | object   |         | Style for the search icon.                           |\n| customIcon               | element  |         | Custom icon for the search input icon.               |\n\n### TypeDefine for ReactNativeInputSearchBar\n\n```typescript\ninterface RNInputSearchBarProps {\n  searchToolContainerStyle?: StyleProp\u003cViewStyle\u003e\n  clearButton?: boolean\n  onActiveSearch: (val: boolean) =\u003e void\n  onSubmitSearch: (val: string) =\u003e void\n  inputActiveColor?: ColorValue\n  inputInactiveColor?: ColorValue\n  inputContainerStyle?: StyleProp\u003cViewStyle\u003e\n  inputTextStyle?: StyleProp\u003cTextStyle\u003e\n  inputProps?: TextInputProps\n  customIcon?: ReactNode\n  iconStyle?: StyleProp\u003cViewStyle\u003e\n  buttonStyle?: StyleProp\u003cViewStyle\u003e\n  buttonText?: string\n  buttonTextStyle?: StyleProp\u003cTextStyle\u003e\n}\n```\n\n## Reference\n\n- [React Native](https://facebook.github.io/react-native/) is a JavaScript framework for writing real, natively rendering mobile applications for iOS and Android.\n\n## Contribution\n\nIf you have any questions or suggestions, please feel free to open an issue or pull request.\n\n\u003ca href=\"https://github.com/funnyzak/react-native-input-search-bar/graphs/contributors\"\u003e\n  \u003cimg src=\"https://contrib.rocks/image?repo=funnyzak/react-native-input-search-bar\" /\u003e\n\u003c/a\u003e\n\n## License\n\nMIT License © 2022 [funnyzak](https://github.com/funnyzak)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffunnyzak%2Freact-native-input-search-bar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffunnyzak%2Freact-native-input-search-bar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffunnyzak%2Freact-native-input-search-bar/lists"}