Feature-complete Emoji picker for React Native

react-native-emoji-modal

Feature-complete emoji picker for React Native that mimics the look and feel of native ones.

This is a rewrite of react-native-emoji-picker.

Features:

  • Vertically scrolling with 7 columns of emoji
  • Search field
  • Category shortcuts
  • Supports iOS
  • Supports Android
    • It’s aware of Android versions and thier availability of emojis
  • Supports react-native-web
    • Except for category shortcuts (PRs welcome to fix this!)
  • Written in TypeScript
  • Lightweight
    • Loads just 163 kB worth of emoji data, versus 1.2 MB in react-native-emoji-picker

Installation

pnpm add react-native-emoji-modal

or

npm install --save react-native-emoji-modal

Usage

import EmojiModal from 'react-native-emoji-modal'; // ... <EmojiModal onEmojiSelected={(emoji) => {}} />;

Props

Prop name Description Type Required Default
onEmojiSelected Function called when the user presses one of the emojis shown function true
onPressOutside Function called when the user taps outside of the emoji picker region function false
columns How many columns of emojis to render in the grid number false 7
localizedCategories Customize the labels for each category Array false ['Smileys & Emotion', 'People & Body', 'Animals & Nature', 'Food & Drink', 'Activities', 'Travel & Places', 'Objects', 'Symbols', 'Flags']
emojiSize Customize the size of each emoji, in pixels number false 32
emojiStyle Custom style for each emoji TextStyle false
headerStyle Custom style for the label for each category TextStyle false
scrollStyle Custom style for the FlatList with the grid of emojis ViewStyle false
searchStyle Custom style for the search TextInput ViewStyle false
shortcutColor Color for inactive category shortcuts color false #bcbcbc
activeShortcutColor Color for the active category shortcut color false #0c0c0c
containerStyle Custom style for the “box” in the center ViewStyle false
backgroundStyle Custom style for the background of the modal ViewStyle false
modalStyle Custom style for top-level container ViewStyle false

Support us!

This library was created for Manyverse and we’re very thankful for our backers on OpenCollective, and we need more donations! ?

License

MIT

GitHub

View Github