Lightweight React Native Emoji Picker – Emoji Chooser

Description:

Emoji Chooser is a lightweight and customizable emoji picker component for React Native applications.

You can use this component in any scenario that requires users to input emojis, including chat applications, social media platforms, or interactive forms.

It can be rendered inside a bottom sheet for a modal-like experience or as a standalone view directly within your screen’s layout.

Features

• 🎨 Customizable themes with light and dark mode support
• 🌐 Multi-language translations for category labels and placeholders
• 📱 Flexible layout with adjustable column counts for emoji grids
• 🔄 Recent emoji tracking that remembers user selections
• 🔍 Built-in search functionality for quick emoji discovery
• 📊 Over 400 emojis sourced from emoji-datasource
• 🎯 Compatibility with popular chat libraries like gifted chat
• ⬇️ Render options including bottom sheets and standalone views

Preview

Use Cases

• Chat Applications. Integrate the emoji picker into the chat input area to allow users to send emojis in messages.
• Social Media Feeds. Add the component to comment sections or post creation screens so users can react and express themselves with emojis.
• User Feedback Forms. Use emojis in feedback or rating systems to capture user sentiment in a more interactive way.
• Profile Customization. Allow users to select an emoji for their status or as part of their user profile.

How to Use It

1. Install the package from the npm registry.

npm install react-native-emoji-chooser

2. import and use the EmojiPicker component in your application.

Here is a basic example of how to use the component as a standalone view.

import React, { useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import EmojiPicker from 'react-native-emoji-chooser';
export default function App() {
  const [selectedEmoji, setSelectedEmoji] = useState<string | null>(null);
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Select an Emoji</Text>
      {selectedEmoji && <Text style={styles.emoji}>{selectedEmoji}</Text>}
      <EmojiPicker
        onSelect={setSelectedEmoji}
        mode="light"
        lang="en"
        columnCount={8}
      />
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 16,
  },
  title: {
    fontSize: 20,
    marginBottom: 16,
  },
  emoji: {
    fontSize: 48,
    marginBottom: 16,
  },
});

3. Config your emoji picker with the following props.

mode: 'light' | 'dark';
theme?: DeepPartial<ModedTheme>;
columnCount?: number;
translation?: DeepPartial<Translation>;
lang?: string;
onSelect: (emoji: string) => void;
toolbarProps?: Pick<ToolbarProps, 'iconWidth'>;
searchBarProps?: Partial<TextInputProps>;

FAQs

Q: How can I add translations for a new language?
A: You can use the translation prop to pass a custom translation object. This object should contain the translated strings for emoji categories and the search input placeholder for your target language.

Q: Is it possible to change the number of emojis displayed per row?
A: Yes, the columnCount prop allows you to set the number of columns in the emoji grid to adjust the layout.

Q: Does the component remember which emojis were used last?
A: Yes, it automatically tracks and displays a “Recently Used” category for quick access to frequently selected emojis.