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