{"id":4091,"url":"https://github.com/nulrich/RCTAutoComplete","last_synced_at":"2025-08-04T00:31:28.502Z","repository":{"id":34219476,"uuid":"38078490","full_name":"nulrich/RCTAutoComplete","owner":"nulrich","description":"React Native Component for MLPAutoCompleteTextField","archived":false,"fork":false,"pushed_at":"2017-12-02T10:13:46.000Z","size":261,"stargazers_count":171,"open_issues_count":20,"forks_count":26,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-04-25T00:51:48.282Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/nulrich.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}},"created_at":"2015-06-25T22:49:47.000Z","updated_at":"2024-04-25T00:51:48.283Z","dependencies_parsed_at":"2022-09-14T18:50:49.280Z","dependency_job_id":null,"html_url":"https://github.com/nulrich/RCTAutoComplete","commit_stats":null,"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nulrich%2FRCTAutoComplete","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nulrich%2FRCTAutoComplete/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nulrich%2FRCTAutoComplete/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nulrich%2FRCTAutoComplete/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nulrich","download_url":"https://codeload.github.com/nulrich/RCTAutoComplete/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228576895,"owners_count":17939645,"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:17:00.768Z","updated_at":"2024-12-07T07:31:07.154Z","avatar_url":"https://github.com/nulrich.png","language":"Objective-C","readme":"# react-native-autocomplete\n\n[MLPAutoCompleteTextField](https://github.com/EddyBorja/MLPAutoCompleteTextField)\n(iOS only) wrapper for React Native, supports React Native custom cells 🎨.\n\n![Demo gif](https://raw.githubusercontent.com/nulrich/RCTAutoComplete/master/demo.gif)\n\n## Installation\n\n* `$ npm install react-native-autocomplete`\n* Right click on Libraries, select **Add files to \"…\"** and select\n  `node_modules/react-native-autocomplete/RCTAutoComplete.xcodeproj`\n* Select your project and under **Build Phases** -\u003e **Link Binary With\n  Libraries**, press the + and select `libRCTAutoComplete.a`.\n\n[Facebook documentation](https://facebook.github.io/react-native/docs/linking-libraries.html#content)\n\n## Usage\n\nFor example download\n[Country list](https://gist.githubusercontent.com/Keeguon/2310008/raw/865a58f59b9db2157413e7d3d949914dbf5a237d/countries.json)\n\n```js\nimport React, { Component } from \"react\";\nimport { AppRegistry, StyleSheet, Text, View, AlertIOS } from \"react-native\";\n\nimport AutoComplete from \"react-native-autocomplete\";\nimport Countries from \"./countries.json\";\n\nconst styles = StyleSheet.create({\n  autocomplete: {\n    alignSelf: \"stretch\",\n    height: 50,\n    margin: 10,\n    marginTop: 50,\n    backgroundColor: \"#FFF\",\n    borderColor: \"lightblue\",\n    borderWidth: 1\n  },\n  container: {\n    flex: 1,\n    backgroundColor: \"#F5FCFF\"\n  }\n});\n\nclass RCTAutoCompleteApp extends Component {\n  state = { data: [] };\n\n  constructor(props) {\n    super(props);\n    this.onTyping = this.onTyping.bind(this);\n  }\n\n  onTyping(text) {\n    const countries = Countries.filter(country =\u003e\n      country.name.toLowerCase().startsWith(text.toLowerCase())\n    ).map(country =\u003e country.name);\n\n    this.setState({ data: countries });\n  }\n\n  onSelect(value) {\n    AlertIOS.alert(\"You choosed\", value);\n  }\n\n  render() {\n    return (\n      \u003cView style={styles.container}\u003e\n        \u003cAutoComplete\n          style={styles.autocomplete}\n          suggestions={this.state.data}\n          onTyping={this.onTyping}\n          onSelect={this.onSelect}\n          placeholder=\"Search for a country\"\n          clearButtonMode=\"always\"\n          returnKeyType=\"go\"\n          textAlign=\"center\"\n          clearTextOnFocus\n          autoCompleteTableTopOffset={10}\n          autoCompleteTableLeftOffset={20}\n          autoCompleteTableSizeOffset={-40}\n          autoCompleteTableBorderColor=\"lightblue\"\n          autoCompleteTableBackgroundColor=\"azure\"\n          autoCompleteTableCornerRadius={8}\n          autoCompleteTableBorderWidth={1}\n          autoCompleteFontSize={15}\n          autoCompleteRegularFontName=\"Helvetica Neue\"\n          autoCompleteBoldFontName=\"Helvetica Bold\"\n          autoCompleteTableCellTextColor={\"dimgray\"}\n          autoCompleteRowHeight={40}\n          autoCompleteFetchRequestDelay={100}\n          maximumNumberOfAutoCompleteRows={6}\n        /\u003e\n      \u003c/View\u003e\n    );\n  }\n}\n\nAppRegistry.registerComponent(\"RCTAutoCompleteApp\", () =\u003e RCTAutoCompleteApp);\n```\n\n# Custom Cell\n\nYou can use a React Native component to render the cells.\n\n```js\nimport React, { Component } from \"react\";\nimport {\n  AppRegistry,\n  StyleSheet,\n  Text,\n  View,\n  Image,\n  AlertIOS\n} from \"react-native\";\n\nimport AutoComplete from \"react-native-autocomplete\";\nimport Countries from \"./countries.json\";\n\nconst flag = code =\u003e\n  `https://raw.githubusercontent.com/hjnilsson/country-flags/master/png250px/${\n    code\n  }.png`;\n\nconst styles = StyleSheet.create({\n  autocomplete: {\n    alignSelf: \"stretch\",\n    height: 50,\n    margin: 10,\n    marginTop: 50,\n    backgroundColor: \"#FFF\",\n    borderColor: \"lightblue\",\n    borderWidth: 1\n  },\n  cell: {\n    flex: 1,\n    borderWidth: 1,\n    borderColor: \"lightblue\",\n    flexDirection: \"row\",\n    justifyContent: \"center\",\n    alignItems: \"center\"\n  },\n  cellText: {\n    flex: 1,\n    marginLeft: 10\n  },\n  image: {\n    width: 20,\n    height: 20,\n    marginLeft: 10\n  },\n  container: {\n    flex: 1,\n    backgroundColor: \"#F5FCFF\"\n  }\n});\n\nconst CustomCell = ({ data }) =\u003e (\n  \u003cView style={styles.cell}\u003e\n    \u003cImage source={{ uri: flag(data.code) }} style={styles.image} /\u003e\n    \u003cText style={styles.cellText}\u003e{data.country}\u003c/Text\u003e\n  \u003c/View\u003e\n);\n\nclass RCTAutoCompleteApp extends Component {\n  state = { data: [] };\n\n  constructor(props) {\n    super(props);\n    this.onTyping = this.onTyping.bind(this);\n  }\n\n  onTyping(text) {\n    const countries = Countries.filter(country =\u003e\n      country.name.toLowerCase().startsWith(text.toLowerCase())\n    ).map(country =\u003e {\n      return { country: country.name, code: country.code.toLowerCase() };\n    });\n\n    this.setState({ data: countries });\n  }\n\n  onSelect(json) {\n    AlertIOS.alert(\"You choosed\", json.country);\n  }\n\n  render() {\n    return (\n      \u003cView style={styles.container}\u003e\n        \u003cAutoComplete\n          style={styles.autocomplete}\n          cellComponent=\"CustomCell\"\n          suggestions={this.state.data}\n          onTyping={this.onTyping}\n          onSelect={this.onSelect}\n          placeholder=\"Search for a country\"\n          clearButtonMode=\"always\"\n          returnKeyType=\"go\"\n          textAlign=\"center\"\n          clearTextOnFocus\n          autoCompleteTableTopOffset={10}\n          autoCompleteTableLeftOffset={20}\n          autoCompleteTableSizeOffset={-40}\n          autoCompleteTableBorderColor=\"lightblue\"\n          autoCompleteTableBackgroundColor=\"azure\"\n          autoCompleteTableCornerRadius={8}\n          autoCompleteTableBorderWidth={1}\n          autoCompleteRowHeight={40}\n          autoCompleteFetchRequestDelay={100}\n          maximumNumberOfAutoCompleteRows={6}\n        /\u003e\n      \u003c/View\u003e\n    );\n  }\n}\n\nAppRegistry.registerComponent(\"CustomCell\", () =\u003e CustomCell);\nAppRegistry.registerComponent(\"RCTAutoCompleteApp\", () =\u003e RCTAutoCompleteApp);\n```\n\n## Events\n\n| event    | Info                                                                                      |\n| -------- | ----------------------------------------------------------------------------------------- |\n| onTyping | Text is entered. The callback can be delayed with option `autoCompleteFetchRequestDelay`. |\n| onSelect | A cell in the suggestions list is selected.                                               |\n| onFocus  | Text input get focus.                                                                     |\n| onBlur   | Text input lost focus.                                                                    |\n\n\u003e \u003e Other events from Text Input are avalaible.\n\n## Global options\n\n| option                                             | type   | Info                                                                                                                                                                                                                              |\n| -------------------------------------------------- | ------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| cellComponent                                      | string | Name of a React Native component used to render cells. If `null`, use the default rendering.                                                                                                                                      |\n| suggestions                                        | array  | If using default cell rendering specify an Array of string, otherwise any object.                                                                                                                                                 |\n| autoCompleteFetchRequestDelay                      | number | Delay in milliseconds before retrieving suggestions.                                                                                                                                                                              |\n| maximumNumberOfAutoCompleteRows                    | number | Number of suggestions displayed.                                                                                                                                                                                                  |\n| showTextFieldDropShadowWhenAutoCompleteTableIsOpen | bool   | Display a drop shadow around the text field.                                                                                                                                                                                      |\n| autoCompleteTableViewHidden                        | bool   | If true, the suggestions list will be hidden.                                                                                                                                                                                     |\n| autoCompleteTableBorderColor                       | color  | Set suggestions list border color.                                                                                                                                                                                                |\n| autoCompleteTableBorderWidth                       | number | Set suggestions list border color.                                                                                                                                                                                                |\n| autoCompleteTableBackgroundColor                   | color  | Set suggestions list border size.                                                                                                                                                                                                 |\n| autoCompleteTableCornerRadius                      | number | Set suggestions list background color.                                                                                                                                                                                            |\n| autoCompleteTableTopOffset                         | number | Set the distance between the text field and the suggestions list.                                                                                                                                                                 |\n| autoCompleteTableLeftOffset                        | number | Set the left offset between the container and the suggestions list.                                                                                                                                                               |\n| autoCompleteTableSizeOffset                        | number | Set the offset of the suggestions list size. Combined with autoCompleteTableLeftOffset, you can reduce the width of the suggestions list and to center it. Exemple: autoCompleteTableLeftOffset=20 autoCompleteTableSizeOffset=40 |\n| autoCompleteRowHeight                              | number | Height of cells in the suggestions list.                                                                                                                                                                                          |\n\n## Default cell rendering options\n\n| option                                   | type   | Info                                              |\n| ---------------------------------------- | ------ | ------------------------------------------------- |\n| autoCompleteFontSize                     | number | Font Size used to display text.                   |\n| autoCompleteRegularFontName              | string | Font used to display text.                        |\n| autoCompleteBoldFontName                 | string | Font used to display suggestion text.             |\n| autoCompleteTableCellTextColor           | color  | Text Color used to display text.                  |\n| autoCompleteTableCellBackgroundColor     | color  | Background color of cells.                        |\n| applyBoldEffectToAutoCompleteSuggestions | bool   | If false, disable bold effect on suggestion text. |\n| reverseAutoCompleteSuggestionsBoldEffect | bool   | Reverse the bold effect.                          |\n\n## License\n\nMIT © Nicolas Ulrich 2017\n","funding_links":[],"categories":["Components","\u003ca name=\"UI:-Native-Modules\"\u003eUI: Native Modules\u003c/a\u003e","Others"],"sub_categories":["UI"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnulrich%2FRCTAutoComplete","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnulrich%2FRCTAutoComplete","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnulrich%2FRCTAutoComplete/lists"}