React Native Emoticons

react native emoticons component, including emoji.

emoticons

Install

npm install react-native-emoticons

Usage

UI Component

  • step 1

    Import the component package.

    import Emoticons from 'react-native-emoticons';

  • step 2

    Write the component code in the proper place of your page render.

    <Emoticons
	 onEmoticonPress={this._onEmoticonPress.bind(this)}
	 onBackspacePress={this._onBackspacePress.bind(this)}
	 show={this.state.showEmoticons}
	 concise={true}
	 showHistoryBar={true}
	 showPlusBar={true}
 />

    Tip: The attribute onEmoticonPress can get the emoticos results like {code:'?', name: 'GRIMACING FACE'}. The attribute show will control that if the component is visible. The attribute onBackspacePress 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

import * as emoticons from 'react-native-emoticons';

  1. stringify

    //Most database can't restore the emoji string?,so we map 
//them to common string.

const string = emoticons.stringify('This is source emoji ?');
console.log(string);

    //output
'This is source emoji [GRIMACING FACE]'

  2. parse

    //If we want to show the emoji(fetch from database) in view page
//we need parse the string

const emoji = emoticons.parse('This is source emoji [GRIMACING FACE]');
console.log(emoji);

    //output
'This is source emoji ?'

  3. splitter

    //this api is for backspace function
const emoji = emoticons.splitter('emoji?');
console.log(emoji);

    //output
['e','m','o','j','i','?']

Further

Support custom emoticons like weixin

GitHub