react-native-emoji-panel
Customized emoji panel for react-native.
Installation
npm install react-native-emoji-panel
Properties
onPick
- Required
- Type: Function
Press the emoji btn, then the function will be called with a argument emoji
(the emoji code you picked).
bgColor
- Optional
- Type: String
- Default:
'#E2E2E2'
The backgroundColor for your emoji panel.
showSwitchMenu
- Optional
- Type: Boolean
- Default:
true
Control whether show the switch menu of your panel.
onDelete
- Optional
- Type: Function
If you set an event handler for this property, a delete btn would appear on your every emoji page of the panel, and the function will be called after you press the delete btn.
Usage
import React, { Component } from 'react';
import {
AppRegistry,
TextInput,
StyleSheet,
Text,
View
} from 'react-native';
import EmojiPanel from 'react-native-emoji-panel';
export default class Example extends Component {
constructor(props) {
super(props);
this.handlePick = this.handlePick.bind(this);
this.state = {
inputText: ''
}
}
render() {
const { inputText } = this.state;
return (
<View style={styles.container}>
<TextInput
style={styles.input}
value={inputText}
onChangeText={text => this.setState({ inputText: text })}
/>
<EmojiPanel onPick={this.handlePick} />
</View>
);
}
handlePick(emoji) {
const { inputText } = this.state;
this.setState({ inputText: inputText + emoji });
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#EFEFEF',
},
input: {
marginTop: 20,
paddingHorizontal: 15,
height: 40,
backgroundColor: 'white',
},
});
AppRegistry.registerComponent('Example', () => Example);
Run example
cd ./Example
npm install