0.2.4 • Published 1 year ago
react-native-emoji-modal v0.2.4
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-modalor
npm install --save react-native-emoji-modalUsage
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: