# react-native-emoji-modal > Emoji picker for React Native Latest version **0.2.4** (published 2023-01-10) · MIT license · 0 weekly downloads ## Install ```sh npm install react-native-emoji-modal pnpm add react-native-emoji-modal yarn add react-native-emoji-modal bun add react-native-emoji-modal ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.2.4 | | Published | 2023-01-10 | | First published | 2021-11-17 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 5 | | Unpacked size | 204.8 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Author | Andre 'Staltz' Medeiros | | Maintainers | staltz | ## Links - npm: https://www.npmjs.com/package/react-native-emoji-modal - npm.io page: https://npm.io/package/react-native-emoji-modal ## Dependencies (5) - [react](https://npm.io/package/react.md) >=17.0.0 - [react-native](https://npm.io/package/react-native.md) >=0.64.0 - [just-group-by](https://npm.io/package/just-group-by.md) 2.1.2 - [just-map-values](https://npm.io/package/just-map-values.md) 3.1.1 - [react-native-vector-icons](https://npm.io/package/react-native-vector-icons.md) ^9.0.0 ## Recent versions - 0.2.4 (latest) — 2023-01-10 - 0.2.3 — 2023-01-10 - 0.2.2 — 2021-11-17 - 0.2.1 — 2021-11-17 - 0.2.0 — 2021-11-17 - 0.1.0 — 2021-11-17 ## README # 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](https://github.com/staltz/react-native-emoji-picker-staltz). ![screenshot](./screenshot.png) **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 ```bash pnpm add react-native-emoji-modal ``` or ```bash npm install --save react-native-emoji-modal ``` ## Usage ```jsx import EmojiModal from 'react-native-emoji-modal'; // ... {}} />; ``` ## 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](https://manyver.se) and we're very thankful for our [backers on OpenCollective](https://opencollective.com/manyverse), and we need more donations! :pray: ## License [MIT](LICENSE) --- _Source: https://npm.io/package/react-native-emoji-modal · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._