JSPM

react-native-smart-emoji-picker

0.1.1
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 4
  • Score
    100M100P100Q26727F
  • License MIT

👹 Smart emoji picker supports any custom memes you provides.

Package Exports

  • react-native-smart-emoji-picker

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-smart-emoji-picker) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-native-smart-emoji-picker

npm downloads version GitHub issues MIT

Background

  • This library was abstracted from my React Native app stuhome which was written for iOS only, so maybe it didn't work in Android now. But it's in my Todo.
  • When I was developing my app, I found there are lots of emoji picker components for React Native, but all of them only support regular emojis, and what I need are custom memes, so I wrote my own. And yes, I will support regular emojis soon.
  • The custom emoji file in example was crawled (but kept using image url instead of saving them) from the offcial website which was built for a Chinese University, that said if there are any imporant events like National Congress helding in China, the example won't work since anyone can't access any college internal websites when you are out of college internet during such 'important' time. You should update custom emoji file accroding to Data Structure.

Preview

iphoneX

Installation

npm install --save react-native-smart-emoji-picker

or

yarn add react-native-smart-emoji-picker

Usage

import EmojiPicker from 'react-native-smart-emoji-picker';

<EmojiPicker
  emojis={CUSTOM_EMOJIS}
  onEmojiPress={this.handleEmojiPress} />

You can try it out with the working example.

Data Structure

// CUSTOM_EMOJIS

{
  categoryOne: [
    {
      code: '[a:1178]', // The key which your app server can recognize and map to an unique image.
      image: 'http://bbs.uestc.edu.cn/static/image/smiley/alu/65.gif' // Custom emoji url or local image path.
    },
    {
      code: '[a:1179]',
      image: 'http://bbs.uestc.edu.cn/static/image/smiley/alu/66.gif'
    }
  ],
  categoryTwo: [
    {
      code: '[s:763]',
      image: 'http://bbs.uestc.edu.cn/static/image/smiley/lu/01.gif'
    }
  ]
}

Props

  • emojis (Array) - Custom memes you want to display.
  • show (Boolean) - Whether to display emoji picker, defaults to true.
  • height (Integer) - Height for emoji picker, defaults to 250.
  • rows (Integer) - How many rows for emoji you want to display in one page, defaults to 3.
  • columns (Integer) - How many columns for emoji you want to display in one page, defaults to 7.
  • onEmojiPress (Function) - Callback when a specific emoji is pressed.

Todo

License

The MIT License