Samuel Newman
116 lines
4.4 KiB
Markdown
116 lines
4.4 KiB
Markdown
# expo-emoji-picker
|
|
|
|
A native emoji picker module for React Native applications built with Expo. This module provides platform-specific emoji selection interfaces using native system components.
|
|
|
|
Based on [react-native-emoji-popup](https://github.com/okwasniewski/react-native-emoji-popup) and [expo-emoji-picker](https://github.com/alanjhughes/expo-emoji-picker).
|
|
|
|
## What It Does
|
|
|
|
The module exposes a React component that presents native emoji picker UI on iOS and Android. When a user selects an emoji, it fires a callback with the selected emoji string.
|
|
|
|
## Platform Support
|
|
|
|
- **iOS**: Uses [MCEmojiPicker](https://github.com/izyumkin/MCEmojiPicker) presented as a modal picker
|
|
- **Android**: Uses the system `androidx.emoji2.emojipicker.EmojiPickerView` component
|
|
- **Web**: Not supported (native platforms only)
|
|
|
|
## How It Works
|
|
|
|
### Architecture
|
|
|
|
The module follows Expo's module architecture with three layers:
|
|
|
|
1. **JavaScript/TypeScript Layer** (`src/`): React components and type definitions
|
|
2. **Native iOS Layer** (`ios/`): Swift implementation using MCEmojiPicker
|
|
3. **Native Android Layer** (`android/`): Kotlin implementation using AndroidX emoji picker
|
|
|
|
### iOS Implementation
|
|
|
|
On iOS, the module creates an invisible tap target view. When tapped, it presents MCEmojiPicker as a modal view controller:
|
|
|
|
- `EmojiPickerView.swift`: Custom view that handles tap gestures and presents the picker
|
|
- `EmojiPickerModule.swift`: Module definition that registers the view with Expo
|
|
- Uses MCEmojiPicker dependency for the native picker UI
|
|
|
|
The picker is presented from the current React view controller and returns the selected emoji via an event dispatcher.
|
|
|
|
### Android Implementation
|
|
|
|
On Android, the module embeds the AndroidX EmojiPickerView directly as a full-screen component:
|
|
|
|
- `EmojiPickerModuleView.kt`: Wraps the system EmojiPickerView in an ExpoView
|
|
- `EmojiPickerModule.kt`: Module definition that registers the view with Expo
|
|
- Handles configuration changes (dark mode, orientation) by recreating the view
|
|
|
|
The AndroidX emoji picker provides a grid-based interface with category tabs and search.
|
|
|
|
### Platform-Specific React Components
|
|
|
|
The module uses platform-specific file extensions for different behaviors:
|
|
|
|
- `EmojiPicker.tsx` (iOS): Renders an invisible tap target that accepts children
|
|
- `EmojiPicker.android.tsx` (Android): Renders the full emoji picker view with flex: 1 layout
|
|
|
|
Both components normalize the native event structure to provide a consistent `onEmojiSelected` callback.
|
|
|
|
## Key Files
|
|
|
|
### Configuration
|
|
- `expo-module.config.json`: Defines the module name and native class mappings for iOS and Android
|
|
|
|
### TypeScript/React
|
|
- `index.ts`: Public exports for the module
|
|
- `src/EmojiPickerModule.ts`: Native module registration
|
|
- `src/EmojiPickerModule.types.ts`: TypeScript type definitions
|
|
- `src/EmojiPickerView.tsx`: Base native view component
|
|
- `src/EmojiPicker.tsx`: iOS-specific implementation
|
|
- `src/EmojiPicker.android.tsx`: Android-specific implementation
|
|
|
|
### iOS (Swift)
|
|
- `ios/EmojiPickerModule.swift`: Module definition (11 lines)
|
|
- `ios/EmojiPickerView.swift`: View implementation with tap handling and picker presentation
|
|
- `ios/EmojiPickerModule.podspec`: CocoaPods specification with MCEmojiPicker dependency
|
|
|
|
### Android (Kotlin)
|
|
- `android/src/main/java/expo/community/modules/emojipicker/EmojiPickerModule.kt`: Module definition
|
|
- `android/src/main/java/expo/community/modules/emojipicker/EmojiPickerModuleView.kt`: View implementation
|
|
- `android/build.gradle`: Gradle configuration with androidx.emoji2:emoji2-emojipicker dependency
|
|
|
|
## Usage
|
|
|
|
```tsx
|
|
import { EmojiPicker } from 'expo-emoji-picker'
|
|
|
|
function MyComponent() {
|
|
const handleEmojiSelected = (emoji: string) => {
|
|
console.log('Selected emoji:', emoji)
|
|
}
|
|
|
|
return (
|
|
<EmojiPicker onEmojiSelected={handleEmojiSelected}>
|
|
{/* On iOS, children render as the tap target */}
|
|
{/* On Android, children are ignored - picker is shown directly */}
|
|
</EmojiPicker>
|
|
)
|
|
}
|
|
```
|
|
|
|
## Dependencies
|
|
|
|
### iOS
|
|
- ExpoModulesCore
|
|
- MCEmojiPicker (external CocoaPods dependency)
|
|
- Minimum iOS version: 15.1
|
|
|
|
### Android
|
|
- expo-modules-core
|
|
- androidx.emoji2:emoji2-emojipicker:1.5.0
|
|
- Minimum SDK: 21
|
|
- Target SDK: 34
|
|
|
|
## Configuration
|
|
|
|
No additional configuration is required. The module is automatically linked through Expo's autolinking system when the app is built.
|
|
|
|
The module definition in `expo-module.config.json` specifies the native class names for each platform, which Expo uses to register the module at runtime.
|