expo-native-sheet-emojis 1.0.0

package/src/EmojiSheetModule.ts

@@ -0,0 +1,72 @@
+import { NativeModule, requireNativeModule } from 'expo';
+import type { EmojiSheetResult, EmojiSheetPresentOptions, EmojiSheetTheme } from './EmojiSheetModule.types';
+
+type NativeOptions = Record<string, unknown>;
+
+function flattenOptions(options: EmojiSheetPresentOptions): NativeOptions {
+  const flat: NativeOptions = {};
+
+  // Theme
+  if (options.theme) {
+    if (typeof options.theme === 'string') {
+      flat.theme = options.theme;
+    } else {
+      const theme = options.theme as EmojiSheetTheme;
+      flat.theme = 'custom';
+      flat.backgroundColor = theme.backgroundColor;
+      flat.searchBarBackgroundColor = theme.searchBarBackgroundColor;
+      flat.textColor = theme.textColor;
+      flat.textSecondaryColor = theme.textSecondaryColor;
+      flat.accentColor = theme.accentColor;
+      flat.dividerColor = theme.dividerColor;
+      if (theme.searchTextColor) flat.searchTextColor = theme.searchTextColor;
+      if (theme.placeholderTextColor) flat.placeholderTextColor = theme.placeholderTextColor;
+      if (theme.selectionColor) flat.selectionColor = theme.selectionColor;
+      if (theme.categoryIconColor) flat.categoryIconColor = theme.categoryIconColor;
+      if (theme.categoryActiveIconColor) flat.categoryActiveIconColor = theme.categoryActiveIconColor;
+      if (theme.categoryActiveBackgroundColor) flat.categoryActiveBackgroundColor = theme.categoryActiveBackgroundColor;
+      if (theme.handleColor) flat.handleColor = theme.handleColor;
+      if (theme.categoryBarBackgroundColor) flat.categoryBarBackgroundColor = theme.categoryBarBackgroundColor;
+    }
+  }
+
+  // Translations
+  if (options.translations) {
+    if (options.translations.searchPlaceholder) flat.searchPlaceholder = options.translations.searchPlaceholder;
+    if (options.translations.noResultsText) flat.noResultsText = options.translations.noResultsText;
+    if (options.translations.categoryNames) flat.categoryNames = options.translations.categoryNames;
+  }
+
+  // Layout & behavior
+  if (options.snapPoints) flat.snapPoints = options.snapPoints;
+  if (options.categoryBarPosition) flat.categoryBarPosition = options.categoryBarPosition;
+  if (options.columns != null) flat.columns = options.columns;
+  if (options.emojiSize != null) flat.emojiSize = options.emojiSize;
+  if (options.recentLimit != null) flat.recentLimit = options.recentLimit;
+  if (options.showSearch != null) flat.showSearch = options.showSearch;
+  if (options.showRecents != null) flat.showRecents = options.showRecents;
+  if (options.enableSkinTones != null) flat.enableSkinTones = options.enableSkinTones;
+  if (options.gestureEnabled != null) flat.gestureEnabled = options.gestureEnabled;
+  if (options.backdropOpacity != null) flat.backdropOpacity = options.backdropOpacity;
+  if (options.excludeEmojis) flat.excludeEmojis = options.excludeEmojis;
+
+  return flat;
+}
+
+declare class EmojiSheetModuleType extends NativeModule {
+  present(options: NativeOptions): Promise<EmojiSheetResult>;
+  dismiss(): Promise<void>;
+}
+
+const NativeEmojiSheet = requireNativeModule<EmojiSheetModuleType>('EmojiSheet');
+
+export type { EmojiSheetResult };
+
+export default {
+  present(options: EmojiSheetPresentOptions = {}): Promise<EmojiSheetResult> {
+    return NativeEmojiSheet.present(flattenOptions(options));
+  },
+  dismiss(): Promise<void> {
+    return NativeEmojiSheet.dismiss();
+  },
+};

package/src/EmojiSheetModule.types.ts

@@ -0,0 +1,88 @@
+import { type ViewProps } from 'react-native';
+
+export type EmojiSheetTheme = {
+  backgroundColor: string;
+  searchBarBackgroundColor: string;
+  textColor: string;
+  textSecondaryColor: string;
+  searchTextColor?: string;
+  placeholderTextColor?: string;
+  accentColor: string;
+  selectionColor?: string;
+  categoryIconColor?: string;
+  categoryActiveIconColor?: string;
+  categoryActiveBackgroundColor?: string;
+  handleColor?: string;
+  dividerColor: string;
+  categoryBarBackgroundColor?: string;
+};
+
+export type EmojiCategory =
+  | 'frequently_used'
+  | 'smileys_emotion'
+  | 'people_body'
+  | 'animals_nature'
+  | 'food_drink'
+  | 'travel_places'
+  | 'activities'
+  | 'objects'
+  | 'symbols'
+  | 'flags';
+
+export type EmojiSheetTranslations = {
+  searchPlaceholder?: string;
+  noResultsText?: string;
+  categoryNames?: Partial<Record<EmojiCategory, string>>;
+};
+
+export type EmojiSheetPresentOptions = {
+  theme?: EmojiSheetTheme | 'dark' | 'light';
+  translations?: EmojiSheetTranslations;
+  snapPoints?: [number, number];
+  categoryBarPosition?: 'top' | 'bottom';
+  columns?: number;
+  emojiSize?: number;
+  recentLimit?: number;
+  showSearch?: boolean;
+  showRecents?: boolean;
+  enableSkinTones?: boolean;
+  gestureEnabled?: boolean;
+  backdropOpacity?: number;
+  excludeEmojis?: string[];
+};
+
+export type EmojiSheetResult =
+  | { emoji: string; cancelled?: never }
+  | { cancelled: true; emoji?: never };
+
+export type EmojiSelectionListener = (event: { nativeEvent: { emoji: string } }) => void;
+
+export type EmojiSheetViewProps = ViewProps & {
+  onEmojiSelected: (emoji: string) => void;
+  theme?: EmojiSheetTheme | 'dark' | 'light';
+  translations?: EmojiSheetTranslations;
+  categoryBarPosition?: 'top' | 'bottom';
+  columns?: number;
+  emojiSize?: number;
+  recentLimit?: number;
+  showSearch?: boolean;
+  showRecents?: boolean;
+  enableSkinTones?: boolean;
+  excludeEmojis?: string[];
+};
+
+export type EmojiSheetNativeViewProps = ViewProps & {
+  onEmojiSelected: EmojiSelectionListener;
+  theme?: string;
+  categoryBarPosition?: string;
+  columns?: number;
+  emojiSize?: number;
+  recentLimit?: number;
+  showSearch?: boolean;
+  showRecents?: boolean;
+  enableSkinTones?: boolean;
+  searchPlaceholder?: string;
+  noResultsText?: string;
+  categoryNames?: Partial<Record<EmojiCategory, string>>;
+  excludeEmojis?: string[];
+};

package/src/EmojiSheetView.tsx

@@ -0,0 +1,51 @@
+import { requireNativeView } from 'expo';
+import type * as React from 'react';
+import type {
+  EmojiSheetNativeViewProps,
+  EmojiSheetViewProps,
+} from './EmojiSheetModule.types';
+
+const NativeView: React.ComponentType<EmojiSheetNativeViewProps> =
+  requireNativeView('EmojiSheet');
+
+export default function EmojiSheetView({
+  onEmojiSelected,
+  theme,
+  translations,
+  categoryBarPosition,
+  columns,
+  emojiSize,
+  recentLimit,
+  showSearch,
+  showRecents,
+  enableSkinTones,
+  excludeEmojis,
+  ...rest
+}: EmojiSheetViewProps) {
+  const resolvedTheme = typeof theme === 'object' ? 'custom' : theme;
+
+  // For custom themes, we pass individual color props through the native view
+  // For now, the declarative view supports 'dark' | 'light' string themes
+  // Custom theme object support would require additional native view props
+
+  return (
+    <NativeView
+      {...rest}
+      theme={resolvedTheme}
+      categoryBarPosition={categoryBarPosition}
+      columns={columns}
+      emojiSize={emojiSize}
+      recentLimit={recentLimit}
+      showSearch={showSearch}
+      showRecents={showRecents}
+      enableSkinTones={enableSkinTones}
+      excludeEmojis={excludeEmojis}
+      searchPlaceholder={translations?.searchPlaceholder}
+      noResultsText={translations?.noResultsText}
+      categoryNames={translations?.categoryNames}
+      onEmojiSelected={({ nativeEvent }) => {
+        onEmojiSelected(nativeEvent.emoji);
+      }}
+    />
+  );
+}

package/src/index.ts

@@ -0,0 +1,5 @@
+export { default as EmojiSheetModule } from './EmojiSheetModule';
+export type { EmojiSheetResult } from './EmojiSheetModule';
+export { default as EmojiSheetView } from './EmojiSheetView';
+export * from './EmojiSheetModule.types';
+export { lightTheme, darkTheme } from './themes';

package/src/themes.ts

@@ -0,0 +1,29 @@
+import type { EmojiSheetTheme } from './EmojiSheetModule.types';
+
+export const lightTheme: EmojiSheetTheme = {
+  backgroundColor: '#FFFFFF',
+  searchBarBackgroundColor: '#F0F0F0',
+  textColor: '#000000',
+  textSecondaryColor: '#808080',
+  accentColor: '#EA4578',
+  dividerColor: '#E0E0E0',
+  categoryIconColor: '#666666',
+  categoryActiveIconColor: '#EA4578',
+  categoryActiveBackgroundColor: '#E0E0E0',
+  handleColor: '#B8B8B8',
+  categoryBarBackgroundColor: '#FFFFFF',
+};
+
+export const darkTheme: EmojiSheetTheme = {
+  backgroundColor: '#1A1A2E',
+  searchBarBackgroundColor: '#2A2F39',
+  textColor: '#FFFFFF',
+  textSecondaryColor: '#999999',
+  accentColor: '#EA4578',
+  dividerColor: '#3A3A4A',
+  categoryIconColor: '#808080',
+  categoryActiveIconColor: '#EA4578',
+  categoryActiveBackgroundColor: '#3A3A4A',
+  handleColor: '#666666',
+  categoryBarBackgroundColor: '#1A1A2E',
+};