react-native-mention

Facebook like name mentions

Usage no npm install needed!

<script type="module">
  import reactNativeMention from 'https://cdn.skypack.dev/react-native-mention';
</script>

README

React Native Mention 🚀

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

Demo

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