expo-native-sheet-emojis 2.0.4 → 2.1.0

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

@@ -9,11 +9,14 @@ import android.view.ViewGroup
 import android.view.animation.AccelerateDecelerateInterpolator
 import android.view.WindowManager
 import android.view.inputmethod.InputMethodManager
+import android.widget.Button
+import android.widget.FrameLayout
+import android.widget.LinearLayout
+import androidx.core.view.AccessibilityDelegateCompat
 import androidx.core.view.ViewCompat
 import androidx.core.view.WindowCompat
 import androidx.core.view.WindowInsetsCompat
-import android.widget.FrameLayout
-import android.widget.LinearLayout
+import androidx.core.view.accessibility.AccessibilityNodeInfoCompat
 import com.google.android.material.bottomsheet.BottomSheetBehavior
 import com.google.android.material.bottomsheet.BottomSheetDialog
 import expo.modules.kotlin.Promise
@@ -250,19 +253,37 @@ class EmojiSheetModule : Module() {
         }
 
         // Drag handle
+        val handleTargetHeight = (24 * density).toInt()
         val handleBar = View(activity).apply {
             val width = (40 * density).toInt()
             val height = (4 * density).toInt()
-            layoutParams = LinearLayout.LayoutParams(width, height).apply {
-                gravity = Gravity.CENTER_HORIZONTAL
+            layoutParams = FrameLayout.LayoutParams(width, height, Gravity.TOP or Gravity.CENTER_HORIZONTAL).apply {
                 topMargin = (8 * density).toInt()
-                bottomMargin = (4 * density).toInt()
             }
             background = GradientDrawable().apply {
                 setColor(handleColor)
                 cornerRadius = height / 2f
             }
         }
+        val handleTouchTarget = FrameLayout(activity).apply {
+            layoutParams = LinearLayout.LayoutParams(
+                LinearLayout.LayoutParams.MATCH_PARENT,
+                handleTargetHeight
+            )
+            contentDescription = "Dismiss emoji sheet"
+            importantForAccessibility = View.IMPORTANT_FOR_ACCESSIBILITY_YES
+            isClickable = true
+            isFocusable = true
+            setOnClickListener { dismissSheet(cancelled = true) }
+            ViewCompat.setAccessibilityDelegate(this, object : AccessibilityDelegateCompat() {
+                override fun onInitializeAccessibilityNodeInfo(host: View, info: AccessibilityNodeInfoCompat) {
+                    super.onInitializeAccessibilityNodeInfo(host, info)
+                    info.className = Button::class.java.name
+                    info.hintText = "Double tap to dismiss."
+                }
+            })
+            addView(handleBar)
+        }
 
         // Container
         val halfExpandedRatio = (snapPoints.firstOrNull()?.toFloat() ?: 0.5f).coerceIn(0.05f, 1f)
@@ -285,7 +306,7 @@ class EmojiSheetModule : Module() {
             }
             clipToOutline = true
             outlineProvider = android.view.ViewOutlineProvider.BACKGROUND
-            addView(handleBar)
+            addView(handleTouchTarget)
             val pickerLp = LinearLayout.LayoutParams(
                 LinearLayout.LayoutParams.MATCH_PARENT, 0, 1f
             )

package/ios/EmojiSheetModule.podspec

@@ -1,6 +1,6 @@
 Pod::Spec.new do |s|
   s.name           = 'EmojiSheetModule'
-  s.version        = '2.0.4'
+  s.version        = '2.1.0'
   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/ios/EmojiSheetModule.swift

@@ -337,6 +337,7 @@ private final class SheetViewController: UIViewController, UIGestureRecognizerDe
 
     private let backdropView = UIView()
     private let sheetContainerView = UIView()
+    private let grabberHitAreaView = UIControl()
     private let grabberView = UIView()
     private let contentContainerView = UIView()
     private let backdropColor: UIColor
@@ -411,6 +412,11 @@ private final class SheetViewController: UIViewController, UIGestureRecognizerDe
         applyDetentLayout(currentDetent)
     }
 
+    override func accessibilityPerformEscape() -> Bool {
+        requestDismiss()
+        return true
+    }
+
     func embedPickerView(_ embeddedView: UIView) {
         embeddedView.translatesAutoresizingMaskIntoConstraints = false
         contentContainerView.addSubview(embeddedView)
@@ -574,9 +580,7 @@ private final class SheetViewController: UIViewController, UIGestureRecognizerDe
         let dismissalThreshold = max(sheetContainerView.bounds.height * 0.5, 1)
         let shouldDismiss = distance >= dismissalThreshold || velocity >= 1400
         if shouldDismiss {
-            dismissSheet { [weak self] in
-                self?.onDismiss?()
-            }
+            requestDismiss()
             return
         }
 
@@ -632,17 +636,28 @@ private final class SheetViewController: UIViewController, UIGestureRecognizerDe
         sheetContainerView.layer.maskedCorners = [.layerMinXMinYCorner, .layerMaxXMinYCorner]
         sheetContainerView.layer.masksToBounds = true
 
+        grabberHitAreaView.translatesAutoresizingMaskIntoConstraints = false
+        grabberHitAreaView.backgroundColor = .clear
+        grabberHitAreaView.isAccessibilityElement = true
+        grabberHitAreaView.accessibilityLabel = "Dismiss emoji sheet"
+        grabberHitAreaView.accessibilityHint = "Double-tap to dismiss."
+        grabberHitAreaView.accessibilityTraits = .button
+        grabberHitAreaView.addTarget(self, action: #selector(handleGrabberTap), for: .touchUpInside)
+
         grabberView.translatesAutoresizingMaskIntoConstraints = false
         grabberView.backgroundColor = theme.handleColor
         grabberView.layer.cornerRadius = Layout.grabberHeight / 2
+        grabberView.isUserInteractionEnabled = false
 
         contentContainerView.translatesAutoresizingMaskIntoConstraints = false
         contentContainerView.backgroundColor = .clear
 
+        sheetContainerView.accessibilityViewIsModal = true
         view.addSubview(backdropView)
         view.addSubview(sheetContainerView)
         sheetContainerView.addSubview(contentContainerView)
-        sheetContainerView.addSubview(grabberView)
+        sheetContainerView.addSubview(grabberHitAreaView)
+        grabberHitAreaView.addSubview(grabberView)
 
         if gestureEnabled {
             let panGesture = UIPanGestureRecognizer(target: self, action: #selector(handleSheetPan(_:)))
@@ -668,11 +683,16 @@ private final class SheetViewController: UIViewController, UIGestureRecognizerDe
             sheetContainerView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
             sheetBottomConstraint,
 
+            grabberHitAreaView.topAnchor.constraint(equalTo: sheetContainerView.topAnchor),
+            grabberHitAreaView.centerXAnchor.constraint(equalTo: sheetContainerView.centerXAnchor),
+            grabberHitAreaView.widthAnchor.constraint(equalToConstant: 96),
+            grabberHitAreaView.heightAnchor.constraint(equalToConstant: 24),
+
             grabberView.topAnchor.constraint(
-                equalTo: sheetContainerView.topAnchor,
+                equalTo: grabberHitAreaView.topAnchor,
                 constant: Layout.grabberTopInset
             ),
-            grabberView.centerXAnchor.constraint(equalTo: sheetContainerView.centerXAnchor),
+            grabberView.centerXAnchor.constraint(equalTo: grabberHitAreaView.centerXAnchor),
             grabberView.widthAnchor.constraint(equalToConstant: Layout.grabberWidth),
             grabberView.heightAnchor.constraint(equalToConstant: Layout.grabberHeight),
 
@@ -684,6 +704,15 @@ private final class SheetViewController: UIViewController, UIGestureRecognizerDe
     }
 
     @objc private func handleBackdropTap() {
+        requestDismiss()
+    }
+
+    @objc private func handleGrabberTap() {
+        requestDismiss()
+    }
+
+    private func requestDismiss() {
+        guard !isAnimatingDismissal else { return }
         dismissSheet { [weak self] in
             self?.onDismiss?()
         }
@@ -713,9 +742,7 @@ private final class SheetViewController: UIViewController, UIGestureRecognizerDe
                 velocityY > Layout.dismissVelocityThreshold
 
             if shouldDismiss {
-                dismissSheet { [weak self] in
-                    self?.onDismiss?()
-                }
+                requestDismiss()
             } else {
                 let targetDetent: Detent
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "expo-native-sheet-emojis",
-  "version": "2.0.4",
+  "version": "2.1.0",
   "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",