{"id":42633357,"url":"https://github.com/timelessco/react-native-search-component","last_synced_at":"2026-01-29T05:26:34.549Z","repository":{"id":41946387,"uuid":"280846865","full_name":"timelessco/react-native-search-component","owner":"timelessco","description":"🎉 React Native Search Bar 🕵🏽‍♂️ inspired by iOS UISearchBar with Dark Mode 🌚","archived":false,"fork":false,"pushed_at":"2023-12-15T20:09:14.000Z","size":3226,"stargazers_count":81,"open_issues_count":5,"forks_count":12,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-09-29T00:58:28.319Z","etag":null,"topics":["react-native","react-native-search","reanimated"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-native-search-component","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/timelessco.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2020-07-19T10:59:03.000Z","updated_at":"2025-09-06T18:41:44.000Z","dependencies_parsed_at":"2024-06-21T17:53:05.483Z","dependency_job_id":"a79e843e-d596-4a9a-ae97-c859b4dd0f0b","html_url":"https://github.com/timelessco/react-native-search-component","commit_stats":{"total_commits":85,"total_committers":4,"mean_commits":21.25,"dds":0.388235294117647,"last_synced_commit":"a4e9b3d65a6fd4ed63ae687fa2a6f873c3f08298"},"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"purl":"pkg:github/timelessco/react-native-search-component","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/timelessco%2Freact-native-search-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/timelessco%2Freact-native-search-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/timelessco%2Freact-native-search-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/timelessco%2Freact-native-search-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/timelessco","download_url":"https://codeload.github.com/timelessco/react-native-search-component/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/timelessco%2Freact-native-search-component/sbom","scorecard":{"id":885825,"data":{"date":"2025-08-11","repo":{"name":"github.com/timelessco/react-native-search-component","commit":"a4e9b3d65a6fd4ed63ae687fa2a6f873c3f08298"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":1.7,"checks":[{"name":"Code-Review","score":1,"reason":"Found 3/17 approved changesets -- score normalized to 1","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Binary-Artifacts","score":9,"reason":"binaries present in source code","details":["Warn: binary detected: example/RNSearch/android/gradle/wrapper/gradle-wrapper.jar:1"],"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 17 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":0,"reason":"65 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92","Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw","Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c","Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq","Warn: Project is vulnerable to: GHSA-fjxv-7rqg-78g4","Warn: Project is vulnerable to: GHSA-ww39-953v-wcq6","Warn: Project is vulnerable to: GHSA-f5x2-xv93-4p23","Warn: Project is vulnerable to: GHSA-gmpm-xp43-f7g6","Warn: Project is vulnerable to: GHSA-pf27-929j-9pmm","Warn: Project is vulnerable to: GHSA-327c-qx3v-h673","Warn: Project is vulnerable to: GHSA-x4cf-6jr3-3qvp","Warn: Project is vulnerable to: GHSA-mph8-6787-r8hw","Warn: Project is vulnerable to: GHSA-7mhc-prgv-r3q4","Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj","Warn: Project is vulnerable to: GHSA-896r-f27r-55mw","Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h","Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9","Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3","Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h","Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g","Warn: Project is vulnerable to: GHSA-w7rc-rwvf-8q5r","Warn: Project is vulnerable to: GHSA-5fw9-fq32-wv5p","Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr","Warn: Project is vulnerable to: GHSA-76c9-3jph-rj3q","Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9","Warn: Project is vulnerable to: GHSA-4cpg-3vgw-4877","Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp","Warn: Project is vulnerable to: GHSA-rxrc-rgv4-jpvx","Warn: Project is vulnerable to: GHSA-7f53-fmmv-mfjv","Warn: Project is vulnerable to: GHSA-2j79-8pqc-r7x6","Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg","Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p","Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7","Warn: Project is vulnerable to: GHSA-gff7-g5r8-mg8m","Warn: Project is vulnerable to: GHSA-52f5-9888-hmc6","Warn: Project is vulnerable to: GHSA-jgrx-mgxx-jf9v","Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3","Warn: Project is vulnerable to: GHSA-662x-fhqg-9p8v","Warn: Project is vulnerable to: GHSA-394c-5j6w-4xmx","Warn: Project is vulnerable to: GHSA-78cj-fxph-m83p","Warn: Project is vulnerable to: GHSA-fhg7-m89q-25r3","Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7","Warn: Project is vulnerable to: GHSA-6fc8-4gx4-v693","Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q","Warn: Project is vulnerable to: GHSA-h6q6-9hqw-rwfv","Warn: Project is vulnerable to: GHSA-5fg8-2547-mr8q","Warn: Project is vulnerable to: GHSA-crh6-fp67-6883","Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh","Warn: Project is vulnerable to: GHSA-ff7x-qrg7-qggm","Warn: Project is vulnerable to: GHSA-765h-qjxv-5f44","Warn: Project is vulnerable to: GHSA-f2jv-r9rf-7988","Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37","Warn: Project is vulnerable to: GHSA-4rq4-32rv-6wp6","Warn: Project is vulnerable to: GHSA-64g7-mvw6-v9qj","Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v","Warn: Project is vulnerable to: GHSA-38fc-wpqx-33j7"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-24T09:59:38.405Z","repository_id":41946387,"created_at":"2025-08-24T09:59:38.405Z","updated_at":"2025-08-24T09:59:38.405Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28863564,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-28T22:56:21.783Z","status":"online","status_checked_at":"2026-01-29T02:00:06.714Z","response_time":59,"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":["react-native","react-native-search","reanimated"],"created_at":"2026-01-29T05:26:33.893Z","updated_at":"2026-01-29T05:26:34.541Z","avatar_url":"https://github.com/timelessco.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align='center'\u003e\n  \n  ![npm](https://badgen.net/badge/license/MIT/blue)\n  [![npm](https://badgen.net/npm/dt/react-native-search-component)](https://www.npmjs.com/package/react-native-search-component)\n  [![npm](https://badgen.net/npm/v/react-native-search-component)](https://www.npmjs.com/package/react-native-search-component)\n  [![](https://badgen.net/npm/types/tslib)](https://badgen.net/npm/types/tslib)\n  \n  \u003ch1\u003eReact Native Search Component\u003c/h1\u003e\n  \n  \u003cimg width=\"auto\" height=\"550\" src=\"./example/RNSearch/assets/ioslight.gif\"\u003e\n\n  \u003cimg width=\"auto\" height=\"550\" src=\"./example/RNSearch/assets/iosdark.gif\"\u003e\n\n  \u003cimg width=\"auto\" height=\"550\" src=\"./example/RNSearch/assets/android.gif\"\u003e\n  \n\u003c/div\u003e\n\n## :anchor: Installation\n\n```sh\n\nyarn add react-native-search-component\n# or\nnpm i react-native-search-component\n\n```\n\n## :family: Dependencies\n\n##### React Native Reanimated\n\n```sh\nnpm install react-native-reanimated\n```\n\nFor iOS\n\n```sh\n\ncd ios \u0026\u0026 pod install \u0026\u0026 cd ..\n\n```\n\nFor Android\n\n1. Turn on Hermes engine by editing android/app/build.gradle\n\n```code\n\nproject.ext.react = [\n  enableHermes: true  // \u003c- here | clean and rebuild if changing\n]\n\n```\n\n2. Plug Reanimated in MainApplication.java\n\n```code\n  import com.facebook.react.bridge.JSIModulePackage; // \u003c- add\n  import com.swmansion.reanimated.ReanimatedJSIModulePackage; // \u003c- add\n  ...\n  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {\n  ...\n\n      @Override\n      protected String getJSMainModuleName() {\n        return \"index\";\n      }\n\n      @Override\n      protected JSIModulePackage getJSIModulePackage() {\n        return new ReanimatedJSIModulePackage(); // \u003c- add\n      }\n    };\n  ...\n```\n\n\u003e For detailed instructions check it out [here](https://docs.swmansion.com/react-native-reanimated/docs/next/installation)\n\n##### React Native SVG\n\n```sh\n\nnpm install react-native-svg\n\n```\n\nFor iOS\n\n```sh\ncd ios \u0026\u0026 pod install \u0026\u0026 cd ..\n```\n\n\u003e For detailed instructions check it out [here](https://github.com/react-native-community/react-native-svg)\n\n\u003e Rebuild the project after adding the dependencies\n\n## :mag: Usage\n\n```js\nimport React, { useState } from \"react\";\nimport { SafeAreaView, StyleSheet, Text, TouchableOpacity } from \"react-native\";\nimport SearchComponent from \"react-native-search-component\";\n\nconst App = () =\u003e {\n  const [theme, setTheme] = React.useState(\"LIGHT\");\n  const [searchTerm, setSearchTerm] = useState(\"\");\n\n  const toggleTheme = () =\u003e\n    theme === \"LIGHT\" ? setTheme(\"DARK\") : setTheme(\"LIGHT\");\n  const themeBasedContainer = [\n    styles.container,\n    { backgroundColor: theme === \"LIGHT\" ? \"white\" : \"black\" },\n  ];\n  const themeBasedTextStyle = [\n    styles.textStyle,\n    { color: theme === \"LIGHT\" ? \"black\" : \"white\" },\n  ];\n\n  const onChange = (e) =\u003e {\n    setSearchTerm(e?.nativeEvent?.text);\n  };\n  const onSearchClear = () =\u003e setSearchTerm(\"\");\n\n  return (\n    \u003cSafeAreaView style={themeBasedContainer}\u003e\n      \u003cText style={themeBasedTextStyle}\u003eReact Native Search Component\u003c/Text\u003e\n      \u003cTouchableOpacity style={{ paddingVertical: 12 }} onPress={toggleTheme}\u003e\n        \u003cText style={[styles.textStyle, { color: \"#007AFF\", fontSize: 18 }]}\u003e\n          Toggle Theme\n        \u003c/Text\u003e\n      \u003c/TouchableOpacity\u003e\n      \u003cSearchComponent\n        value={searchTerm}\n        theme={theme}\n        onChange={onChange}\n        onSearchClear={onSearchClear}\n      /\u003e\n      \u003cText\n        style={[\n          themeBasedTextStyle,\n          { textAlign: \"left\", paddingLeft: 16, fontSize: 18 },\n        ]}\n      \u003e\n        {\" \"}\n        Search Term : {searchTerm}\n      \u003c/Text\u003e\n    \u003c/SafeAreaView\u003e\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    justifyContent: \"center\",\n  },\n  textStyle: {\n    fontSize: 24,\n    textAlign: \"center\",\n    paddingVertical: 10,\n  },\n});\n\nexport default App;\n```\n\n## :camera: Screenshot\n\n\u003cdiv\u003e\n  \n\u003cimg src=\"./example/RNSearch/assets/screenshot.png\"\u003e\n  \n\u003c/div\u003e\n\n## :wrench: Props\n\n| Name                   | Description                                                | Required | Type                 | Default        |\n| --------------------   | ------------------------------------------------           | -------- | -------------------- | -------------- |\n| value                  | A search term Value                                        | Yes      | String               | ''             |\n| placeholder            | A placeholder value                                        | No       | String               | ''             |\n| placeholderTextColor   | Tintcolor for Placeholder                                  | No       | Color                | Based on theme |\n| onChange               | A Callback function returning TextInput onChange           | Yes      | Function             | () =\u003e {}       |\n| onSearchClear          | A Callback function on Close Icon click                    | No       | Function             | () =\u003e {}       |\n| theme                  | App Theme                                                  | NO       | oneOf['LIGHT','DARK] | 'LIGHT'        |\n| isLoading              | Loading state Indicator on search                          | NO       | Boolean              | false          |\n| loadingTintColor       | The tint color of spinner                                  | NO       | Color                | '#636366'      |\n| cancelColor            | The tint color of 'Cancel' text                            | NO       | Color                | '#007AFF'      |\n| customSearchInputStyle | The styles, that will rewrite default searchInputStyle     | NO       | Object               | [Check here](https://github.com/timelessco/react-native-search-component#wrench-style-objects)       |\n| customCancelTextStyle  | The styles, that will rewrite default \"cancel\" text Style  | NO       | Object               |   [Check here](https://github.com/timelessco/react-native-search-component#wrench-style-objects)               |\n\n## :wrench: Style Objects\n\n```\ndefault value of Custome Search Input\n{\n  fontSize: 18,\n  fontWeight: '400',\n  lineHeight: 22,\n  letterSpacing: 0.5,\n  paddingHorizontal: 12,\n  paddingVertical: 10,\n  borderRadius: 12,\n  paddingLeft: 32\n}\n\ndefault value of Custom Cancel Text Style\n{\n  paddingLeft: 16,\n  fontSize: 17,\n  color: props.cancelColor\n}\n```\n\n## :wrench: Methods\n\n```\n.searchInputRef()\n```\nReturns searchTextInput ref. Useful for directly control search input.\n\nExample:\n```js\nimport { useEffect, useRef } from 'react';\n\n[...]\n\nconst searchInput = useRef();\n\n[...]\n\nconst toggleFocus = () =\u003e {\n  const isFocused = searchInput.current.searchInputRef().isFocused();\n  if (isFocused) {\n    searchInput.current.searchInputRef().blur();\n  } else {\n    searchInput.current.searchInputRef().focus();\n  }\n};\n\n\u003cSearchComponent\n  value={searchTerm}\n  theme={theme}\n  onChange={onChange}\n  onSearchClear={onSearchClear}\n  ref={searchInput}\n/\u003e\n```\n\n## :tada: Example\n\nCheckout the example [here](https://github.com/timelessco/react-native-search-component/tree/master/example/RNSearch).\n\n## :notebook: Blog\n\nCheckout my blog [here](https://medium.com/timeless/react-native-search-component-de0be89df6e1).\n\n## :snowman: Built with ❤️ and\n\n- [react-native](https://www.npmjs.com/package/react-native)\n- [react-native-reanimated](https://docs.swmansion.com/react-native-reanimated/)\n- [react-native-svg](https://github.com/react-native-community/react-native-svg)\n\n## :v: Contributing\n\nPull requests are always welcome! Feel free to open a new GitHub issue for any changes that can be made.\n\n## :man: Author\n\n[Karthik B](https://twitter.com/_iam_karthik)\n\n## :clipboard: License\n\nMIT\n\n\u003cdiv align=\"center\"\u003e\n\u003csub\u003e\u003csup\u003eProject by \u003ca href=\"https://github.com/timelessco\"\u003e @Timeless\u003c/a\u003e\u003c/sup\u003e\u003c/sub\u003e\u003csmall\u003e ✌\u003c/small\u003e\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftimelessco%2Freact-native-search-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftimelessco%2Freact-native-search-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftimelessco%2Freact-native-search-component/lists"}