Add READMEs to modules (#10306)
This commit is contained in:
Samuel Newman
@@ -1,3 +1,115 @@
|
||||
# expo-emoji-picker
|
||||
|
||||
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)
|
||||
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.
|
||||
|
||||
Reference in New Issue
Block a user