Skip to content
This repository has been archived by the owner on Oct 8, 2024. It is now read-only.

Mentions textbox for React Native. Works on both ios and android. 🐳

License

Notifications You must be signed in to change notification settings

harshq/react-native-mentions

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

38 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react-native-mentions npm version

Mentions textbox for React Native. Works on both ios and android.

Demo

alt text alt text

Installation

yarn add react-native-mentions or npm install --save react-native-mentions

Usage

import MentionsTextInput from 'react-native-mentions';

  <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={this.state.value}
    onChangeText={(val) => { this.setState({ value: val }) }}
    triggerCallback={this.callback.bind(this)}
    renderSuggestionsRow={this.renderSuggestionsRow.bind(this)}
    suggestionsData={this.state.data} // array of objects
    keyExtractor={(item, index) => item.UserName} 
    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 to suggestionsData. This now accepts a array of objects. DataSource, No more!

  • SuggestionsPanelHeight prop is renamed to suggestionRowHeight in order to support vertical lists.

License

MIT License. © Harshana Abeyaratne

Releases

No releases published

Packages

No packages published