React Native Emoji Picker

A powerful, flexible emoji picker for React Native with modal and inline modes, extensive customization, and cross-platform support.

Important note: This component was “vibe coded,” so it may have issues. Please use it with caution.

✨ Features

• 🎯 Flexible Integration - Modal, inline, or headless with hooks
• 🛠️ High Customization - Allows for almost total freedom
• 🔍 Smart Search - Fast emoji search with debouncing
• 📂 Category Navigation - Intuitive tab-based browsing
• 🕐 Recent Emojis - Automatically tracks frequently used emojis
• 🎨 Full Theming - Built-in dark mode + custom themes
• ⚡ High Performance - Optimized FlatList rendering
• 📱 Cross-Platform - iOS, Android, and Web ready

🎉 Expo Go Compatible

This library works seamlessly with Expo Go - no custom native code required! All dependencies are supported in Expo managed workflow. Just install and start using it in your Expo projects.

🎮 Live Demo

Try out the interactive demo with customization options: react-native-emoji-picker.netlify.app

📦 Installation

npm install @hiraku-ai/react-native-emoji-picker

Peer Dependencies

npm install @react-native-async-storage/async-storage react-native-svg

🚀 Quick Start

Modal Version

import React, { useState } from 'react';
import EmojiPickerModal, { emojiData } from '@hiraku-ai/react-native-emoji-picker';

function App() {
  const [visible, setVisible] = useState(false);

  return (
    <>
      <Button title="Pick Emoji" onPress={() => setVisible(true)} />
      <EmojiPickerModal
        visible={visible}
        onClose={() => setVisible(false)}
        onEmojiSelect={(emoji) => console.log(emoji)}
        emojis={emojiData}
      />
    </>
  );
}

Inline Version

import { EmojiPicker, emojiData } from '@hiraku-ai/react-native-emoji-picker';

<View style={{ height: 400 }}>
  <EmojiPicker
    emojis={emojiData}
    onEmojiSelect={(emoji) => console.log(emoji)}
    onClose={() => {}}
  />
</View>

Bottom Sheet / Gesture Handler

Pass BottomSheetFlatList for both props to fix scroll conflicts on Android when using @gorhom/bottom-sheet.

import { BottomSheetFlatList } from '@gorhom/bottom-sheet';
import { EmojiPicker, emojiData } from '@hiraku-ai/react-native-emoji-picker';

<EmojiPicker
  emojis={emojiData}
  onEmojiSelect={(emoji) => console.log(emoji)}
  FlatListComponent={BottomSheetFlatList}
  TabFlatListComponent={BottomSheetFlatList}
/>

Headless Mode

import { useEmojiPicker, useEmojiPickerRenderer, EmojiPickerThemeProvider, emojiData } from '@hiraku-ai/react-native-emoji-picker';

function CustomPickerContent() {
  const { flatListData, emojiSections, selectedSkinTone, searchQuery, getModifiedEmoji, updateRecentEmojis } = useEmojiPicker({
    emojis: emojiData
  });

  const { renderItem, renderEmptyComponent } = useEmojiPickerRenderer({
    onEmojiSelect: (emoji) => console.log(emoji),
    getModifiedEmoji,
    updateRecentEmojis,
    selectedSkinTone,
    emojiSections,
    searchQuery,
  });

  // Bring your own scroll component
  return (
    <YourFlatList
      data={flatListData}
      renderItem={renderItem}
      ListEmptyComponent={renderEmptyComponent}
      keyExtractor={(item) => item.id}
    />
  );
}

function CustomPicker() {
  return (
    <EmojiPickerThemeProvider>
      <CustomPickerContent />
    </EmojiPickerThemeProvider>
  );
}

📚 What's Included

🎯 Ready-to-Use Components

Drop these in and you're done:

• EmojiPickerModal - Full-featured modal with everything built-in
• EmojiPicker - Embeddable inline version

🔧 Building Blocks for Custom UIs

Mix and match these standalone components:

• EmojiSearch - Search bar with debouncing
• EmojiTabs - Category navigation tabs
• SkinToneSelector - Skin tone picker button
• All category icons - Use our icon set in your custom UI

🎨 Headless Mode for Total Control

Build completely custom interfaces:

• useEmojiPicker - All logic: search, filtering, recent emojis, skin tones, category ordering
• useEmojiPickerRenderer - Ready-made renderItem and renderEmptyComponent for your own scroll component
• Complete control over layout — works with BottomSheetFlatList, FlashList, or anything FlatList-compatible

🎭 Theme System

• EmojiPickerThemeProvider - Wrap your app for consistent theming
• useEmojiPickerTheme - Access theme values anywhere
• lightTheme / darkTheme - Pre-built themes
• PartialTheme - Override specific colors

📦 Data & Utilities

• emojiData - Complete emoji dataset (3600+ emojis)
• SKIN_TONES - All skin tone modifiers
• Category - Category constants
• Full TypeScript types included

📖 Documentation

• API Reference - Complete prop reference
• Theming Guide - Customizing colors and styles
• Advanced Features - Filtering, custom renders, performance
• Headless Mode - Build custom UIs with hooks
• TypeScript Guide - Type definitions and examples

📄 License

Apache License 2.0

👨‍💻 Author

Stef Buzas (https://stefbuzas.com) at Hiraku (https://hiraku.ai)

🔗 Links

• GitHub
• Issues
• NPM