expo-native-sheet-emojis 2.0.1 → 2.0.2

package/README.md

@@ -6,7 +6,7 @@ A fully native emoji picker bottom sheet for React Native. Built entirely in Swi
 
 ## Highlights
 
-- **1900+ emojis** across 9 categories (Unicode Emoji up to v16.0), rendered at 60+ FPS
+- **1900+ emojis** across 9 categories (Unicode Emoji up to v16.0)
 - **60+ FPS everywhere** -- native UICollectionView (iOS) and RecyclerView (Android) with no JS bridge involvement during scrolling, searching, or animations
 - Fully native on both platforms -- no JavaScript emoji rendering, no web views, no React re-renders
 - Search across 21 languages powered by [Unicode CLDR](https://cldr.unicode.org/) -- the industry-standard source for emoji annotations used by iOS, Android, and major platforms. Runs on a background thread to keep the UI thread free
@@ -431,6 +431,41 @@ await EmojiSheetModule.present({
 | gestureEnabled | `boolean` | `true` | Swipe to dismiss |
 | backdropOpacity | `number` | `0.22` | Backdrop opacity |
 
+## Companion: expo-native-emojis-popup
+
+For quick emoji reactions (like message reaction trays), the companion module [expo-native-emojis-popup](https://github.com/efstathiosntonas/expo-native-emojis-popup) provides a fully native emoji reaction popup with long-press drag-to-select, hover labels, and spring animations.
+
+Together they form a complete reaction system:
+
+1. User long-presses a message/post -> `expo-native-emojis-popup` shows the quick reaction tray
+2. User taps the plus button -> your app presents `expo-native-sheet-emojis` for the full emoji catalog
+3. Selected emoji flows back into your reaction system
+
+```typescript
+import { EmojisPopupModule } from 'expo-native-emojis-popup';
+import { EmojiSheetModule } from 'expo-native-sheet-emojis';
+
+const result = await EmojisPopupModule.show({
+  anchorId: 'message:42',
+  items: [
+    { emoji: '❤️', emoji_name: 'Red Heart', id: 'heart' },
+    { emoji: '👍', emoji_name: 'Thumbs Up', id: 'thumbsup' },
+    { emoji: '😂', emoji_name: 'Face with Tears of Joy', id: 'laugh' },
+  ],
+  plusEnabled: true,
+});
+
+if (result.type === 'plus') {
+  // Open the full emoji picker
+  const sheetResult = await EmojiSheetModule.present({ theme: 'dark' });
+  if (!sheetResult.cancelled) {
+    handleReaction(sheetResult.emoji);
+  }
+} else if (result.type === 'select') {
+  handleReaction(result.id);
+}
+```
+
 ## LLM / AI Agent Reference
 
 If you're an AI agent or using an LLM to integrate this module, see [llms.txt](https://raw.githubusercontent.com/efstathiosntonas/expo-native-sheet-emojis/refs/heads/main/llms.txt) for a concise, structured reference with all types, APIs, and usage patterns.

package/android/src/main/java/expo/community/modules/emojisheet/EmojiSkinTonePicker.kt

@@ -111,12 +111,16 @@ class EmojiSkinTonePicker(
             }
         }
 
-        // Position above anchor
-        val location = IntArray(2)
-        anchorView.getLocationOnScreen(location)
-        val xOff = -(totalWidth / 2) + (anchorView.width / 2)
-        val yOff = -totalHeight - (4 * density).toInt()
+        // Use window-relative coordinates to avoid RTL xOff flip and status bar offset
+        val anchorLocation = IntArray(2)
+        anchorView.getLocationInWindow(anchorLocation)
+        val windowWidth = anchorView.rootView.width
+        val edgePadding = (8 * density).toInt()
 
-        popup.showAsDropDown(anchorView, xOff, yOff)
+        val idealLeft = anchorLocation[0] + anchorView.width / 2 - totalWidth / 2
+        val clampedLeft = idealLeft.coerceIn(edgePadding, windowWidth - totalWidth - edgePadding)
+        val popupTop = anchorLocation[1] - totalHeight - (4 * density).toInt()
+
+        popup.showAtLocation(anchorView.rootView, Gravity.NO_GRAVITY, clampedLeft, popupTop)
     }
 }

package/ios/EmojiGridView.swift

@@ -357,7 +357,8 @@ class EmojiGridView: UIView, UICollectionViewDataSource, UICollectionViewDelegat
         dismissSkinTonePicker()
 
         guard let cell = collectionView.cellForItem(at: indexPath) else { return }
-        let cellFrameInSelf = collectionView.convert(cell.frame, to: self)
+        let targetView = superview ?? self
+        let cellFrameInTarget = collectionView.convert(cell.frame, to: targetView)
 
         if enableHaptics {
             impactFeedbackMedium.impactOccurred()
@@ -381,19 +382,19 @@ class EmojiGridView: UIView, UICollectionViewDataSource, UICollectionViewDelegat
             self.dismissSkinTonePicker()
         }
 
-        addSubview(picker)
+        targetView.addSubview(picker)
         picker.translatesAutoresizingMaskIntoConstraints = false
 
         let pickerWidth: CGFloat = 6 * 48 + 16
         let pickerHeight: CGFloat = 56
 
-        var centerX = cellFrameInSelf.midX
+        var centerX = cellFrameInTarget.midX
         let halfWidth = pickerWidth / 2
-        centerX = max(halfWidth + 4, min(bounds.width - halfWidth - 4, centerX))
+        centerX = max(halfWidth + 8, min(targetView.bounds.width - halfWidth - 8, centerX))
 
         NSLayoutConstraint.activate([
-            picker.centerXAnchor.constraint(equalTo: leadingAnchor, constant: centerX),
-            picker.bottomAnchor.constraint(equalTo: topAnchor, constant: cellFrameInSelf.minY - 4),
+            picker.centerXAnchor.constraint(equalTo: targetView.leftAnchor, constant: centerX),
+            picker.bottomAnchor.constraint(equalTo: targetView.topAnchor, constant: cellFrameInTarget.minY - 4),
             picker.widthAnchor.constraint(equalToConstant: pickerWidth),
             picker.heightAnchor.constraint(equalToConstant: pickerHeight),
         ])

package/ios/EmojiSheetModule.podspec

@@ -1,6 +1,6 @@
 Pod::Spec.new do |s|
   s.name           = 'EmojiSheetModule'
-  s.version        = '2.0.1'
+  s.version        = '2.0.2'
   s.summary        = 'Native emoji picker bottom sheet for React Native'
   s.description    = 'A fully native iOS/Android emoji picker presented in a bottom sheet with search, skin tones, and theming support.'
   s.author         = ''

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "expo-native-sheet-emojis",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "A fully native emoji picker bottom sheet for React Native. Built with Swift and Kotlin for maximum performance. Features search with multilingual keywords, skin tones, frequently used tracking, theming, and configurable layout.",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -32,7 +32,7 @@
     "input"
   ],
   "license": "MIT",
-  "author": "Efstathios Ntonas <efstathiosntonas@gmail.com> (https://github.com/efstathiosntonas)",
+  "author": "Efstathios Ntonas",
   "homepage": "https://github.com/efstathiosntonas/expo-native-sheet-emojis#readme",
   "bugs": {
     "url": "https://github.com/efstathiosntonas/expo-native-sheet-emojis/issues"