Feat: Drag events

android/build.gradle

@@ -1,23 +1,20 @@
 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()
     mavenCentral()
   }
 
   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"
 }
 

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

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

@@ -70,7 +70,9 @@ class TrueSheetDialog(private val reactContext: ThemedReactContext, private val
     setContentView(rootSheetView)
 
     sheetView = rootSheetView.parent as ViewGroup
-    sheetView.setBackgroundColor(Color.TRANSPARENT)
+
+    sheetView.setBackgroundColor(backgroundColor)
+    sheetView.clipToOutline = true
 
     // Setup window params to adjust layout based on Keyboard state
     window?.apply {

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

@@ -15,6 +15,9 @@ 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.DragBeginEvent
+import com.lodev09.truesheet.events.DragChangeEvent
+import com.lodev09.truesheet.events.DragEndEvent
 import com.lodev09.truesheet.events.MountEvent
 import com.lodev09.truesheet.events.PresentEvent
 import com.lodev09.truesheet.events.SizeChangeEvent
@@ -33,6 +36,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.
    */
@@ -113,6 +121,22 @@ class TrueSheetView(context: Context) :
       behavior.addBottomSheetCallback(
         object : BottomSheetBehavior.BottomSheetCallback() {
           override fun onSlide(sheetView: View, slideOffset: Float) {
+            if (isDragging) {
+              when (sheetDialog.behavior.state) {
+                // For consistency with IOS, we consider SETTLING as dragging change.
+                BottomSheetBehavior.STATE_DRAGGING,
+                BottomSheetBehavior.STATE_SETTLING -> {
+                  val height = maxScreenHeight - sheetView.top
+                  val sizeInfo = SizeInfo(currentSizeIndex, Utils.toDIP(height.toFloat()))
+
+                  // Dispatch drag change event
+                  eventDispatcher?.dispatchEvent(DragChangeEvent(surfaceId, id, sizeInfo))
+                }
+
+                else -> { }
+              }
+            }
+
             footerView?.let {
               val y = (maxScreenHeight - sheetView.top - footerHeight).toFloat()
               if (slideOffset >= 0) {
@@ -125,23 +149,55 @@ 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
+            val height = maxScreenHeight - sheetView.top
+            val currentSizeInfo = SizeInfo(currentSizeIndex, Utils.toDIP(height.toFloat()))
 
-            // Invoke promise when sheet resized programmatically
-            presentPromise?.let { promise ->
-              promise()
-              presentPromise = null
-            }
+            when (newState) {
+              // When changed to dragging, we know that the drag has started
+              BottomSheetBehavior.STATE_DRAGGING -> {
+                // Dispatch drag started event
+                eventDispatcher?.dispatchEvent(DragBeginEvent(surfaceId, id, currentSizeInfo))
 
-            currentSizeIndex = sizeInfo.index
-            setupDimmedBackground(sizeInfo.index)
+                // Flag sheet is being dragged
+                isDragging = true
+              }
+
+              BottomSheetBehavior.STATE_EXPANDED,
+              BottomSheetBehavior.STATE_COLLAPSED,
+              BottomSheetBehavior.STATE_HALF_EXPANDED -> {
+                // For consistency with IOS,
+                // we only handle state changes after dragging.
+                //
+                // Changing size programmatically is handled via the present method.
+                if (isDragging) {
+                  val sizeInfo = getSizeInfoForState(newState)
+                  sizeInfo?.let {
+                    // Dispatch drag ended after dragging
+                    eventDispatcher?.dispatchEvent(DragEndEvent(surfaceId, id, it))
+                    if (it.index != currentSizeIndex) {
+                      // Invoke promise when sheet resized programmatically
+                      presentPromise?.let { promise ->
+                        promise()
+                        presentPromise = null
+                      }
+
+                      currentSizeIndex = it.index
+                      setupDimmedBackground(it.index)
+
+                      // Dispatch onSizeChange event
+                      eventDispatcher?.dispatchEvent(SizeChangeEvent(surfaceId, id, it))
+                    }
+                  }
+
+                  isDragging = false
+                }
+              }
 
-            // Dispatch onSizeChange event
-            eventDispatcher?.dispatchEvent(SizeChangeEvent(surfaceId, id, sizeInfo))
+              else -> { }
+            }
           }
         }
       )
@@ -322,11 +378,19 @@ class TrueSheetView(context: Context) :
    * Present the sheet at given size index.
    */
   fun present(sizeIndex: Int, promiseCallback: () -> Unit) {
-    if (!sheetDialog.isShowing) {
-      currentSizeIndex = sizeIndex
+    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)
+      eventDispatcher?.dispatchEvent(SizeChangeEvent(surfaceId, id, sizeInfo))
+
+      promiseCallback()
+    } else {
+      presentPromise = promiseCallback
     }
 
-    presentPromise = promiseCallback
     sheetDialog.present(sizeIndex)
   }
 

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

@@ -13,6 +13,9 @@ 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.DragBeginEvent
+import com.lodev09.truesheet.events.DragChangeEvent
+import com.lodev09.truesheet.events.DragEndEvent
 import com.lodev09.truesheet.events.MountEvent
 import com.lodev09.truesheet.events.PresentEvent
 import com.lodev09.truesheet.events.SizeChangeEvent
@@ -33,6 +36,9 @@ class TrueSheetViewManager : ViewGroupManager<TrueSheetView>() {
       .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(DragBeginEvent.EVENT_NAME, MapBuilder.of("registrationName", "onDragBegin"))
+      .put(DragChangeEvent.EVENT_NAME, MapBuilder.of("registrationName", "onDragChange"))
+      .put(DragEndEvent.EVENT_NAME, MapBuilder.of("registrationName", "onDragEnd"))
       .put(ContainerSizeChangeEvent.EVENT_NAME, MapBuilder.of("registrationName", "onContainerSizeChange"))
       .build()
 

android/src/main/java/com/lodev09/truesheet/events/DragBeginEvent.kt

@@ -0,0 +1,24 @@
+package com.lodev09.truesheet.events
+
+import com.facebook.react.bridge.Arguments
+import com.facebook.react.bridge.WritableMap
+import com.facebook.react.uimanager.events.Event
+import com.lodev09.truesheet.SizeInfo
+
+// onDragBegin
+class DragBeginEvent(surfaceId: Int, viewId: Int, private val sizeInfo: SizeInfo) : Event<DragBeginEvent>(surfaceId, viewId) {
+
+  override fun getEventName() = EVENT_NAME
+
+  override fun getEventData(): WritableMap {
+    val data = Arguments.createMap()
+    data.putInt("index", sizeInfo.index)
+    data.putDouble("value", sizeInfo.value.toDouble())
+
+    return data
+  }
+
+  companion object {
+    const val EVENT_NAME = "dragBegin"
+  }
+}

android/src/main/java/com/lodev09/truesheet/events/DragChangeEvent.kt

@@ -0,0 +1,24 @@
+package com.lodev09.truesheet.events
+
+import com.facebook.react.bridge.Arguments
+import com.facebook.react.bridge.WritableMap
+import com.facebook.react.uimanager.events.Event
+import com.lodev09.truesheet.SizeInfo
+
+// onDragBegin
+class DragChangeEvent(surfaceId: Int, viewId: Int, private val sizeInfo: SizeInfo) : Event<DragChangeEvent>(surfaceId, viewId) {
+
+  override fun getEventName() = EVENT_NAME
+
+  override fun getEventData(): WritableMap {
+    val data = Arguments.createMap()
+    data.putInt("index", sizeInfo.index)
+    data.putDouble("value", sizeInfo.value.toDouble())
+
+    return data
+  }
+
+  companion object {
+    const val EVENT_NAME = "dragChange"
+  }
+}

android/src/main/java/com/lodev09/truesheet/events/DragEndEvent.kt

@@ -0,0 +1,24 @@
+package com.lodev09.truesheet.events
+
+import com.facebook.react.bridge.Arguments
+import com.facebook.react.bridge.WritableMap
+import com.facebook.react.uimanager.events.Event
+import com.lodev09.truesheet.SizeInfo
+
+// onDragBegin
+class DragEndEvent(surfaceId: Int, viewId: Int, private val sizeInfo: SizeInfo) : Event<DragChangeEvent>(surfaceId, viewId) {
+
+  override fun getEventName() = EVENT_NAME
+
+  override fun getEventData(): WritableMap {
+    val data = Arguments.createMap()
+    data.putInt("index", sizeInfo.index)
+    data.putDouble("value", sizeInfo.value.toDouble())
+
+    return data
+  }
+
+  companion object {
+    const val EVENT_NAME = "dragEnd"
+  }
+}

docs/blog/2024/welcome.mdx

@@ -7,3 +7,5 @@ tags: [bottom-sheet, true-sheet, native-sheet]
 ---
 
 ## Hello World!
+
+{/* truncate */}