feat: swap the hand-picked 60-emoji grid for a full search+category picker

Replaces the composer's hardcoded emoji list with a generated dataset
(1,849 entries — github/gemoji, MIT, filtered to ios_version <= 15.4
for consistent cross-platform rendering) plus a new ChattyEmojiPicker
with search and category tabs, matching the web widget's
emoji-picker-react and the native SDKs' equivalents. FlatList-backed
grid so ~1,850 entries don't all mount at once; data is a compiled-in
constant, so nothing needs to be fetched.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

Author: tharindu20118

README.md

@@ -27,7 +27,7 @@ avatar, and composer with real `View`/`Text`/`FlatList` components — no `WebVi
 | **No WebView, anywhere** | Every bubble, avatar, and the composer are real RN components — no iframe, no JS bridge, no WebView memory/perf overhead. |
 | **Matches your dashboard automatically** | Fetches the bot's theme and renders with the exact colors, corner radii, and launcher shape chosen in the dashboard — no manual styling. |
 | **Three integration shapes** | A floating [`ChattyLauncher`](#chattylauncher), an embedded [`ChattyChatView`](#chattychatview), or the headless [`useChattyChat`](#usechattychat-headless) hook. |
-| **A real composer, not a stub** | Emoji picker and an animated attach menu, built in — camera/photo/mic wire up to whatever picker your app already uses. |
+| **A real composer, not a stub** | Full-Unicode emoji picker (search + categories, ~1,850 emoji) and an animated attach menu, built in — camera/photo/mic wire up to whatever picker your app already uses. |
 | **Works with bare RN and Expo** | No native linking required beyond `@react-native-async-storage/async-storage`, which most apps already have. |
 
 ## Install

dist/ChattyChatView.js

@@ -2,16 +2,10 @@ import React, { useEffect, useRef, useState } from "react";
 import { View, Text, TextInput, TouchableOpacity, FlatList, Image, StyleSheet, KeyboardAvoidingView, Platform, ActivityIndicator, Linking, Animated, LayoutAnimation, UIManager, PermissionsAndroid, } from "react-native";
 import { useChattyChat } from "./useChattyChat";
 import { CHATTY_DESIGN_TOKENS, chattyNormalizeWidgetStyle, chattyBubbleRadii } from "./designTokens";
+import { ChattyEmojiPicker } from "./ChattyEmojiPicker";
 if (Platform.OS === "android" && UIManager.setLayoutAnimationEnabledExperimental) {
     UIManager.setLayoutAnimationEnabledExperimental(true);
 }
-const CHATTY_EMOJIS = [
-    "😀", "😃", "😄", "😁", "😆", "😅", "😂", "🙂", "🙃", "😉", "😊", "😇",
-    "🥰", "😍", "🤩", "😘", "😋", "😛", "🤪", "😜", "🤔", "🤨", "😐", "😑",
-    "😶", "🙄", "😏", "😒", "😬", "🙁", "😢", "😭", "😤", "😡", "🥳", "😴",
-    "🤗", "🤝", "👍", "👎", "👏", "🙌", "🙏", "💪", "👋", "✌️", "🤞", "❤️",
-    "🔥", "✨", "🎉", "🎊", "⭐", "💯", "✅", "❌", "❓", "❗", "💬", "👀",
-];
 /** bot/logo(no logoUrl)/custom(no avatarUrl) fall back to a generic chat
  * glyph; the rest map 1:1 to the dashboard's avatar_icon options. */
 function avatarGlyph(avatarIcon) {
@@ -154,11 +148,7 @@ export function ChattyChatView(props) {
       {/* Bordered rounded-16 bar with the input on top and an icon row
             (emoji + attach + mic + send) below, matching .chat-input-bar on web. */}
       <View style={[styles.composer, { borderColor: withAlpha(t.headerText, 0.12) }]}>
-        {showEmojiPicker && (<View style={styles.emojiGrid}>
-            {CHATTY_EMOJIS.map((emoji, i) => (<TouchableOpacity key={i} style={styles.emojiCell} onPress={() => setInput((v) => v + emoji)}>
-                <Text style={{ fontSize: 18 }}>{emoji}</Text>
-              </TouchableOpacity>))}
-          </View>)}
+        {showEmojiPicker && <ChattyEmojiPicker onPick={(emoji) => setInput((v) => v + emoji)}/>}
         {showAttachMenu && (<View style={styles.attachMenu}>
             <AttachMenuOption glyph="📷" label="Camera" onPress={() => {
                 setShowAttachMenu(false);
@@ -351,28 +341,6 @@ const styles = StyleSheet.create({
         paddingTop: 10,
         paddingBottom: 6,
     },
-    emojiGrid: {
-        flexDirection: "row",
-        flexWrap: "wrap",
-        maxHeight: 160,
-        marginBottom: 8,
-        padding: 6,
-        backgroundColor: "#fff",
-        borderRadius: 16,
-        borderWidth: 1,
-        borderColor: "#e5e7eb",
-        shadowColor: "#000",
-        shadowOpacity: 0.18,
-        shadowRadius: 12,
-        shadowOffset: { width: 0, height: 4 },
-        elevation: 6,
-    },
-    emojiCell: {
-        width: "12.5%",
-        aspectRatio: 1,
-        alignItems: "center",
-        justifyContent: "center",
-    },
     attachMenu: {
         flexDirection: "row",
         gap: 12,

dist/ChattyEmojiPicker.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+/**
+ * Search field + category tabs + scrollable grid over the full generated
+ * emoji dataset (chattyEmojiData.ts) — the "real emoji library" experience
+ * (matching the web widget's emoji-picker-react and the Android SDK's
+ * androidx.emoji2 EmojiPickerView), not the old fixed ~60-emoji grid.
+ *
+ * A FlatList (not a plain mapped View) backs the grid since the full/
+ * unfiltered category can be a few hundred entries — FlatList only mounts
+ * what's on/near screen instead of ~1,850 TouchableOpacity instances at once.
+ * The dataset itself is a compiled-in constant, so there's nothing to fetch —
+ * this renders synchronously the moment its parent shows it.
+ */
+export declare function ChattyEmojiPicker({ onPick }: {
+    onPick: (emoji: string) => void;
+}): React.JSX.Element;

dist/ChattyEmojiPicker.js

@@ -0,0 +1,101 @@
+import React, { useMemo, useState } from "react";
+import { View, Text, TextInput, TouchableOpacity, FlatList, StyleSheet } from "react-native";
+import { CHATTY_EMOJI_CATEGORIES, CHATTY_EMOJI_DATA } from "./chattyEmojiData";
+const CATEGORY_GLYPH = {
+    "Smileys & Emotion": "😀",
+    "People & Body": "🙌",
+    "Animals & Nature": "🐾",
+    "Food & Drink": "🍔",
+    "Travel & Places": "✈️",
+    "Activities": "🎮",
+    "Objects": "💡",
+    "Symbols": "🔣",
+    "Flags": "🏳️",
+};
+/**
+ * Search field + category tabs + scrollable grid over the full generated
+ * emoji dataset (chattyEmojiData.ts) — the "real emoji library" experience
+ * (matching the web widget's emoji-picker-react and the Android SDK's
+ * androidx.emoji2 EmojiPickerView), not the old fixed ~60-emoji grid.
+ *
+ * A FlatList (not a plain mapped View) backs the grid since the full/
+ * unfiltered category can be a few hundred entries — FlatList only mounts
+ * what's on/near screen instead of ~1,850 TouchableOpacity instances at once.
+ * The dataset itself is a compiled-in constant, so there's nothing to fetch —
+ * this renders synchronously the moment its parent shows it.
+ */
+export function ChattyEmojiPicker({ onPick }) {
+    const [query, setQuery] = useState("");
+    const [category, setCategory] = useState(CHATTY_EMOJI_CATEGORIES[0]);
+    const isSearching = query.trim().length > 0;
+    const visible = useMemo(() => {
+        if (isSearching) {
+            const q = query.trim().toLowerCase();
+            return CHATTY_EMOJI_DATA.filter((e) => e.name.toLowerCase().includes(q) || e.tags.some((t) => t.toLowerCase().includes(q)));
+        }
+        return CHATTY_EMOJI_DATA.filter((e) => e.category === category);
+    }, [query, category, isSearching]);
+    return (<View style={styles.container}>
+      <View style={styles.searchRow}>
+        <Text style={styles.searchIcon}>🔍</Text>
+        <TextInput value={query} onChangeText={setQuery} placeholder="Search emoji…" placeholderTextColor="#9ca3af" style={styles.searchInput} autoCapitalize="none" autoCorrect={false}/>
+      </View>
+
+      {!isSearching && (<View style={styles.categoryRow}>
+          <FlatList horizontal showsHorizontalScrollIndicator={false} data={CHATTY_EMOJI_CATEGORIES} keyExtractor={(c) => c} renderItem={({ item }) => (<TouchableOpacity onPress={() => setCategory(item)} style={[styles.categoryTab, item === category && styles.categoryTabActive]}>
+                <Text style={{ fontSize: 15 }}>{CATEGORY_GLYPH[item] ?? "•"}</Text>
+              </TouchableOpacity>)} contentContainerStyle={{ paddingHorizontal: 4 }}/>
+        </View>)}
+
+      <FlatList key="emoji-grid-8col" data={visible} keyExtractor={(e, i) => `${e.emoji}-${i}`} numColumns={8} renderItem={({ item }) => (<TouchableOpacity style={styles.cell} onPress={() => onPick(item.emoji)}>
+            <Text style={{ fontSize: 18 }}>{item.emoji}</Text>
+          </TouchableOpacity>)} style={styles.grid} contentContainerStyle={{ padding: 4 }} initialNumToRender={64} windowSize={5}/>
+    </View>);
+}
+const styles = StyleSheet.create({
+    container: {
+        height: 320,
+        marginBottom: 8,
+        backgroundColor: "#fff",
+        borderRadius: 16,
+        borderWidth: 1,
+        borderColor: "#e5e7eb",
+        overflow: "hidden",
+        shadowColor: "#000",
+        shadowOpacity: 0.18,
+        shadowRadius: 12,
+        shadowOffset: { width: 0, height: 4 },
+        elevation: 6,
+    },
+    searchRow: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: 6,
+        paddingHorizontal: 10,
+        paddingVertical: 7,
+        backgroundColor: "#f7f7f8",
+    },
+    searchIcon: { fontSize: 12 },
+    searchInput: { flex: 1, fontSize: 12, color: "#1f2937", padding: 0 },
+    categoryRow: {
+        borderBottomWidth: 1,
+        borderBottomColor: "#f0f0f1",
+        paddingVertical: 4,
+    },
+    categoryTab: {
+        width: 32,
+        height: 32,
+        borderRadius: 16,
+        alignItems: "center",
+        justifyContent: "center",
+        marginHorizontal: 2,
+    },
+    categoryTabActive: { backgroundColor: "#eef0f2" },
+    grid: { flex: 1 },
+    cell: {
+        width: "12.5%",
+        aspectRatio: 1,
+        alignItems: "center",
+        justifyContent: "center",
+    },
+});

dist/chattyEmojiData.d.ts

@@ -0,0 +1,8 @@
+export interface ChattyEmojiEntry {
+    emoji: string;
+    name: string;
+    category: string;
+    tags: string[];
+}
+export declare const CHATTY_EMOJI_CATEGORIES: string[];
+export declare const CHATTY_EMOJI_DATA: ChattyEmojiEntry[];