React Native Emoticons
react native emoticons component, including emoji
latest screenshot sample
Install
npm install react-native-emoticons
Usage
UI Component
-
step 1
Import the component package.
; -
step 2
Write the component code in the proper place of your page render.
<EmoticonsonEmoticonPress=this_onEmoticonPressonBackspacePress=this_onBackspacePressshow=thisstateshowEmoticonsconcise=trueshowHistoryBar=trueshowPlusBar=true/>Tip: The attribute
onEmoticonPress
can get the emoticos results like{code:'😁', name: 'GRIMACING FACE'}
. The attributeshow
will control that if the component is visible. The attributeonBackspacePress
will add a function for backspace button.
props
Prop | Type | Description | Required | Default |
---|---|---|---|---|
onEmoticonPress |
Function |
callback function when the emoticons is pressed | Yes |
None |
onBackspacePress |
Function |
callback function when the backspace button is pressed | YES |
None |
show |
Bool |
show the component | YES |
false |
concise |
Bool |
concise mod with less emoji | No |
true |
showHistoryBar |
Bool |
enable history function | No |
true |
showPlusBar |
Bool |
enable more emoticons function(is on developing, if you have interesting on this, welcome pull request.) | No |
true |
asyncRender |
Bool |
async render | No |
false |
API
Import
;
-
stringify
//Most database can't restore the emoji string😤,so we map//them to common string.const string = emoticons;console;//output'This is source emoji [GRIMACING FACE]' -
parse
//If we want to show the emoji(fetch from database) in view page//we need parse the stringconst emoji = emoticons;console;//output'This is source emoji 😁' -
splitter
//this api is for backspace functionconst emoji = emoticons;console;//output'e''m''o''j''i''😁'