{"id":18487375,"url":"https://github.com/harshq/react-native-mentions","last_synced_at":"2025-04-08T20:31:01.413Z","repository":{"id":15565230,"uuid":"78390631","full_name":"harshq/react-native-mentions","owner":"harshq","description":"Mentions textbox for React Native. Works on both ios and android. :whale: ","archived":false,"fork":false,"pushed_at":"2022-02-22T20:53:12.000Z","size":3585,"stargazers_count":307,"open_issues_count":25,"forks_count":81,"subscribers_count":10,"default_branch":"master","last_synced_at":"2024-04-14T12:33:48.584Z","etag":null,"topics":["android","autocomplete","hashtag","ios","mentions","react-native","react-native-component","textinput"],"latest_commit_sha":null,"homepage":"","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/harshq.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":"2017-01-09T03:32:10.000Z","updated_at":"2024-04-09T22:07:32.000Z","dependencies_parsed_at":"2022-08-07T08:01:13.780Z","dependency_job_id":null,"html_url":"https://github.com/harshq/react-native-mentions","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/harshq%2Freact-native-mentions","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/harshq%2Freact-native-mentions/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/harshq%2Freact-native-mentions/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/harshq%2Freact-native-mentions/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/harshq","download_url":"https://codeload.github.com/harshq/react-native-mentions/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247584111,"owners_count":20962075,"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","autocomplete","hashtag","ios","mentions","react-native","react-native-component","textinput"],"created_at":"2024-11-06T12:50:26.966Z","updated_at":"2025-04-08T20:31:00.536Z","avatar_url":"https://github.com/harshq.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# react-native-mentions [![npm version](https://badge.fury.io/js/react-native-mentions.svg)](https://badge.fury.io/js/react-native-mentions)\nMentions textbox for React Native. Works on both ios and android. \n\n## Demo\n\n![alt text](screens/screen1.gif \"Screenshots\")\n![alt text](screens/screen2.gif \"Screenshots\")\n\n## Installation\n\n```yarn add react-native-mentions```\nor\n```npm install --save react-native-mentions```\n\n## Usage\n\n```js\nimport MentionsTextInput from 'react-native-mentions';\n\n  \u003cMentionsTextInput\n    textInputStyle={{ borderColor: '#ebebeb', borderWidth: 1, padding: 5, fontSize: 15 }}\n    suggestionsPanelStyle={{ backgroundColor: 'rgba(100,100,100,0.1)' }}\n    loadingComponent={() =\u003e \u003cView style={{ flex: 1, width, justifyContent: 'center', alignItems: 'center' }}\u003e\u003cActivityIndicator /\u003e\u003c/View\u003e}\n    textInputMinHeight={30}\n    textInputMaxHeight={80}\n    trigger={'@'}\n    triggerLocation={'new-word-only'} // 'new-word-only', 'anywhere'\n    value={this.state.value}\n    onChangeText={(val) =\u003e { this.setState({ value: val }) }}\n    triggerCallback={this.callback.bind(this)}\n    renderSuggestionsRow={this.renderSuggestionsRow.bind(this)}\n    suggestionsData={this.state.data} // array of objects\n    keyExtractor={(item, index) =\u003e item.UserName} \n    suggestionRowHeight={45}\n          \n    horizontal={false} // default is true, change the orientation of the list\n    MaxVisibleRowCount={3} // this is required if horizontal={false}\n  /\u003e\n```\n\n## Example \n\nCheck full example in the `sampleApp` folder. \n\n## Breaking changes ( 0.0.4 -\u003e 1.1.1 )\n\n- This library now supports RN 0.47 and above due to [this](https://github.com/facebook/react-native/commit/bac84ce207a0466cec95626131063751eb48b964). If you're on a older version, use react-native-mentions 0.0.4. Check the example [here](https://github.com/harshq/react-native-mentions/tree/8f7156e35e2cdd9252cd518b3985eb2ddc613a54/sampleApp)\n\n- `SuggestionsDataSource` prop is renamed to `suggestionsData`. This now accepts a array of objects. DataSource, No more!\n\n- `SuggestionsPanelHeight` prop is renamed to `suggestionRowHeight` in order to support vertical lists. \n\n\n## License\n\n[MIT License](http://opensource.org/licenses/mit-license.html). © Harshana Abeyaratne\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fharshq%2Freact-native-mentions","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fharshq%2Freact-native-mentions","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fharshq%2Freact-native-mentions/lists"}