react-native-mentionable-textinput

ReactNative TextInput with enhanced capabilities for mentions

Installation

npm install react-native-mentionable-textinput
npm install react-native-device-info # Needed to fix a well-known textinput bug on Xiaomi family devices
cd ios; pod install ## Needed to link react-native-device-info

Usage

import { TextInputMention } from "react-native-mentionable-textinput";

// ...

<TextInputMention
    mentionsTypes={[
      {
        type: 'users',
        mentionChar: '@',
      },
      {
        type: 'channels',
        mentionChar: '#',
      },
    ]}
    onSend={onSubmit}
    searchMentionableItems={searchItems}
    mentionableItems={itemsFound}
    submitIcon={<Image style={iconStyle} source={{ uri: send }} />}
    mentionIcon={<Image style={iconStyle} source={{ uri: email }} />}
    closeIcon={<Image style={iconStyle} source={{ uri: close }} />}
    maxHeightMentionWindow={200}
  />

Component props

Name	Type	Mandatory	Additional info
mentionsTypes	Array	✔️	Type of objects that can be mentioned
initialText	string	❌	Initial text of the text input
placeholder	string	❌	Text input placeholder
initialMentioned	Array	❌	Every mention is contained in this array. Fill it with inital mention elements
isMentionsDisabled	boolean	❌	False if text input should not have mentions
isSendButtonDisabled	boolean	❌	True if text input submit button is disable.
isSmartSearchEnabled	boolean	❌	True if smart search should be enabled
children	Array<JSX.Element>	❌	Optional view that will be attached above text input
mentionableItems	Array	✔️	List of visible items that can be mentioned
searchMentionableItems	(mentionType: string, searchText: string) => void	✔️	Search callback to filter mentionable items
onChangeText	(text: string, mentioned: Array) => void	❌	Callback passed to text input
onMentionClose	() => void	❌	Callback when the list of mentionable items is closed
onSend	(text: string, mentioned: Array)	✔️	Called on submit
onEndTyping	() => void	❌	Callback passed to text input
textStyle	StyleProp	❌	Style of text, excluded mentions
mentionStyle	StyleProp	❌	Style of mentions, included mention character
mentionContainerStyle	StyleProp	❌	Style of mentions container view
textInputContainerStyle	StyleProp	❌	Style of text input container
separatorColor	string	❌	Color of the separator between text input and mention window
submitIcon	JSX.Element	✔️	Icon for on submit action
mentionIcon	JSX.Element	✔️	Icon for mention
closeIcon	JSX.Element	✔️	Icon for close
textInputProps	TextInputProps	❌	Props for native TextInput
keyboardAvoidingViewProps	KeyboardAvoidingViewProps	❌	Props for native KeyboardAvoidingView
maxHeightMentionWindow	number	✔️	Max height of mentions container view
renderMentionType	(mentionType: string) => JSX.Element	❌	Custom render of mentionable items

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT