react-native-mentions
Mentions textbox for React Native. Works on both ios and android.
Demo
Installation
yarn add react-native-mentions
or
npm install --save react-native-mentions
Usage
; <MentionsTextInput textInputStyle= borderColor: '#ebebeb' borderWidth: 1 padding: 5 fontSize: 15 suggestionsPanelStyle= backgroundColor: 'rgba(100,100,100,0.1)' loadingComponent= <View style= flex: 1 width justifyContent: 'center' alignItems: 'center' ><ActivityIndicator /></View> textInputMinHeight=30 textInputMaxHeight=80 trigger='@' triggerLocation='new-word-only' // 'new-word-only', 'anywhere' value=thisstatevalue onChangeText= { this } triggerCallback=thiscallback renderSuggestionsRow=thisrenderSuggestionsRow suggestionsData=thisstatedata // array of objects keyExtractor= itemUserName suggestionRowHeight=45 horizontal=false // default is true, change the orientation of the list MaxVisibleRowCount=3 // this is required if horizontal={false} />
Example
Check full example in the sampleApp
folder.
Breaking changes ( 0.0.4 -> 1.1.1 )
-
This library now supports RN 0.47 and above due to this. If you're on a older version, use react-native-mentions 0.0.4. Check the example here
-
SuggestionsDataSource
prop is renamed tosuggestionsData
. This now accepts a array of objects. DataSource, No more! -
SuggestionsPanelHeight
prop is renamed tosuggestionRowHeight
in order to support vertical lists.
License
MIT License. © Harshana Abeyaratne