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 their 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