@swmansion/react-native-bottom-sheet 0.6.3 → 0.7.0-next.1

package/ReactNativeBottomSheet.podspec

@@ -0,0 +1,24 @@
+require "json"
+
+package = JSON.parse(File.read(File.join(__dir__, "package.json")))
+
+Pod::Spec.new do |s|
+  s.name         = "ReactNativeBottomSheet"
+  s.version      = package["version"]
+  s.summary      = package["description"]
+  s.homepage     = package["homepage"]
+  s.license      = package["license"]
+  s.authors      = package["author"]
+
+  s.platforms    = { :ios => min_ios_version_supported }
+  s.source       = { :git => "https://github.com/software-mansion-labs/react-native-bottom-sheet.git", :tag => "#{s.version}" }
+
+  s.source_files = "ios/**/*.{h,m,mm,cpp,swift}"
+  s.private_header_files = "ios/**/*.h"
+  s.swift_version = "5.0"
+  s.pod_target_xcconfig = {
+    "DEFINES_MODULE" => "YES"
+  }
+
+  install_modules_dependencies(s)
+end

package/android/build.gradle

@@ -0,0 +1,68 @@
+buildscript {
+  ext.ReactNativeBottomSheet = [
+    kotlinVersion: "2.0.21",
+    minSdkVersion: 24,
+    compileSdkVersion: 36,
+    targetSdkVersion: 36
+  ]
+
+  ext.getExtOrDefault = { prop ->
+    if (rootProject.ext.has(prop)) {
+      return rootProject.ext.get(prop)
+    }
+
+    return ReactNativeBottomSheet[prop]
+  }
+
+  repositories {
+    google()
+    mavenCentral()
+  }
+
+  dependencies {
+    classpath "com.android.tools.build:gradle:8.7.2"
+    // noinspection DifferentKotlinGradleVersion
+    classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:${getExtOrDefault('kotlinVersion')}"
+  }
+}
+
+
+apply plugin: "com.android.library"
+apply plugin: "kotlin-android"
+
+apply plugin: "com.facebook.react"
+
+android {
+  namespace "com.swmansion.reactnativebottomsheet"
+
+  compileSdkVersion getExtOrDefault("compileSdkVersion")
+
+  defaultConfig {
+    minSdkVersion getExtOrDefault("minSdkVersion")
+    targetSdkVersion getExtOrDefault("targetSdkVersion")
+  }
+
+  buildFeatures {
+    buildConfig true
+  }
+
+  buildTypes {
+    release {
+      minifyEnabled false
+    }
+  }
+
+  lint {
+    disable "GradleCompatible"
+  }
+
+  compileOptions {
+    sourceCompatibility JavaVersion.VERSION_1_8
+    targetCompatibility JavaVersion.VERSION_1_8
+  }
+}
+
+dependencies {
+  implementation "com.facebook.react:react-android"
+  implementation "androidx.dynamicanimation:dynamicanimation:1.0.0"
+}

package/android/src/main/AndroidManifest.xml

@@ -0,0 +1,2 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+</manifest>

package/android/src/main/java/com/swmansion/reactnativebottomsheet/BottomSheetPackage.kt

@@ -0,0 +1,14 @@
+package com.swmansion.reactnativebottomsheet
+
+import com.facebook.react.ReactPackage
+import com.facebook.react.bridge.NativeModule
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.uimanager.ViewManager
+
+class BottomSheetPackage : ReactPackage {
+  override fun createNativeModules(reactContext: ReactApplicationContext): List<NativeModule> =
+    emptyList()
+
+  override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> =
+    listOf(BottomSheetViewManager())
+}

package/android/src/main/java/com/swmansion/reactnativebottomsheet/BottomSheetView.kt

@@ -0,0 +1,412 @@
+package com.swmansion.reactnativebottomsheet
+
+import android.content.Context
+import android.view.Choreographer
+import android.view.MotionEvent
+import android.view.VelocityTracker
+import android.view.View
+import android.view.ViewConfiguration
+import android.view.ViewGroup
+import android.widget.FrameLayout
+import androidx.dynamicanimation.animation.DynamicAnimation
+import androidx.dynamicanimation.animation.SpringAnimation
+import androidx.dynamicanimation.animation.SpringForce
+import com.facebook.react.uimanager.PointerEvents
+import com.facebook.react.views.view.ReactViewGroup
+import kotlin.math.abs
+
+private data class DetentSpec(val height: Float, val programmatic: Boolean)
+
+interface BottomSheetViewListener {
+  fun onIndexChange(index: Int)
+  fun onPositionChange(position: Double)
+}
+
+class BottomSheetView(context: Context) : ReactViewGroup(context) {
+
+  // MARK: - Listener
+
+  var listener: BottomSheetViewListener? = null
+
+  // MARK: - State
+
+  private var detentSpecs: List<DetentSpec> = emptyList()
+  private var targetIndex: Int = 0
+  var animateIn: Boolean = true
+  private var pendingIndex: Int? = null
+  private var hasLaidOut = false
+  private var isPanning = false
+
+  // MARK: - Internal
+
+  private val sheetContainer = FrameLayout(context)
+  private var activeAnimation: SpringAnimation? = null
+  private var velocityTracker: VelocityTracker? = null
+  private var choreographerCallback: Choreographer.FrameCallback? = null
+  private val density = context.resources.displayMetrics.density
+  private val touchSlop = ViewConfiguration.get(context).scaledTouchSlop
+
+  // Touch tracking
+  private var initialTouchY = 0f
+  private var lastTouchY = 0f
+  private var activePointerId = MotionEvent.INVALID_POINTER_ID
+
+  init {
+    clipChildren = false
+    clipToPadding = false
+    pointerEvents = PointerEvents.BOX_NONE
+    sheetContainer.clipChildren = false
+    sheetContainer.clipToPadding = false
+    super.addView(
+      sheetContainer,
+      LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT),
+    )
+  }
+
+  val sheetChildCount: Int
+    get() = sheetContainer.childCount
+
+  fun getSheetChildAt(index: Int): View? = sheetContainer.getChildAt(index)
+
+  fun addSheetChild(child: View, index: Int) {
+    sheetContainer.addView(child, index)
+  }
+
+  fun removeSheetChildAt(index: Int) {
+    sheetContainer.removeViewAt(index)
+  }
+
+  // MARK: - Child view management
+
+  override fun addView(child: View, index: Int, params: ViewGroup.LayoutParams) {
+    if (child === sheetContainer) {
+      super.addView(child, index, params)
+    } else {
+      sheetContainer.addView(child, index, params)
+    }
+  }
+
+  override fun removeView(view: View) {
+    if (view === sheetContainer) {
+      super.removeView(view)
+    } else {
+      sheetContainer.removeView(view)
+    }
+  }
+
+  override fun removeViewAt(index: Int) {
+    sheetContainer.removeViewAt(index)
+  }
+
+  // MARK: - Layout
+
+  override fun onLayout(changed: Boolean, l: Int, t: Int, r: Int, b: Int) {
+    super.onLayout(changed, l, t, r, b)
+    val w = r - l
+    val h = b - t
+    if (w <= 0 || h <= 0) return
+
+    layoutSheetContainer(w, h)
+
+    if (!hasLaidOut && detentSpecs.isNotEmpty()) {
+      hasLaidOut = true
+      val indexToApply = pendingIndex ?: targetIndex
+      pendingIndex = null
+      targetIndex = indexToApply.coerceIn(0, detentSpecs.size - 1)
+
+      if (animateIn) {
+        val closedTy = detentSpecs.lastOrNull()?.height ?: h.toFloat()
+        sheetContainer.translationY = closedTy
+        emitPosition()
+        snapToIndex(targetIndex, 0f)
+      } else {
+        sheetContainer.translationY = translationY(targetIndex)
+        emitPosition()
+        listener?.onIndexChange(targetIndex)
+      }
+      return
+    }
+
+    if (activeAnimation != null || isPanning) return
+    sheetContainer.translationY = translationY(targetIndex)
+  }
+
+  private fun layoutSheetChildren() {
+    for (i in 0 until sheetContainer.childCount) {
+      val child = sheetContainer.getChildAt(i)
+      child.layout(0, 0, child.measuredWidth, child.measuredHeight)
+    }
+  }
+
+  private fun layoutSheetContainer(viewWidth: Int, viewHeight: Int) {
+    val maxHeight = detentSpecs.lastOrNull()?.height ?: viewHeight.toFloat()
+    val containerTop = (viewHeight - maxHeight).toInt()
+    sheetContainer.layout(0, containerTop, viewWidth, containerTop + maxHeight.toInt())
+    layoutSheetChildren()
+  }
+
+  // MARK: - Prop setters
+
+  fun setDetents(raw: List<Map<String, Any>>) {
+    detentSpecs = raw.mapNotNull { dict ->
+      val height = (dict["height"] as? Number)?.toDouble() ?: return@mapNotNull null
+      val programmatic = dict["programmatic"] as? Boolean ?: false
+      DetentSpec(height = (height * density).toFloat(), programmatic = programmatic)
+    }
+
+    if (width > 0 && height > 0 && detentSpecs.isNotEmpty()) {
+      layoutSheetContainer(width, height)
+
+      if (hasLaidOut && activeAnimation == null && !isPanning) {
+        targetIndex = targetIndex.coerceIn(0, detentSpecs.size - 1)
+        sheetContainer.translationY = translationY(targetIndex)
+        emitPosition()
+      }
+    }
+
+    requestLayout()
+  }
+
+  fun setIndex(newIndex: Int) {
+    if (newIndex < 0) return
+
+    if (!hasLaidOut) {
+      pendingIndex = newIndex
+      targetIndex = newIndex
+      return
+    }
+
+    if (newIndex >= detentSpecs.size || newIndex == targetIndex) return
+    snapToIndex(newIndex, 0f)
+  }
+
+  // MARK: - Snap logic
+
+  private fun translationY(index: Int): Float {
+    val maxHeight = detentSpecs.lastOrNull()?.height ?: height.toFloat()
+    val snapHeight = detentSpecs.getOrNull(index)?.height ?: 0f
+    return maxHeight - snapHeight
+  }
+
+  private val draggableMinTy: Float
+    get() {
+      val highestIndex = detentSpecs.indices.lastOrNull { !detentSpecs[it].programmatic } ?: 0
+      return translationY(highestIndex)
+    }
+
+  private val draggableMaxTy: Float
+    get() {
+      val lowestIndex = detentSpecs.indices.firstOrNull { !detentSpecs[it].programmatic } ?: 0
+      return translationY(lowestIndex)
+    }
+
+  private val isAtMaxDraggable: Boolean
+    get() = sheetContainer.translationY <= draggableMinTy + 1f
+
+  private fun emitPosition() {
+    val maxHeight = detentSpecs.lastOrNull()?.height ?: height.toFloat()
+    val ty = sheetContainer.translationY
+    listener?.onPositionChange(((maxHeight - ty) / density).toDouble())
+  }
+
+  // MARK: - Choreographer (position tracking during animation)
+
+  private fun startChoreographer() {
+    if (choreographerCallback != null) return
+    val callback = object : Choreographer.FrameCallback {
+      override fun doFrame(frameTimeNanos: Long) {
+        emitPosition()
+        choreographerCallback?.let { Choreographer.getInstance().postFrameCallback(it) }
+      }
+    }
+    choreographerCallback = callback
+    Choreographer.getInstance().postFrameCallback(callback)
+  }
+
+  private fun stopChoreographer() {
+    choreographerCallback?.let { Choreographer.getInstance().removeFrameCallback(it) }
+    choreographerCallback = null
+  }
+
+  // MARK: - Spring animation
+
+  private fun snapToIndex(index: Int, velocity: Float) {
+    if (index < 0 || index >= detentSpecs.size) return
+    targetIndex = index
+
+    val targetTy = translationY(index)
+
+    activeAnimation?.cancel()
+
+    val spring = SpringAnimation(sheetContainer, DynamicAnimation.TRANSLATION_Y, targetTy).apply {
+      spring = SpringForce(targetTy).apply {
+        dampingRatio = SpringForce.DAMPING_RATIO_NO_BOUNCY
+        stiffness = SpringForce.STIFFNESS_MEDIUM
+      }
+      setStartVelocity(velocity)
+      addEndListener { _, _, _, _ ->
+        stopChoreographer()
+        emitPosition()
+        activeAnimation = null
+        listener?.onIndexChange(index)
+      }
+    }
+
+    activeAnimation = spring
+    startChoreographer()
+    spring.start()
+  }
+
+  private fun bestSnapIndex(currentHeight: Float, velocity: Float): Int {
+    val draggable = detentSpecs.withIndex().filter { !it.value.programmatic }
+    if (draggable.isEmpty()) return targetIndex
+
+    val flickThreshold = 600f * density
+
+    if (velocity < -flickThreshold) {
+      return draggable.firstOrNull { it.value.height > currentHeight }?.index
+        ?: draggable.lastOrNull()?.index ?: targetIndex
+    }
+    if (velocity > flickThreshold) {
+      return draggable.lastOrNull { it.value.height < currentHeight }?.index
+        ?: draggable.firstOrNull()?.index ?: targetIndex
+    }
+
+    return draggable.minByOrNull { abs(it.value.height - currentHeight) }?.index ?: targetIndex
+  }
+
+  // MARK: - Touch handling
+
+  override fun onInterceptTouchEvent(ev: MotionEvent): Boolean {
+    val sheetTop = sheetContainer.top + sheetContainer.translationY
+    if (ev.y < sheetTop) {
+      return false
+    }
+
+    when (ev.actionMasked) {
+      MotionEvent.ACTION_DOWN -> {
+        initialTouchY = ev.y
+        lastTouchY = ev.y
+        activePointerId = ev.getPointerId(0)
+      }
+      MotionEvent.ACTION_MOVE -> {
+        if (activePointerId == MotionEvent.INVALID_POINTER_ID) return false
+        val pointerIndex = ev.findPointerIndex(activePointerId)
+        if (pointerIndex < 0) return false
+        val y = ev.getY(pointerIndex)
+        val dy = y - initialTouchY
+
+        if (abs(dy) > touchSlop) {
+          if (!isAtMaxDraggable) {
+            lastTouchY = y
+            requestDisallowInterceptTouchEvent(false)
+            return true
+          }
+          if (dy > 0 && isScrollViewAtTop()) {
+            lastTouchY = y
+            requestDisallowInterceptTouchEvent(false)
+            return true
+          }
+        }
+      }
+      MotionEvent.ACTION_UP, MotionEvent.ACTION_CANCEL -> {
+        activePointerId = MotionEvent.INVALID_POINTER_ID
+      }
+    }
+    return false
+  }
+
+  override fun onTouchEvent(event: MotionEvent): Boolean {
+    val sheetTop = sheetContainer.top + sheetContainer.translationY
+    if (event.y < sheetTop) {
+      return false
+    }
+
+    when (event.actionMasked) {
+      MotionEvent.ACTION_DOWN -> {
+        beginPan(event)
+        return true
+      }
+      MotionEvent.ACTION_MOVE -> {
+        if (!isPanning) beginPan(event)
+        val pointerIndex = event.findPointerIndex(activePointerId)
+        if (pointerIndex < 0) return true
+        val y = event.getY(pointerIndex)
+        velocityTracker?.addMovement(event)
+        val dy = y - lastTouchY
+        lastTouchY = y
+
+        val newTy = (sheetContainer.translationY + dy).coerceIn(draggableMinTy, draggableMaxTy)
+        sheetContainer.translationY = newTy
+        emitPosition()
+        return true
+      }
+      MotionEvent.ACTION_UP, MotionEvent.ACTION_CANCEL -> {
+        isPanning = false
+        activePointerId = MotionEvent.INVALID_POINTER_ID
+        val velocity = velocityTracker?.let { tracker ->
+          tracker.computeCurrentVelocity(1000)
+          val v = tracker.yVelocity
+          tracker.recycle()
+          v
+        } ?: 0f
+        velocityTracker = null
+        val maxHeight = detentSpecs.lastOrNull()?.height ?: height.toFloat()
+        val currentHeight = maxHeight - sheetContainer.translationY
+        val index = bestSnapIndex(currentHeight, velocity)
+        snapToIndex(index, velocity)
+        return true
+      }
+      MotionEvent.ACTION_POINTER_UP -> {
+        val actionIndex = event.actionIndex
+        if (event.getPointerId(actionIndex) == activePointerId) {
+          val newIndex = if (actionIndex == 0) 1 else 0
+          activePointerId = event.getPointerId(newIndex)
+          lastTouchY = event.getY(newIndex)
+        }
+        return true
+      }
+    }
+    return super.onTouchEvent(event)
+  }
+
+  private fun beginPan(event: MotionEvent) {
+    isPanning = true
+    activePointerId = event.getPointerId(0)
+    lastTouchY = event.y
+    velocityTracker?.recycle()
+    velocityTracker = VelocityTracker.obtain()
+    velocityTracker?.addMovement(event)
+    activeAnimation?.let {
+      it.cancel()
+      activeAnimation = null
+      stopChoreographer()
+    }
+  }
+
+  // MARK: - Scroll view helpers
+
+  private fun isScrollViewAtTop(): Boolean {
+    val scrollView = findScrollView(sheetContainer) ?: return true
+    return !scrollView.canScrollVertically(-1)
+  }
+
+  private fun findScrollView(view: View): View? {
+    if (view.canScrollVertically(1) || view.canScrollVertically(-1)) return view
+    if (view is ViewGroup) {
+      for (i in 0 until view.childCount) {
+        findScrollView(view.getChildAt(i))?.let { return it }
+      }
+    }
+    return null
+  }
+
+  // MARK: - Cleanup
+
+  fun destroy() {
+    activeAnimation?.cancel()
+    stopChoreographer()
+    velocityTracker?.recycle()
+    velocityTracker = null
+  }
+}

package/android/src/main/java/com/swmansion/reactnativebottomsheet/BottomSheetViewManager.kt

@@ -0,0 +1,105 @@
+package com.swmansion.reactnativebottomsheet
+
+import android.view.View
+import com.facebook.react.bridge.ReadableArray
+import com.facebook.react.module.annotations.ReactModule
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.ViewGroupManager
+import com.facebook.react.uimanager.ViewManagerDelegate
+import com.facebook.react.uimanager.annotations.ReactProp
+import com.facebook.react.viewmanagers.BottomSheetViewManagerDelegate
+import com.facebook.react.viewmanagers.BottomSheetViewManagerInterface
+
+@ReactModule(name = BottomSheetViewManager.NAME)
+class BottomSheetViewManager :
+  ViewGroupManager<BottomSheetView>(),
+  BottomSheetViewManagerInterface<BottomSheetView> {
+
+  companion object {
+    const val NAME = "BottomSheetView"
+  }
+
+  private val delegate = BottomSheetViewManagerDelegate(this)
+
+  override fun getDelegate(): ViewManagerDelegate<BottomSheetView> = delegate
+
+  override fun getName(): String = NAME
+
+  override fun createViewInstance(context: ThemedReactContext): BottomSheetView {
+    val view = BottomSheetView(context)
+    view.listener = object : BottomSheetViewListener {
+      override fun onIndexChange(index: Int) {
+        val event = com.facebook.react.bridge.Arguments.createMap().apply {
+          putInt("index", index)
+        }
+        val reactContext = view.context as? ThemedReactContext ?: return
+        reactContext
+          .getJSModule(com.facebook.react.uimanager.events.RCTEventEmitter::class.java)
+          .receiveEvent(view.id, "topIndexChange", event)
+      }
+
+      override fun onPositionChange(position: Double) {
+        val event = com.facebook.react.bridge.Arguments.createMap().apply {
+          putDouble("position", position)
+        }
+        val reactContext = view.context as? ThemedReactContext ?: return
+        reactContext
+          .getJSModule(com.facebook.react.uimanager.events.RCTEventEmitter::class.java)
+          .receiveEvent(view.id, "topPositionChange", event)
+      }
+    }
+    return view
+  }
+
+  override fun addView(parent: BottomSheetView, child: View, index: Int) {
+    parent.addSheetChild(child, index)
+  }
+
+  override fun getChildCount(parent: BottomSheetView): Int = parent.sheetChildCount
+
+  override fun getChildAt(parent: BottomSheetView, index: Int): View? = parent.getSheetChildAt(index)
+
+  override fun removeViewAt(parent: BottomSheetView, index: Int) {
+    parent.removeSheetChildAt(index)
+  }
+
+  override fun needsCustomLayoutForChildren(): Boolean = true
+
+  override fun getExportedCustomDirectEventTypeConstants(): Map<String, Any> {
+    return mapOf(
+      "topIndexChange" to mapOf("registrationName" to "onIndexChange"),
+      "topPositionChange" to mapOf("registrationName" to "onPositionChange"),
+    )
+  }
+
+  @ReactProp(name = "detents")
+  override fun setDetents(view: BottomSheetView, detents: ReadableArray?) {
+    if (detents == null) return
+    val list = mutableListOf<Map<String, Any>>()
+    for (i in 0 until detents.size()) {
+      val map = detents.getMap(i) ?: continue
+      list.add(
+        mapOf(
+          "height" to map.getDouble("height"),
+          "programmatic" to map.getBoolean("programmatic"),
+        )
+      )
+    }
+    view.setDetents(list)
+  }
+
+  @ReactProp(name = "index")
+  override fun setIndex(view: BottomSheetView, index: Int) {
+    view.setIndex(index)
+  }
+
+  @ReactProp(name = "animateIn")
+  override fun setAnimateIn(view: BottomSheetView, animateIn: Boolean) {
+    view.animateIn = animateIn
+  }
+
+  override fun onDropViewInstance(view: BottomSheetView) {
+    super.onDropViewInstance(view)
+    view.destroy()
+  }
+}

package/ios/BottomSheetComponentView.h

@@ -0,0 +1,10 @@
+#import <React/RCTViewComponentView.h>
+#import <UIKit/UIKit.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface BottomSheetComponentView : RCTViewComponentView
+
+@end
+
+NS_ASSUME_NONNULL_END