https://github.com/harshq/react-native-mentions

Mentions textbox for React Native. Works on both ios and android. :whale:
https://github.com/harshq/react-native-mentions

android autocomplete hashtag ios mentions react-native react-native-component textinput

Last synced: 7 days ago
JSON representation

Mentions textbox for React Native. Works on both ios and android. :whale:

• Host: GitHub
• URL: https://github.com/harshq/react-native-mentions
• Owner: harshq
• License: mit
• Created: 2017-01-09T03:32:10.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2022-02-22T20:53:12.000Z (over 2 years ago)
• Last Synced: 2024-04-14T12:33:48.584Z (7 months ago)
• Topics: android, autocomplete, hashtag, ios, mentions, react-native, react-native-component, textinput
• Language: JavaScript
• Homepage:
• Size: 3.42 MB
• Stars: 307
• Watchers: 10
• Forks: 81
• Open Issues: 25
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-native-mentions [![npm version](https://badge.fury.io/js/react-native-mentions.svg)](https://badge.fury.io/js/react-native-mentions)

Mentions textbox for React Native. Works on both ios and android. 

## Demo

![alt text](screens/screen1.gif "Screenshots")

![alt text](screens/screen2.gif "Screenshots")

## Installation

```yarn add react-native-mentions```

or

```npm install --save react-native-mentions```

## Usage

```js

import MentionsTextInput from 'react-native-mentions';

   }

    textInputMinHeight={30}

    textInputMaxHeight={80}

    trigger={'@'}

    triggerLocation={'new-word-only'} // 'new-word-only', 'anywhere'

    value={this.state.value}

    onChangeText={(val) => { this.setState({ value: val }) }}

    triggerCallback={this.callback.bind(this)}

    renderSuggestionsRow={this.renderSuggestionsRow.bind(this)}

    suggestionsData={this.state.data} // array of objects

    keyExtractor={(item, index) => item.UserName} 

    suggestionRowHeight={45}

          

    horizontal={false} // default is true, change the orientation of the list

    MaxVisibleRowCount={3} // this is required if horizontal={false}

  />

```

## Example 

Check full example in the `sampleApp` folder. 

## Breaking changes ( 0.0.4 -> 1.1.1 )

- 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)

- `SuggestionsDataSource` prop is renamed to `suggestionsData`. This now accepts a array of objects. DataSource, No more!

- `SuggestionsPanelHeight` prop is renamed to `suggestionRowHeight` in order to support vertical lists. 

## License

[MIT License](http://opensource.org/licenses/mit-license.html). © Harshana Abeyaratne