React Native Mention 🚀

Facebook like mention input. Thanks to react-native-parsed-text

Installation

npm install --save react-native-mention

yarn add react-native-mention

Usage

import MentionInput from 'react-native-mention';

render() {
  return (
    <View style={styles.mainContainer}>
      <MentionInput
        reference={comp => {
          this.inputField = comp
        }}
        placeholder="Post something of worth"
        onChangeText={this.onChangeText}
        mentionData={this.state.mentionSuggestions}
        mentioningChangeText={this.mentioningChangeText}
        renderMentionCell={({ item }) => {
          return <MentionCell name={item.name} image={item.avatar} />
        }}
        style={styles.inputField}
      />
    </View>
  )
}

Properties

| Prop | Type | Description | |---|---|---| |placeholder|String|Placeholder text.| |mentionData|Array(Object)|Array of object. Basically suggestions to be mentioned.| |onChangeText|function|On text change callback.| |mentioningChangeText|function|on mention text callback.| |renderMentionCell|Element|Element to show on mention suggestions.|

License

MIT