react-native-mentionable-textinput

ReactNative TextInput with enhanced capabilities for mentions


Installation

``sh
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

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

// ...

mentionsTypes={[
{
type: 'users',
mentionChar: '@',
},
{
type: 'channels',
mentionChar: '#',
},
]}
onSend={onSubmit}
searchMentionableItems={searchItems}
mentionableItems={itemsFound}
submitIcon={}
mentionIcon={}
closeIcon={}
maxHeightMentionWindow={200}
/>
``

$3

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