@lodev09/react-native-true-sheet 1.1.1 → 2.0.1

package/android/build.gradle

@@ -1,6 +1,7 @@
 buildscript {
-  // Buildscript is evaluated before everything else so we can't use getExtOrDefault
-  def kotlin_version = rootProject.ext.has("kotlinVersion") ? rootProject.ext.get("kotlinVersion") : project.properties["TrueSheet_kotlinVersion"]
+  ext.getExtOrDefault = {name ->
+    return rootProject.ext.has(name) ? rootProject.ext.get(name) : project.properties['TrueSheet_' + name]
+  }
 
   repositories {
     google()
@@ -8,16 +9,12 @@ buildscript {
   }
 
   dependencies {
-    classpath "com.android.tools.build:gradle:7.2.1"
+    classpath "com.android.tools.build:gradle:8.7.2"
     // noinspection DifferentKotlinGradleVersion
-    classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
+    classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:${getExtOrDefault('kotlinVersion')}"
   }
 }
 
-def reactNativeArchitectures() {
-  def value = rootProject.getProperties().get("reactNativeArchitectures")
-  return value ? value.split(",") : ["armeabi-v7a", "x86", "x86_64", "arm64-v8a"]
-}
 
 def isNewArchitectureEnabled() {
   return rootProject.hasProperty("newArchEnabled") && rootProject.getProperty("newArchEnabled") == "true"
@@ -26,14 +23,13 @@ def isNewArchitectureEnabled() {
 apply plugin: "com.android.library"
 apply plugin: "kotlin-android"
 
+// TODO:
+// When running example, comment this block!
+// Not sure what's going on but we are getting multiple definition error when this is enabled.
 if (isNewArchitectureEnabled()) {
   apply plugin: "com.facebook.react"
 }
 
-def getExtOrDefault(name) {
-  return rootProject.ext.has(name) ? rootProject.ext.get(name) : project.properties["TrueSheet_" + name]
-}
-
 def getExtOrIntegerDefault(name) {
   return rootProject.ext.has(name) ? rootProject.ext.get(name) : (project.properties["TrueSheet_" + name]).toInteger()
 }
@@ -49,7 +45,7 @@ def supportsNamespace() {
 
 android {
   if (supportsNamespace()) {
-    namespace "com.lodev09.truesheet"
+    namespace "com.truesheet"
 
     sourceSets {
       main {
@@ -90,11 +86,8 @@ repositories {
 def kotlin_version = getExtOrDefault("kotlinVersion")
 
 dependencies {
-  // For < 0.71, this will be from the local maven repo
-  // For > 0.71, this will be replaced by `com.facebook.react:react-android:$version` by react gradle plugin
-  //noinspection GradleDynamicVersion
-  implementation "com.facebook.react:react-native:+"
+  implementation "com.facebook.react:react-android"
   implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
-  implementation 'com.google.android.material:material:1.12.0'
+  implementation "com.google.android.material:material:1.12.0"
 }
 

package/android/gradle.properties

@@ -1,5 +1,5 @@
-TrueSheet_kotlinVersion=1.7.0
-TrueSheet_minSdkVersion=21
-TrueSheet_targetSdkVersion=31
-TrueSheet_compileSdkVersion=31
-TrueSheet_ndkversion=21.4.7075529
+TrueSheet_kotlinVersion=2.0.21
+TrueSheet_minSdkVersion=24
+TrueSheet_targetSdkVersion=34
+TrueSheet_compileSdkVersion=35
+TrueSheet_ndkVersion=27.1.12297006

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

@@ -21,9 +21,19 @@ class TrueSheetDialog(private val reactContext: ThemedReactContext, private val
   BottomSheetDialog(reactContext) {
 
   private var keyboardManager = KeyboardManager(reactContext)
-  private var sheetView: ViewGroup
   private var windowAnimation: Int = 0
 
+  // First child of the rootSheetView
+  private val containerView: ViewGroup?
+    get() = if (rootSheetView.childCount > 0) {
+      rootSheetView.getChildAt(0) as? ViewGroup
+    } else {
+      null
+    }
+
+  private val sheetContainerView: ViewGroup?
+    get() = rootSheetView.parent?.let { it as? ViewGroup }
+
   /**
    * Specify whether the sheet background is dimmed.
    * Set to `false` to allow interaction with the background components.
@@ -62,15 +72,22 @@ class TrueSheetDialog(private val reactContext: ThemedReactContext, private val
 
   var cornerRadius: Float = 0f
   var backgroundColor: Int = Color.WHITE
-  var footerView: ViewGroup? = null
+
+  // 1st child is the content view
+  val contentView: ViewGroup?
+    get() = containerView?.getChildAt(0) as? ViewGroup
+
+  // 2nd child is the footer view
+  val footerView: ViewGroup?
+    get() = containerView?.getChildAt(1) as? ViewGroup
 
   var sizes: Array<Any> = arrayOf("medium", "large")
 
   init {
     setContentView(rootSheetView)
 
-    sheetView = rootSheetView.parent as ViewGroup
-    sheetView.setBackgroundColor(Color.TRANSPARENT)
+    sheetContainerView?.setBackgroundColor(backgroundColor)
+    sheetContainerView?.clipToOutline = true
 
     // Setup window params to adjust layout based on Keyboard state
     window?.apply {
@@ -118,7 +135,7 @@ class TrueSheetDialog(private val reactContext: ThemedReactContext, private val
 
     // Use current background color
     background.paint.color = backgroundColor
-    sheetView.background = background
+    sheetContainerView?.background = background
   }
 
   /**
@@ -183,8 +200,10 @@ class TrueSheetDialog(private val reactContext: ThemedReactContext, private val
   }
 
   fun positionFooter() {
-    footerView?.apply {
-      y = (maxScreenHeight - sheetView.top - footerHeight).toFloat()
+    footerView?.let { footer ->
+      sheetContainerView?.let { container ->
+        footer.y = (maxScreenHeight - container.top - footerHeight).toFloat()
+      }
     }
   }
 

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

@@ -0,0 +1,22 @@
+package com.lodev09.truesheet
+
+import com.facebook.react.bridge.Arguments
+import com.facebook.react.bridge.WritableMap
+import com.facebook.react.uimanager.events.Event
+
+class TrueSheetEvent(surfaceId: Int, viewId: Int, private val name: String, private val data: WritableMap?) :
+  Event<TrueSheetEvent>(surfaceId, viewId) {
+  override fun getEventName() = name
+  override fun getEventData(): WritableMap = data ?: Arguments.createMap()
+
+  companion object {
+    const val MOUNT = "topMount"
+    const val PRESENT = "topPresent"
+    const val DISMISS = "topDismiss"
+    const val SIZE_CHANGE = "topSizeChange"
+    const val DRAG_BEGIN = "topDragBegin"
+    const val DRAG_CHANGE = "topDragChange"
+    const val DRAG_END = "topDragEnd"
+    const val CONTAINER_SIZE_CHANGE = "topContainerSizeChange"
+  }
+}

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

@@ -5,19 +5,16 @@ import android.view.View
 import android.view.ViewGroup
 import android.view.ViewStructure
 import android.view.accessibility.AccessibilityEvent
+import com.facebook.react.bridge.Arguments
 import com.facebook.react.bridge.LifecycleEventListener
 import com.facebook.react.bridge.UiThreadUtil
+import com.facebook.react.bridge.WritableMap
 import com.facebook.react.uimanager.ThemedReactContext
 import com.facebook.react.uimanager.UIManagerHelper
 import com.facebook.react.uimanager.events.EventDispatcher
 import com.google.android.material.bottomsheet.BottomSheetBehavior
 import com.lodev09.truesheet.core.RootSheetView
 import com.lodev09.truesheet.core.Utils
-import com.lodev09.truesheet.events.ContainerSizeChangeEvent
-import com.lodev09.truesheet.events.DismissEvent
-import com.lodev09.truesheet.events.MountEvent
-import com.lodev09.truesheet.events.PresentEvent
-import com.lodev09.truesheet.events.SizeChangeEvent
 
 class TrueSheetView(context: Context) :
   ViewGroup(context),
@@ -33,6 +30,11 @@ class TrueSheetView(context: Context) :
   var initialIndex: Int = -1
   var initialIndexAnimated: Boolean = true
 
+  /**
+   * Determines if the sheet is being dragged by the user.
+   */
+  private var isDragging = false
+
   /**
    * Current activeIndex.
    */
@@ -70,7 +72,11 @@ class TrueSheetView(context: Context) :
     // Configure Sheet Dialog
     sheetDialog.apply {
       setOnSizeChangeListener { w, h ->
-        eventDispatcher?.dispatchEvent(ContainerSizeChangeEvent(surfaceId, id, Utils.toDIP(w.toFloat()), Utils.toDIP(h.toFloat())))
+        val data = Arguments.createMap()
+        data.putDouble("width", Utils.toDIP(w.toFloat()).toDouble())
+        data.putDouble("height", Utils.toDIP(h.toFloat()).toDouble())
+
+        dispatchEvent(TrueSheetEvent.CONTAINER_SIZE_CHANGE, data)
       }
 
       // Setup listener when the dialog has been presented.
@@ -92,7 +98,7 @@ class TrueSheetView(context: Context) :
         }
 
         // Dispatch onPresent event
-        eventDispatcher?.dispatchEvent(PresentEvent(surfaceId, id, sheetDialog.getSizeInfoForIndex(currentSizeIndex)))
+        dispatchEvent(TrueSheetEvent.PRESENT, sizeInfoData(getSizeInfoForIndex(currentSizeIndex)))
       }
 
       // Setup listener when the dialog has been dismissed.
@@ -106,13 +112,21 @@ class TrueSheetView(context: Context) :
         }
 
         // Dispatch onDismiss event
-        eventDispatcher?.dispatchEvent(DismissEvent(surfaceId, id))
+        dispatchEvent(TrueSheetEvent.DISMISS)
       }
 
       // Configure sheet behavior events
       behavior.addBottomSheetCallback(
         object : BottomSheetBehavior.BottomSheetCallback() {
           override fun onSlide(sheetView: View, slideOffset: Float) {
+            when (behavior.state) {
+              // For consistency with IOS, we consider SETTLING as dragging change.
+              BottomSheetBehavior.STATE_DRAGGING,
+              BottomSheetBehavior.STATE_SETTLING -> handleDragChange(sheetView)
+
+              else -> { }
+            }
+
             footerView?.let {
               val y = (maxScreenHeight - sheetView.top - footerHeight).toFloat()
               if (slideOffset >= 0) {
@@ -125,23 +139,20 @@ class TrueSheetView(context: Context) :
             }
           }
 
-          override fun onStateChanged(view: View, newState: Int) {
+          override fun onStateChanged(sheetView: View, newState: Int) {
             if (!isShowing) return
 
-            val sizeInfo = getSizeInfoForState(newState)
-            if (sizeInfo == null || sizeInfo.index == currentSizeIndex) return
+            when (newState) {
+              // When changed to dragging, we know that the drag has started
+              BottomSheetBehavior.STATE_DRAGGING -> handleDragBegin(sheetView)
 
-            // Invoke promise when sheet resized programmatically
-            presentPromise?.let { promise ->
-              promise()
-              presentPromise = null
-            }
+              // Either of the following state determines drag end
+              BottomSheetBehavior.STATE_EXPANDED,
+              BottomSheetBehavior.STATE_COLLAPSED,
+              BottomSheetBehavior.STATE_HALF_EXPANDED -> handleDragEnd(newState)
 
-            currentSizeIndex = sizeInfo.index
-            setupDimmedBackground(sizeInfo.index)
-
-            // Dispatch onSizeChange event
-            eventDispatcher?.dispatchEvent(SizeChangeEvent(surfaceId, id, sizeInfo))
+              else -> { }
+            }
           }
         }
       )
@@ -162,39 +173,35 @@ class TrueSheetView(context: Context) :
     // Do nothing as we are laid out by UIManager
   }
 
+  override fun onAttachedToWindow() {
+    super.onAttachedToWindow()
+
+    // Initialize content
+    UiThreadUtil.runOnUiThread {
+      sheetDialog.contentView?.height?.let { setContentHeight(it) }
+      sheetDialog.footerView?.height?.let { setFooterHeight(it) }
+
+      if (initialIndex >= 0) {
+        currentSizeIndex = initialIndex
+        sheetDialog.present(initialIndex, initialIndexAnimated)
+      }
+
+      // Dispatch onMount event
+      dispatchEvent(TrueSheetEvent.MOUNT)
+    }
+  }
+
   override fun onDetachedFromWindow() {
     super.onDetachedFromWindow()
     sheetDialog.dismiss()
   }
 
   override fun addView(child: View, index: Int) {
+    UiThreadUtil.assertOnUiThread()
+    rootSheetView.addView(child, index)
+
     // Hide this host view
     visibility = GONE
-
-    (child as ViewGroup).let {
-      // rootView's first child is the Container View
-      rootSheetView.addView(it, index)
-
-      // Initialize content
-      UiThreadUtil.runOnUiThread {
-        // 1st child is the content view
-        val contentView = it.getChildAt(0) as ViewGroup?
-        setContentHeight(contentView?.height ?: 0)
-
-        // 2nd child is the footer view
-        val footerView = it.getChildAt(1) as ViewGroup?
-        sheetDialog.footerView = footerView
-        setFooterHeight(footerView?.height ?: 0)
-
-        if (initialIndex >= 0) {
-          currentSizeIndex = initialIndex
-          sheetDialog.present(initialIndex, initialIndexAnimated)
-        }
-
-        // Dispatch onMount event
-        eventDispatcher?.dispatchEvent(MountEvent(surfaceId, id))
-      }
-    }
   }
 
   override fun getChildCount(): Int {
@@ -206,10 +213,13 @@ class TrueSheetView(context: Context) :
   override fun getChildAt(index: Int): View = rootSheetView.getChildAt(index)
 
   override fun removeView(child: View) {
+    UiThreadUtil.assertOnUiThread()
     rootSheetView.removeView(child)
   }
 
   override fun removeViewAt(index: Int) {
+    UiThreadUtil.assertOnUiThread()
+
     val child = getChildAt(index)
     rootSheetView.removeView(child)
   }
@@ -239,6 +249,68 @@ class TrueSheetView(context: Context) :
     sheetDialog.dismiss()
   }
 
+  private fun sizeInfoData(sizeInfo: SizeInfo): WritableMap {
+    val data = Arguments.createMap()
+    data.putInt("index", sizeInfo.index)
+    data.putDouble("value", sizeInfo.value.toDouble())
+
+    return data
+  }
+
+  private fun getCurrentSizeInfo(sheetView: View): SizeInfo {
+    val height = sheetDialog.maxScreenHeight - sheetView.top
+    val currentSizeInfo = SizeInfo(currentSizeIndex, Utils.toDIP(height.toFloat()))
+
+    return currentSizeInfo
+  }
+
+  private fun handleDragBegin(sheetView: View) {
+    // Dispatch drag started event
+    dispatchEvent(TrueSheetEvent.DRAG_BEGIN, sizeInfoData(getCurrentSizeInfo(sheetView)))
+    // Flag sheet is being dragged
+    isDragging = true
+  }
+
+  private fun handleDragChange(sheetView: View) {
+    if (!isDragging) return
+
+    // Dispatch drag change event
+    dispatchEvent(TrueSheetEvent.DRAG_CHANGE, sizeInfoData(getCurrentSizeInfo(sheetView)))
+  }
+
+  private fun handleDragEnd(state: Int) {
+    if (!isDragging) return
+
+    // For consistency with IOS,
+    // we only handle state changes after dragging.
+    //
+    // Changing size programmatically is handled via the present method.
+    val sizeInfo = sheetDialog.getSizeInfoForState(state)
+    sizeInfo?.let {
+      // Dispatch drag ended after dragging
+      dispatchEvent(TrueSheetEvent.DRAG_END, sizeInfoData(it))
+      if (it.index != currentSizeIndex) {
+        // Invoke promise when sheet resized programmatically
+        presentPromise?.let { promise ->
+          promise()
+          presentPromise = null
+        }
+
+        currentSizeIndex = it.index
+        sheetDialog.setupDimmedBackground(it.index)
+
+        // Dispatch onSizeChange event
+        dispatchEvent(TrueSheetEvent.SIZE_CHANGE, sizeInfoData(it))
+      }
+    }
+
+    isDragging = false
+  }
+
+  private fun dispatchEvent(name: String, data: WritableMap? = null) {
+    eventDispatcher?.dispatchEvent(TrueSheetEvent(surfaceId, id, name, data))
+  }
+
   private fun configureIfShowing() {
     if (sheetDialog.isShowing) {
       sheetDialog.configure()
@@ -322,11 +394,21 @@ class TrueSheetView(context: Context) :
    * Present the sheet at given size index.
    */
   fun present(sizeIndex: Int, promiseCallback: () -> Unit) {
-    if (!sheetDialog.isShowing) {
-      currentSizeIndex = sizeIndex
+    UiThreadUtil.assertOnUiThread()
+
+    currentSizeIndex = sizeIndex
+
+    if (sheetDialog.isShowing) {
+      // For consistency with IOS, we are not waiting
+      // for the state to change before dispatching onSizeChange event.
+      val sizeInfo = sheetDialog.getSizeInfoForIndex(sizeIndex)
+      dispatchEvent(TrueSheetEvent.SIZE_CHANGE, sizeInfoData(sizeInfo))
+
+      promiseCallback()
+    } else {
+      presentPromise = promiseCallback
     }
 
-    presentPromise = promiseCallback
     sheetDialog.present(sizeIndex)
   }
 
@@ -334,11 +416,9 @@ class TrueSheetView(context: Context) :
    * Dismisses the sheet.
    */
   fun dismiss(promiseCallback: () -> Unit) {
+    UiThreadUtil.assertOnUiThread()
+
     dismissPromise = promiseCallback
     sheetDialog.dismiss()
   }
-
-  companion object {
-    const val TAG = "TrueSheetView"
-  }
 }

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

@@ -11,11 +11,6 @@ import com.facebook.react.uimanager.ThemedReactContext
 import com.facebook.react.uimanager.ViewGroupManager
 import com.facebook.react.uimanager.annotations.ReactProp
 import com.lodev09.truesheet.core.Utils
-import com.lodev09.truesheet.events.ContainerSizeChangeEvent
-import com.lodev09.truesheet.events.DismissEvent
-import com.lodev09.truesheet.events.MountEvent
-import com.lodev09.truesheet.events.PresentEvent
-import com.lodev09.truesheet.events.SizeChangeEvent
 
 class TrueSheetViewManager : ViewGroupManager<TrueSheetView>() {
   override fun getName() = TAG
@@ -27,14 +22,17 @@ class TrueSheetViewManager : ViewGroupManager<TrueSheetView>() {
     view.onHostDestroy()
   }
 
-  override fun getExportedCustomDirectEventTypeConstants(): MutableMap<String, Any>? =
-    MapBuilder.builder<String, Any>()
-      .put(MountEvent.EVENT_NAME, MapBuilder.of("registrationName", "onMount"))
-      .put(PresentEvent.EVENT_NAME, MapBuilder.of("registrationName", "onPresent"))
-      .put(DismissEvent.EVENT_NAME, MapBuilder.of("registrationName", "onDismiss"))
-      .put(SizeChangeEvent.EVENT_NAME, MapBuilder.of("registrationName", "onSizeChange"))
-      .put(ContainerSizeChangeEvent.EVENT_NAME, MapBuilder.of("registrationName", "onContainerSizeChange"))
-      .build()
+  override fun getExportedCustomDirectEventTypeConstants(): MutableMap<String, Any> =
+    mutableMapOf(
+      TrueSheetEvent.MOUNT to MapBuilder.of("registrationName", "onMount"),
+      TrueSheetEvent.PRESENT to MapBuilder.of("registrationName", "onPresent"),
+      TrueSheetEvent.DISMISS to MapBuilder.of("registrationName", "onDismiss"),
+      TrueSheetEvent.SIZE_CHANGE to MapBuilder.of("registrationName", "onSizeChange"),
+      TrueSheetEvent.DRAG_BEGIN to MapBuilder.of("registrationName", "onDragBegin"),
+      TrueSheetEvent.DRAG_CHANGE to MapBuilder.of("registrationName", "onDragChange"),
+      TrueSheetEvent.DRAG_END to MapBuilder.of("registrationName", "onDragEnd"),
+      TrueSheetEvent.CONTAINER_SIZE_CHANGE to MapBuilder.of("registrationName", "onContainerSizeChange")
+    )
 
   @ReactProp(name = "edgeToEdge")
   fun setEdgeToEdge(view: TrueSheetView, edgeToEdge: Boolean) {

package/android/src/main/java/com/lodev09/truesheet/core/RootSheetView.kt

@@ -36,15 +36,15 @@ class RootSheetView(private val context: Context?) :
 
   var eventDispatcher: EventDispatcher? = null
 
+  private val reactContext: ThemedReactContext
+    get() = context as ThemedReactContext
+
   init {
     if (ReactFeatureFlags.dispatchPointerEvents) {
       jSPointerDispatcher = JSPointerDispatcher(this)
     }
   }
 
-  private val reactContext: ThemedReactContext
-    get() = context as ThemedReactContext
-
   override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
     super.onSizeChanged(w, h, oldw, oldh)
 
@@ -86,7 +86,7 @@ class RootSheetView(private val context: Context?) :
   }
 
   @Deprecated("Deprecated in Java")
-  override fun onChildStartedNativeGesture(ev: MotionEvent?) {
+  override fun onChildStartedNativeGesture(ev: MotionEvent) {
     eventDispatcher?.let {
       if (ev != null) {
         jSTouchDispatcher.onChildStartedNativeGesture(ev, it)
@@ -94,7 +94,7 @@ class RootSheetView(private val context: Context?) :
     }
   }
 
-  override fun onChildStartedNativeGesture(childView: View, ev: MotionEvent) {
+  override fun onChildStartedNativeGesture(childView: View?, ev: MotionEvent) {
     eventDispatcher?.let { jSTouchDispatcher.onChildStartedNativeGesture(ev, it) }
     jSPointerDispatcher?.onChildStartedNativeGesture(childView, ev, eventDispatcher)
   }

package/ios/Extensions/UIView+pinTo.swift

@@ -66,4 +66,9 @@ extension UIView {
       height: heightConstraint
     ))
   }
+
+  func unpin() {
+    translatesAutoresizingMaskIntoConstraints = true
+    removeConstraints(constraints)
+  }
 }

package/ios/TrueSheetEvent.swift

@@ -0,0 +1,48 @@
+//
+//  Created by Jovanni Lo (@lodev09)
+//  Copyright (c) 2024-present. All rights reserved.
+//
+//  This source code is licensed under the MIT license found in the
+//  LICENSE file in the root directory of this source tree.
+//
+
+class TrueSheetEvent: NSObject, RCTEvent {
+  var viewTag: NSNumber
+
+  private var name: String
+  private var data: [String: Any]?
+
+  var eventName: String {
+    return name
+  }
+
+  var coalescingKey: UInt16 {
+    return 0
+  }
+
+  init(viewTag: NSNumber, name: String, data: [String: Any]?) {
+    self.name = name
+    self.viewTag = viewTag
+    self.data = data
+  }
+
+  static func moduleDotMethod() -> String {
+    return "RCTEventEmitter.receiveEvent"
+  }
+
+  func arguments() -> [Any] {
+    return [
+      viewTag,
+      RCTNormalizeInputEventName(eventName)!,
+      data ?? [:],
+    ]
+  }
+
+  func canCoalesce() -> Bool {
+    return true
+  }
+
+  func coalesce(with newEvent: RCTEvent) -> RCTEvent {
+    return newEvent
+  }
+}