1.2.0 • Published 2 years ago
react-native-mentionable-textinput v1.2.0
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-infoUsage
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