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 211 kB worth of emoji data, versus 1.2 MB in react-native-emoji-picker

Installation

pnpm add @resco.pe/react-native-emoji-modal

or

npm install --save @resco.pe/react-native-emoji-modal

or

yarn add @resco.pe/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! :pray:

License

MIT