React Native Emoji

react native emoji component

Install

npm install react-native-emoji-select-board --save

Usage

UI Component

• step 1

  Import the component package.

  import EmojiBoard from 'react-native-emoji-select-board';

• step 2

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

  <EmojiBoard
  	 onEmojiIconPress={this._onEmojiIconPress.bind(this)}
  	 onBackspacePress={this._onBackspacePress.bind(this)}
  	 show={this.state.showEmojiicons}
  	 concise={true}
  	 showHistoryBar={true}
  	 showPlusBar={true}
   />

  Tip: The attribute onEmojiIconPress can get the emojiicos 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 | |---|---|---|---|---| |onEmojiIconPress |Function | callback function when the emojiicons 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 emojiicons function(is on developing, if you have interesting on this, welcome pull request.)|No| false | |asyncRender |Bool | async render |No| false | |blackList |Array | put some emojis into black list by using short_name |No| [] |

API

Import

import * as emojiicons from 'react-native-emoji-select-board';

1. stringify

   //Most database can't restore the emoji string😤,so we map 
   //them to common string.
      
   const string = emojiicons.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 = emojiicons.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 = emojiicons.splitter('emoji😁');
   console.log(emoji);

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