Emoji picker for react-native
Powered by the awesome emoji-datasource
Installation
npm install react-native-emoji-pickerEmojiPicker component
const EmojiPicker = require('react-native-emoji-picker'); class Main extends React.Component { _emojiSelected(emoji) { console.log(emoji) } render() { return ( <View style={styles.container}> <EmojiPicker style={styles.emojiPicker} onEmojiSelected={this._emojiSelected}/> </View> ); } } Component props
onEmojiSelected(Function) - Required. Called when the user taps on an emoji.style(Object) - Optional. Standard view style for the enclosing component.clearButtonText(String) - Optional. Alternate text for the clear button. Defaults to 'Clear'.hideClearButton(Bool) - Optional. Hide the clear button.rows(Number) - Optional. Number of rows used to show all emojis. Defaults to 7.
EmojiOverlay component
Optional overlay which wraps the picker in a modal-like component
const { EmojiOverlay } = require('react-native-emoji-picker'); class Main extends React.Component { state = { showPicker: false, } _emojiSelected(emoji) { this.setState({showPicker: false}) console.log(emoji) } render() { return ( <View style={styles.container}> <TouchableHighlight onPress={() => this.setState({showPicker: true})}> <Text> Show picker </Text> </TouchableHighlight> <EmojiOverlay style={styles.emojiPicker} visible={this.state.showPicker} onTapOutside={() => this.setState({showPicker: false})} horizontal={true} onEmojiSelected={this._emojiSelected}/> </View> ); } } Component props
- (...all EmojiPicker props)
visible(Bool) - Required. Is the overlay visibleonTapOutside(Function) - Required. Callback for when user taps outside the EmojiPicker area. Should setvisibletofalse
