{"id":13475616,"url":"https://github.com/mjsolidarios/react-native-search-filter","last_synced_at":"2025-03-27T00:31:36.627Z","repository":{"id":23122064,"uuid":"97931110","full_name":"mjsolidarios/react-native-search-filter","owner":"mjsolidarios","description":"Modified version of react-search-input (https://github.com/enkidevs/react-search-input) to work with react-native.","archived":false,"fork":false,"pushed_at":"2023-11-27T01:00:11.000Z","size":2865,"stargazers_count":116,"open_issues_count":30,"forks_count":41,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-04-15T08:10:27.726Z","etag":null,"topics":["react","react-native","search"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/mjsolidarios.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-07-21T09:32:06.000Z","updated_at":"2024-06-18T16:39:43.741Z","dependencies_parsed_at":"2024-06-18T16:39:31.197Z","dependency_job_id":"2620dd89-3dee-4865-92d0-57a4ecb95aaf","html_url":"https://github.com/mjsolidarios/react-native-search-filter","commit_stats":{"total_commits":32,"total_committers":11,"mean_commits":2.909090909090909,"dds":0.59375,"last_synced_commit":"452f7640c9305bda93aadd62814ab244de40e879"},"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mjsolidarios%2Freact-native-search-filter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mjsolidarios%2Freact-native-search-filter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mjsolidarios%2Freact-native-search-filter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mjsolidarios%2Freact-native-search-filter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mjsolidarios","download_url":"https://codeload.github.com/mjsolidarios/react-native-search-filter/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245760755,"owners_count":20667887,"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","react-native","search"],"created_at":"2024-07-31T16:01:21.925Z","updated_at":"2025-03-27T00:31:36.334Z","avatar_url":"https://github.com/mjsolidarios.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"\n# React Native Search Filter\n\nReact Native search component with filter function.\n\n![](https://media.giphy.com/media/Y4h9UMnbvmUAHdZ0gy/giphy.gif)\n\n## Getting Started\n\n### Installation\n\nUsing `npm`:\n\n`$ npm install react-native-search-filter --save`\n\nUsing `yarn`:\n\n`$ yarn add react-native-search-filter`\n\n### Example Usage\nComplete example available [here](/example).\n\n```js\nimport React, { Component } from 'react';\nimport { StyleSheet, Text, View, ScrollView, TouchableOpacity } from 'react-native';\nimport SearchInput, { createFilter } from 'react-native-search-filter';\nimport emails from './emails';\nconst KEYS_TO_FILTERS = ['user.name', 'subject'];\n\nexport default class App extends Component\u003c{}\u003e {\n constructor(props) {\n    super(props);\n    this.state = {\n      searchTerm: ''\n    }\n  }\n  searchUpdated(term) {\n    this.setState({ searchTerm: term })\n  }\n  render() {\n    const filteredEmails = emails.filter(createFilter(this.state.searchTerm, KEYS_TO_FILTERS))\n    return (\n      \u003cView style={styles.container}\u003e\n        \u003cSearchInput \n          onChangeText={(term) =\u003e { this.searchUpdated(term) }} \n          style={styles.searchInput}\n          placeholder=\"Type a message to search\"\n          /\u003e\n        \u003cScrollView\u003e\n          {filteredEmails.map(email =\u003e {\n            return (\n              \u003cTouchableOpacity onPress={()=\u003ealert(email.user.name)} key={email.id} style={styles.emailItem}\u003e\n                \u003cView\u003e\n                  \u003cText\u003e{email.user.name}\u003c/Text\u003e\n                  \u003cText style={styles.emailSubject}\u003e{email.subject}\u003c/Text\u003e\n                \u003c/View\u003e\n              \u003c/TouchableOpacity\u003e\n            )\n          })}\n        \u003c/ScrollView\u003e\n      \u003c/View\u003e\n    );\n  }\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    backgroundColor: '#fff',\n    justifyContent: 'flex-start'\n  },\n  emailItem:{\n    borderBottomWidth: 0.5,\n    borderColor: 'rgba(0,0,0,0.3)',\n    padding: 10\n  },\n  emailSubject: {\n    color: 'rgba(0,0,0,0.5)'\n  },\n  searchInput:{\n    padding: 10,\n    borderColor: '#CCC',\n    borderWidth: 1\n  }\n});\n```\n\n## API and Configuration\n\n| Property | Type | Default | Description |\n|-------------|----------|--------------|----------------------------------------------------------------|\n|```caseSensitive```|```boolean```|```false```|Define if the search should be case sensitive.|\n|```clearIcon```|```Node```|```null```|Optional clear icon. |\n|```clearIconViewStyles```|```Style```|```{position:absolute',top: 18,right: 22}```|Optional styles for the clear icon view.|\n|```filterKeys```|```string``` or ```[string]```||Will be use by the filter method if no argument is passed there.|\n|```fuzzy```|```boolean```|```false```|Define if the search should be fuzzy.|\n|```inputViewStyles```| ```Style``` | |Optional styles for the input container. |\n| ```onChangeText``` | ```Function``` | Required| Function called when the search term is changed (will be passed as an argument).\n|```sortResults```|```boolean```|```false```|Define if search results should be sorted by relevance (only works with fuzzy search).|\n|```throttle```|```number```|```200```|Reduce call frequency to the onChange function (in ms).|\n|```onSubmitEditing```|```function```|```() =\u003e {}```|Defines a function for the keyboard search button onPress.|\n|```inputFocus```|```boolean```|```false```|Defines whether the field receives focus.|\n|```returnKeyType```|```string```|```done```|Determines how the return key should look. The following values work across platforms: ```done```, ```go```, ```next```, ```search```, ```send```|\n\n### Methods\n\n#### ```filter([keys])```\n\nReturn a function which can be used to filter an array. keys can be ```string```, ```[string]``` or ```null```.\n\nIf an array keys is an array, the function will return true if at least one of the keys of the item matches the search term.\n\n## Static Methods\n```js\nfilter(searchTerm, [keys], [{caseSensitive, fuzzy, sortResults}])\n```\n\nReturn a function which can be used to filter an array. searchTerm can be a regex or a String. keys can be ```string```, ```[string]``` or ```null```.\n\nIf an array keys is an array, the function will return true if at least one of the keys of the item matches the search term.\n\n## Known Issues\n### Hide ```clearIcon``` if search input is empty.\nProvided you have a custom icon package, a short toggle method for the property will do: ```clearIcon={this.state.searchTerm!==''\u0026\u0026\u003cIcon name=\"x\"/\u003e}```.\n### Fuse.js: Unknown plugin \"babel-plugin-add-module-exports\"\nAdd ```babel-plugin-add-module-exports``` as a dev dependency. Fuse.js [#154](https://github.com/krisk/Fuse/issues/154).\n\n```npm i babel-plugin-add-module-exports babel-preset-es2015 babel-preset-stage-2 --save-dev```\n\n## Acknowledgement\nenkidevs - [Simple react.js component for a search input, providing a filter function ](https://github.com/enkidevs/react-search-input).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmjsolidarios%2Freact-native-search-filter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmjsolidarios%2Freact-native-search-filter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmjsolidarios%2Freact-native-search-filter/lists"}