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.

  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