react-native-emoticons-fix

react native emoticons component, including emoji

Usage no npm install needed!

<script type="module">
  import reactNativeEmoticonsFix from 'https://cdn.skypack.dev/react-native-emoticons-fix';
</script>

README

React Native Emoticons

react native emoticons component, including emoji

emoticons

latest screenshot sample

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