@lodev09/react-native-true-sheet 3.0.0-beta.6 → 3.0.0-beta.8

package/README.md

@@ -13,6 +13,7 @@ The true native bottom sheet experience for your React Native Apps. 💩
 * 🎯 **Type-safe** - Full TypeScript support with Codegen-generated native interfaces
 * 🚀 **Blazing fast** - Direct C++ communication, no bridge overhead
 * 🎨 **Native** - Implemented in the native realm
+* ♿ **Accessible** - Native accessibility and screen reader support out of the box
 * 🔄 **Imperative API** - Asynchronus `ref` [methods](https://sheet.lodev09.com/reference/methods#ref-methods)
 
 ## Installation

package/android/src/main/java/com/lodev09/truesheet/TrueSheetContainerView.kt

@@ -3,82 +3,28 @@ package com.lodev09.truesheet
 import android.annotation.SuppressLint
 import android.view.View
 import androidx.core.view.isNotEmpty
-import com.facebook.react.bridge.WritableNativeMap
-import com.facebook.react.uimanager.PixelUtil.pxToDp
-import com.facebook.react.uimanager.StateWrapper
 import com.facebook.react.uimanager.ThemedReactContext
 import com.facebook.react.views.view.ReactViewGroup
 
-/**
- * Delegate interface for container view changes
- */
 interface TrueSheetContainerViewDelegate {
   fun containerViewContentDidChangeSize(width: Int, height: Int)
+  fun containerViewHeaderDidChangeSize(width: Int, height: Int)
   fun containerViewFooterDidChangeSize(width: Int, height: Int)
 }
 
 /**
- * Container view that manages the bottom sheet content and holds content and footer views.
- * Simplified to be a lightweight content manager - events are now handled via dialog delegate.
+ * Container view that manages the sheet's content, header, and footer views.
+ * Size changes are forwarded to the delegate for sheet reconfiguration.
  */
 @SuppressLint("ViewConstructor")
-class TrueSheetContainerView(private val reactContext: ThemedReactContext) :
+class TrueSheetContainerView(reactContext: ThemedReactContext) :
   ReactViewGroup(reactContext),
   TrueSheetContentViewDelegate,
+  TrueSheetHeaderViewDelegate,
   TrueSheetFooterViewDelegate {
 
   var delegate: TrueSheetContainerViewDelegate? = null
 
-  private var stateWrapper: StateWrapper? = null
-
-  // Pending dimensions to update when stateWrapper becomes available
-  private var pendingWidth: Int = 0
-  private var pendingHeight: Int = 0
-
-  fun setStateWrapper(wrapper: StateWrapper?) {
-    stateWrapper = wrapper
-
-    if (wrapper == null) return
-
-    // Get dimensions from parent controller and update state if we haven't yet
-    val controller = parent as? TrueSheetViewController
-    if (controller != null && pendingWidth == 0) {
-      val w = controller.width
-      val h = controller.height
-      if (w > 0 && h > 0) {
-        updateState(w, h)
-      }
-    }
-  }
-
-  /**
-   * Update state with container dimensions.
-   * Called by the controller when the dialog size changes.
-   */
-  fun updateState(width: Int, height: Int) {
-    // Skip if dimensions haven't changed
-    if (width == pendingWidth && height == pendingHeight && stateWrapper != null) {
-      return
-    }
-
-    // Store dimensions
-    pendingWidth = width
-    pendingHeight = height
-
-    val sw = stateWrapper ?: return
-
-    val realWidth = width.toFloat().pxToDp()
-    val realHeight = height.toFloat().pxToDp()
-
-    val newStateData = WritableNativeMap()
-    newStateData.putDouble("containerWidth", realWidth.toDouble())
-    newStateData.putDouble("containerHeight", realHeight.toDouble())
-    sw.updateState(newStateData)
-  }
-
-  /**
-   * Reference to content view (first child)
-   */
   val contentView: TrueSheetContentView?
     get() = if (isNotEmpty() && getChildAt(0) is TrueSheetContentView) {
       getChildAt(0) as TrueSheetContentView
@@ -86,30 +32,30 @@ class TrueSheetContainerView(private val reactContext: ThemedReactContext) :
       null
     }
 
-  /**
-   * Reference to footer view (second child)
-   */
-  val footerView: TrueSheetFooterView?
-    get() = if (childCount > 1 && getChildAt(1) is TrueSheetFooterView) {
-      getChildAt(1) as TrueSheetFooterView
-    } else {
-      null
+  val headerView: TrueSheetHeaderView?
+    get() {
+      for (i in 0 until childCount) {
+        val child = getChildAt(i)
+        if (child is TrueSheetHeaderView) return child
+      }
+      return null
     }
 
-  /**
-   * The content view height
-   */
-  val contentHeight: Int
-    get() = contentView?.height ?: 0
+  val footerView: TrueSheetFooterView?
+    get() {
+      for (i in 0 until childCount) {
+        val child = getChildAt(i)
+        if (child is TrueSheetFooterView) return child
+      }
+      return null
+    }
 
-  /**
-   * The footer view height
-   */
-  val footerHeight: Int
-    get() = footerView?.height ?: 0
+  var contentHeight: Int = 0
+  var headerHeight: Int = 0
+  var footerHeight: Int = 0
 
   init {
-    // Container should not clip children to allow footer to position absolutely
+    // Allow footer to position outside container bounds
     clipChildren = false
     clipToPadding = false
   }
@@ -117,42 +63,48 @@ class TrueSheetContainerView(private val reactContext: ThemedReactContext) :
   override fun addView(child: View?, index: Int) {
     super.addView(child, index)
 
-    // Set up delegate when content view is added
-    if (child is TrueSheetContentView) {
-      child.delegate = this
-    }
-
-    // Set up delegate when footer view is added
-    if (child is TrueSheetFooterView) {
-      child.delegate = this
+    when (child) {
+      is TrueSheetContentView -> child.delegate = this
+      is TrueSheetHeaderView -> child.delegate = this
+      is TrueSheetFooterView -> child.delegate = this
     }
   }
 
-  override fun removeView(view: View?) {
-    // Clean up delegate when content view is removed
-    if (view is TrueSheetContentView) {
-      view.delegate = null
-    }
+  override fun removeViewAt(index: Int) {
+    val view = getChildAt(index)
+
+    when (view) {
+      is TrueSheetContentView -> view.delegate = null
+
+      is TrueSheetHeaderView -> {
+        view.delegate = null
+        headerViewDidChangeSize(0, 0)
+      }
 
-    // Clean up delegate when footer view is removed
-    if (view is TrueSheetFooterView) {
-      view.delegate = null
+      is TrueSheetFooterView -> view.delegate = null
     }
 
-    super.removeView(view)
+    super.removeViewAt(index)
   }
 
-  // ==================== TrueSheetContentViewDelegate Implementation ====================
+  // ==================== Delegate Implementations ====================
 
   override fun contentViewDidChangeSize(width: Int, height: Int) {
-    // Forward content size changes to controller for sheet resizing
+    contentHeight = height
     delegate?.containerViewContentDidChangeSize(width, height)
   }
 
-  // ==================== TrueSheetFooterViewDelegate Implementation ====================
+  override fun headerViewDidChangeSize(width: Int, height: Int) {
+    headerHeight = height
+    delegate?.containerViewHeaderDidChangeSize(width, height)
+  }
 
   override fun footerViewDidChangeSize(width: Int, height: Int) {
-    // Forward footer size changes to host view for repositioning
+    footerHeight = height
     delegate?.containerViewFooterDidChangeSize(width, height)
   }
+
+  companion object {
+    const val TAG_NAME = "TrueSheet"
+  }
 }

package/android/src/main/java/com/lodev09/truesheet/TrueSheetContainerViewManager.kt

@@ -1,8 +1,6 @@
 package com.lodev09.truesheet
 
 import com.facebook.react.module.annotations.ReactModule
-import com.facebook.react.uimanager.ReactStylesDiffMap
-import com.facebook.react.uimanager.StateWrapper
 import com.facebook.react.uimanager.ThemedReactContext
 import com.facebook.react.uimanager.ViewGroupManager
 
@@ -17,11 +15,6 @@ class TrueSheetContainerViewManager : ViewGroupManager<TrueSheetContainerView>()
 
   override fun createViewInstance(reactContext: ThemedReactContext): TrueSheetContainerView = TrueSheetContainerView(reactContext)
 
-  override fun updateState(view: TrueSheetContainerView, props: ReactStylesDiffMap?, stateWrapper: StateWrapper?): Any? {
-    view.setStateWrapper(stateWrapper)
-    return null
-  }
-
   companion object {
     const val REACT_CLASS = "TrueSheetContainerView"
   }

package/android/src/main/java/com/lodev09/truesheet/TrueSheetContentView.kt

@@ -22,25 +22,17 @@ class TrueSheetContentView(context: ThemedReactContext) : ReactViewGroup(context
   private var lastWidth = 0
   private var lastHeight = 0
 
-  override fun onLayout(
-    changed: Boolean,
-    left: Int,
-    top: Int,
-    right: Int,
-    bottom: Int
-  ) {
-    super.onLayout(changed, left, top, right, bottom)
+  override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
+    super.onSizeChanged(w, h, oldw, oldh)
 
-    // Notify delegate when content size changes
-    val newWidth = right - left
-    val newHeight = bottom - top
-
-    if (newWidth != lastWidth || newHeight != lastHeight) {
-      lastWidth = newWidth
-      lastHeight = newHeight
-
-      // Notify delegate of size change
-      delegate?.contentViewDidChangeSize(newWidth, newHeight)
+    if (w != lastWidth || h != lastHeight) {
+      lastWidth = w
+      lastHeight = h
+      delegate?.contentViewDidChangeSize(w, h)
     }
   }
+
+  companion object {
+    const val TAG_NAME = "TrueSheet"
+  }
 }

package/android/src/main/java/com/lodev09/truesheet/TrueSheetFooterView.kt

@@ -1,7 +1,13 @@
 package com.lodev09.truesheet
 
 import android.annotation.SuppressLint
+import android.view.MotionEvent
+import android.view.View
+import com.facebook.react.uimanager.JSPointerDispatcher
+import com.facebook.react.uimanager.JSTouchDispatcher
+import com.facebook.react.uimanager.RootView
 import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.events.EventDispatcher
 import com.facebook.react.views.view.ReactViewGroup
 
 /**
@@ -15,33 +21,83 @@ interface TrueSheetFooterViewDelegate {
  * Footer view that holds the footer content
  * This is the second child of TrueSheetContainerView
  * Positioned absolutely at the bottom of the sheet
+ *
+ * Implements RootView to handle touch events when positioned outside parent bounds.
  */
 @SuppressLint("ViewConstructor")
-class TrueSheetFooterView(context: ThemedReactContext) : ReactViewGroup(context) {
+class TrueSheetFooterView(private val reactContext: ThemedReactContext) :
+  ReactViewGroup(reactContext),
+  RootView {
+
   var delegate: TrueSheetFooterViewDelegate? = null
+  var eventDispatcher: EventDispatcher? = null
 
   private var lastWidth = 0
   private var lastHeight = 0
 
-  override fun onLayout(
-    changed: Boolean,
-    left: Int,
-    top: Int,
-    right: Int,
-    bottom: Int
-  ) {
-    super.onLayout(changed, left, top, right, bottom)
-
-    // Notify delegate when footer size changes
-    val newWidth = right - left
-    val newHeight = bottom - top
-
-    if (newWidth != lastWidth || newHeight != lastHeight) {
-      lastWidth = newWidth
-      lastHeight = newHeight
-
-      // Notify delegate of size change
-      delegate?.footerViewDidChangeSize(newWidth, newHeight)
+  private val jsTouchDispatcher = JSTouchDispatcher(this)
+  private var jsPointerDispatcher: JSPointerDispatcher? = null
+
+  init {
+    jsPointerDispatcher = JSPointerDispatcher(this)
+  }
+
+  override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
+    super.onSizeChanged(w, h, oldw, oldh)
+
+    if (w != lastWidth || h != lastHeight) {
+      lastWidth = w
+      lastHeight = h
+      delegate?.footerViewDidChangeSize(w, h)
     }
   }
+
+  // ==================== RootView Implementation ====================
+
+  override fun onInterceptTouchEvent(event: MotionEvent): Boolean {
+    eventDispatcher?.let { dispatcher ->
+      jsTouchDispatcher.handleTouchEvent(event, dispatcher, reactContext)
+      jsPointerDispatcher?.handleMotionEvent(event, dispatcher, true)
+    }
+    return super.onInterceptTouchEvent(event)
+  }
+
+  override fun onTouchEvent(event: MotionEvent): Boolean {
+    eventDispatcher?.let { dispatcher ->
+      jsTouchDispatcher.handleTouchEvent(event, dispatcher, reactContext)
+      jsPointerDispatcher?.handleMotionEvent(event, dispatcher, false)
+    }
+    super.onTouchEvent(event)
+    return true
+  }
+
+  override fun onInterceptHoverEvent(event: MotionEvent): Boolean {
+    eventDispatcher?.let { jsPointerDispatcher?.handleMotionEvent(event, it, true) }
+    return super.onHoverEvent(event)
+  }
+
+  override fun onHoverEvent(event: MotionEvent): Boolean {
+    eventDispatcher?.let { jsPointerDispatcher?.handleMotionEvent(event, it, false) }
+    return super.onHoverEvent(event)
+  }
+
+  override fun onChildStartedNativeGesture(childView: View?, ev: MotionEvent) {
+    eventDispatcher?.let { dispatcher ->
+      jsTouchDispatcher.onChildStartedNativeGesture(ev, dispatcher)
+      jsPointerDispatcher?.onChildStartedNativeGesture(childView, ev, dispatcher)
+    }
+  }
+
+  override fun onChildEndedNativeGesture(childView: View, ev: MotionEvent) {
+    eventDispatcher?.let { jsTouchDispatcher.onChildEndedNativeGesture(ev, it) }
+    jsPointerDispatcher?.onChildEndedNativeGesture()
+  }
+
+  override fun handleException(t: Throwable) {
+    reactContext.reactApplicationContext.handleException(RuntimeException(t))
+  }
+
+  companion object {
+    const val TAG_NAME = "TrueSheet"
+  }
 }

package/android/src/main/java/com/lodev09/truesheet/TrueSheetHeaderView.kt

@@ -0,0 +1,38 @@
+package com.lodev09.truesheet
+
+import android.annotation.SuppressLint
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.views.view.ReactViewGroup
+
+/**
+ * Delegate interface for header view size changes
+ */
+interface TrueSheetHeaderViewDelegate {
+  fun headerViewDidChangeSize(width: Int, height: Int)
+}
+
+/**
+ * Header view that holds the header content
+ * Positioned at the top of the sheet content area
+ */
+@SuppressLint("ViewConstructor")
+class TrueSheetHeaderView(context: ThemedReactContext) : ReactViewGroup(context) {
+  var delegate: TrueSheetHeaderViewDelegate? = null
+
+  private var lastWidth = 0
+  private var lastHeight = 0
+
+  override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
+    super.onSizeChanged(w, h, oldw, oldh)
+
+    if (w != lastWidth || h != lastHeight) {
+      lastWidth = w
+      lastHeight = h
+      delegate?.headerViewDidChangeSize(w, h)
+    }
+  }
+
+  companion object {
+    const val TAG_NAME = "TrueSheet"
+  }
+}

package/android/src/main/java/com/lodev09/truesheet/TrueSheetHeaderViewManager.kt

@@ -0,0 +1,21 @@
+package com.lodev09.truesheet
+
+import com.facebook.react.module.annotations.ReactModule
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.ViewGroupManager
+
+/**
+ * ViewManager for TrueSheetHeaderView
+ * Manages the header area of the sheet
+ */
+@ReactModule(name = TrueSheetHeaderViewManager.REACT_CLASS)
+class TrueSheetHeaderViewManager : ViewGroupManager<TrueSheetHeaderView>() {
+
+  override fun getName(): String = REACT_CLASS
+
+  override fun createViewInstance(reactContext: ThemedReactContext): TrueSheetHeaderView = TrueSheetHeaderView(reactContext)
+
+  companion object {
+    const val REACT_CLASS = "TrueSheetHeaderView"
+  }
+}

package/android/src/main/java/com/lodev09/truesheet/TrueSheetPackage.kt

@@ -39,6 +39,7 @@ class TrueSheetPackage : TurboReactPackage() {
       TrueSheetViewManager(),
       TrueSheetContainerViewManager(),
       TrueSheetContentViewManager(),
+      TrueSheetHeaderViewManager(),
       TrueSheetFooterViewManager()
     )
 }