UNPKG

react-native-emoji-picker

Version:
83 lines (65 loc) 2.09 kB
## Emoji picker for react-native Powered by the awesome `emojilib` ![AnimatedExample](animated-example.gif) ### Installation ```bash npm install react-native-emoji-picker ``` ### EmojiPicker component ```javascript 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 ```javascript 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} onTapOutsize={() => this.setState({showPicker: false})} horizontal={true} onEmojiSelected={this._emojiSelected}/> </View> ); } } ``` #### Component props - (...all EmojiPicker props) - `visible` (Bool) - Required. Is the overlay visible - `onTapOutsize` (Function) - Required. Callback for when user taps outside the EmojiPicker area. Should set `visible` to `false`