react-native-gesture-handler 2.16.0-rc.0 → 2.16.1

package/README.md

@@ -39,6 +39,7 @@ You will need to have an Android or iOS device or emulator connected as well as
 
 | version | react-native version |
 | ------- | -------------------- |
+| 2.16.0+ | 0.68.0+              |
 | 2.14.0+ | 0.67.0+              |
 | 2.10.0+ | 0.64.0+              |
 | 2.0.0+  | 0.63.0+              |

package/android/noreanimated/src/main/java/com/swmansion/gesturehandler/ReanimatedEventDispatcher.kt

@@ -4,6 +4,8 @@ import com.facebook.react.bridge.ReactContext
 import com.facebook.react.uimanager.events.Event
 
 class ReanimatedEventDispatcher {
+  @Suppress("UNUSED_PARAMETER", "COMMENT_IN_SUPPRESSION")
+  // This is necessary on new architecture
   fun <T : Event<T>>sendEvent(event: T, reactApplicationContext: ReactContext) {
     // no-op
   }

package/android/paper/src/main/java/com/facebook/react/viewmanagers/RNGestureHandlerButtonManagerDelegate.java

@@ -43,6 +43,15 @@ public class RNGestureHandlerButtonManagerDelegate<T extends View, U extends Bas
       case "touchSoundDisabled":
         mViewManager.setTouchSoundDisabled(view, value == null ? false : (boolean) value);
         break;
+      case "borderWidth":
+        mViewManager.setBorderWidth(view, value == null ? 0f : ((Double) value).floatValue());
+        break;
+      case "borderColor":
+        mViewManager.setBorderColor(view, ColorPropConverter.getColor(value, view.getContext()));
+        break;
+      case "borderStyle":
+        mViewManager.setBorderStyle(view, value == null ? "solid" : (String) value);
+        break;
       default:
         super.setProperty(view, propName, value);
     }

package/android/paper/src/main/java/com/facebook/react/viewmanagers/RNGestureHandlerButtonManagerInterface.java

@@ -20,4 +20,7 @@ public interface RNGestureHandlerButtonManagerInterface<T extends View> {
   void setRippleColor(T view, @Nullable Integer value);
   void setRippleRadius(T view, int value);
   void setTouchSoundDisabled(T view, boolean value);
+  void setBorderWidth(T view, float value);
+  void setBorderColor(T view, @Nullable Integer value);
+  void setBorderStyle(T view, @Nullable String value);
 }

package/android/src/main/java/com/swmansion/gesturehandler/RNGestureHandlerPackage.kt

@@ -60,7 +60,7 @@ class RNGestureHandlerPackage : TurboReactPackage(), ViewManagerOnDemandReactPac
     try {
       val reactModuleInfoProviderClass =
         Class.forName("com.swmansion.gesturehandler.RNGestureHandlerPackage$\$ReactModuleInfoProvider")
-      return reactModuleInfoProviderClass.newInstance() as ReactModuleInfoProvider
+      return reactModuleInfoProviderClass.getDeclaredConstructor().newInstance() as ReactModuleInfoProvider
     } catch (e: ClassNotFoundException) {
       return ReactModuleInfoProvider {
         val reactModule: ReactModule = RNGestureHandlerModule::class.java.getAnnotation(ReactModule::class.java)!!
@@ -71,7 +71,7 @@ class RNGestureHandlerPackage : TurboReactPackage(), ViewManagerOnDemandReactPac
             RNGestureHandlerModule::class.java.name,
             reactModule.canOverrideExistingModule,
             reactModule.needsEagerInit,
-            reactModule.hasConstants,
+            true, // Has constants is hardcoded to return true, so replacing it with `true` changes nothing.
             reactModule.isCxxModule,
             true
           )

package/android/src/main/java/com/swmansion/gesturehandler/core/DiagonalDirections.kt

@@ -0,0 +1,8 @@
+package com.swmansion.gesturehandler.core
+
+object DiagonalDirections {
+  const val DIRECTION_RIGHT_UP = GestureHandler.DIRECTION_RIGHT or GestureHandler.DIRECTION_UP
+  const val DIRECTION_RIGHT_DOWN = GestureHandler.DIRECTION_RIGHT or GestureHandler.DIRECTION_DOWN
+  const val DIRECTION_LEFT_UP = GestureHandler.DIRECTION_LEFT or GestureHandler.DIRECTION_UP
+  const val DIRECTION_LEFT_DOWN = GestureHandler.DIRECTION_LEFT or GestureHandler.DIRECTION_DOWN
+}

package/android/src/main/java/com/swmansion/gesturehandler/core/FlingGestureHandler.kt

@@ -3,18 +3,18 @@ package com.swmansion.gesturehandler.core
 import android.os.Handler
 import android.os.Looper
 import android.view.MotionEvent
+import android.view.VelocityTracker
 
 class FlingGestureHandler : GestureHandler<FlingGestureHandler>() {
   var numberOfPointersRequired = DEFAULT_NUMBER_OF_TOUCHES_REQUIRED
   var direction = DEFAULT_DIRECTION
 
   private val maxDurationMs = DEFAULT_MAX_DURATION_MS
-  private val minAcceptableDelta = DEFAULT_MIN_ACCEPTABLE_DELTA
-  private var startX = 0f
-  private var startY = 0f
+  private val minVelocity = DEFAULT_MIN_VELOCITY
   private var handler: Handler? = null
   private var maxNumberOfPointersSimultaneously = 0
   private val failDelayed = Runnable { fail() }
+  private var velocityTracker: VelocityTracker? = null
 
   override fun resetConfig() {
     super.resetConfig()
@@ -23,8 +23,7 @@ class FlingGestureHandler : GestureHandler<FlingGestureHandler>() {
   }
 
   private fun startFling(event: MotionEvent) {
-    startX = event.rawX
-    startY = event.rawY
+    velocityTracker = VelocityTracker.obtain()
     begin()
     maxNumberOfPointersSimultaneously = 1
     if (handler == null) {
@@ -35,26 +34,48 @@ class FlingGestureHandler : GestureHandler<FlingGestureHandler>() {
     handler!!.postDelayed(failDelayed, maxDurationMs)
   }
 
-  private fun tryEndFling(event: MotionEvent) = if (
-    maxNumberOfPointersSimultaneously == numberOfPointersRequired &&
-    (
-      direction and DIRECTION_RIGHT != 0 &&
-        event.rawX - startX > minAcceptableDelta ||
-        direction and DIRECTION_LEFT != 0 &&
-        startX - event.rawX > minAcceptableDelta ||
-        direction and DIRECTION_UP != 0 &&
-        startY - event.rawY > minAcceptableDelta ||
-        direction and DIRECTION_DOWN != 0 &&
-        event.rawY - startY > minAcceptableDelta
+  private fun tryEndFling(event: MotionEvent): Boolean {
+    addVelocityMovement(velocityTracker, event)
+
+    val velocityVector = Vector.fromVelocity(velocityTracker!!)
+
+    fun getVelocityAlignment(
+      direction: Int,
+      maxDeviationCosine: Double,
+    ): Boolean = (
+      (this.direction and direction) == direction &&
+        velocityVector.isSimilar(Vector.fromDirection(direction), maxDeviationCosine)
       )
-  ) {
-    handler!!.removeCallbacksAndMessages(null)
-    activate()
-    true
-  } else {
-    false
-  }
 
+    val axialAlignmentsList = arrayOf(
+      DIRECTION_LEFT,
+      DIRECTION_RIGHT,
+      DIRECTION_UP,
+      DIRECTION_DOWN,
+    ).map { direction -> getVelocityAlignment(direction, MAX_AXIAL_DEVIATION) }
+
+    val diagonalAlignmentsList = arrayOf(
+      DiagonalDirections.DIRECTION_RIGHT_UP,
+      DiagonalDirections.DIRECTION_RIGHT_DOWN,
+      DiagonalDirections.DIRECTION_LEFT_UP,
+      DiagonalDirections.DIRECTION_LEFT_DOWN,
+    ).map { direction -> getVelocityAlignment(direction, MAX_DIAGONAL_DEVIATION) }
+
+    val isAligned = axialAlignmentsList.any { it } or diagonalAlignmentsList.any { it }
+    val isFast = velocityVector.magnitude > this.minVelocity
+
+    return if (
+      maxNumberOfPointersSimultaneously == numberOfPointersRequired &&
+      isAligned &&
+      isFast
+    ) {
+      handler!!.removeCallbacksAndMessages(null)
+      activate()
+      true
+    } else {
+      false
+    }
+  }
   override fun activate(force: Boolean) {
     super.activate(force)
     end()
@@ -92,13 +113,29 @@ class FlingGestureHandler : GestureHandler<FlingGestureHandler>() {
   }
 
   override fun onReset() {
+    velocityTracker?.recycle()
+    velocityTracker = null
     handler?.removeCallbacksAndMessages(null)
   }
 
+  private fun addVelocityMovement(tracker: VelocityTracker?, event: MotionEvent) {
+    val offsetX = event.rawX - event.x
+    val offsetY = event.rawY - event.y
+    event.offsetLocation(offsetX, offsetY)
+    tracker!!.addMovement(event)
+    event.offsetLocation(-offsetX, -offsetY)
+  }
+
   companion object {
     private const val DEFAULT_MAX_DURATION_MS: Long = 800
-    private const val DEFAULT_MIN_ACCEPTABLE_DELTA: Long = 160
+    private const val DEFAULT_MIN_VELOCITY: Long = 2000
+    private const val DEFAULT_ALIGNMENT_CONE: Double = 30.0
     private const val DEFAULT_DIRECTION = DIRECTION_RIGHT
     private const val DEFAULT_NUMBER_OF_TOUCHES_REQUIRED = 1
+
+    private val MAX_AXIAL_DEVIATION: Double =
+      GestureUtils.coneToDeviation(DEFAULT_ALIGNMENT_CONE)
+    private val MAX_DIAGONAL_DEVIATION: Double =
+      GestureUtils.coneToDeviation(90 - DEFAULT_ALIGNMENT_CONE)
   }
 }

package/android/src/main/java/com/swmansion/gesturehandler/core/GestureHandler.kt

@@ -4,14 +4,13 @@ import android.app.Activity
 import android.content.Context
 import android.content.ContextWrapper
 import android.graphics.PointF
-import android.graphics.Rect
 import android.os.Build
 import android.view.MotionEvent
 import android.view.MotionEvent.PointerCoords
 import android.view.MotionEvent.PointerProperties
 import android.view.View
-import android.view.Window
 import com.facebook.react.bridge.Arguments
+import com.facebook.react.bridge.ReactContext
 import com.facebook.react.bridge.UiThreadUtil
 import com.facebook.react.bridge.WritableArray
 import com.facebook.react.uimanager.PixelUtil
@@ -176,12 +175,9 @@ open class GestureHandler<ConcreteGestureHandlerT : GestureHandler<ConcreteGestu
     this.view = view
     this.orchestrator = orchestrator
 
-    val decorView = getWindow(view?.context)?.decorView
-    if (decorView != null) {
-      val frame = Rect()
-      decorView.getWindowVisibleDisplayFrame(frame)
-      windowOffset[0] = frame.left
-      windowOffset[1] = frame.top
+    val content = getActivity(view?.context)?.findViewById<View>(android.R.id.content)
+    if (content != null) {
+      content.getLocationOnScreen(windowOffset)
     } else {
       windowOffset[0] = 0
       windowOffset[1] = 0
@@ -192,13 +188,13 @@ open class GestureHandler<ConcreteGestureHandlerT : GestureHandler<ConcreteGestu
 
   protected open fun onPrepare() {}
 
-  private fun getWindow(context: Context?): Window? {
-    if (context == null) return null
-    if (context is Activity) return context.window
-    if (context is ContextWrapper) return getWindow(context.baseContext)
-
-    return null
-  }
+  private fun getActivity(context: Context?): Activity? =
+    when (context) {
+      is ReactContext -> context.currentActivity
+      is Activity -> context
+      is ContextWrapper -> getActivity(context.baseContext)
+      else -> null
+    }
 
   private fun findNextLocalPointerId(): Int {
     var localPointerId = 0
@@ -656,7 +652,7 @@ open class GestureHandler<ConcreteGestureHandlerT : GestureHandler<ConcreteGestu
   }
 
   fun cancel() {
-    if (state == STATE_ACTIVE || state == STATE_UNDETERMINED || state == STATE_BEGAN) {
+    if (state == STATE_ACTIVE || state == STATE_UNDETERMINED || state == STATE_BEGAN || this.isAwaiting) {
       onCancel()
       moveToState(STATE_CANCELLED)
     }
@@ -762,7 +758,6 @@ open class GestureHandler<ConcreteGestureHandlerT : GestureHandler<ConcreteGestu
     orchestrator = null
     Arrays.fill(trackedPointerIDs, -1)
     trackedPointersIDsCount = 0
-
     trackedPointersCount = 0
     trackedPointers.fill(null)
     touchEventType = RNGestureHandlerTouchEvent.EVENT_UNDETERMINED
@@ -836,15 +831,15 @@ open class GestureHandler<ConcreteGestureHandlerT : GestureHandler<ConcreteGestu
     private lateinit var pointerProps: Array<PointerProperties?>
     private lateinit var pointerCoords: Array<PointerCoords?>
     private fun initPointerProps(size: Int) {
-      var size = size
+      var pointerPropsSize = size
       if (!Companion::pointerProps.isInitialized) {
         pointerProps = arrayOfNulls(MAX_POINTERS_COUNT)
         pointerCoords = arrayOfNulls(MAX_POINTERS_COUNT)
       }
-      while (size > 0 && pointerProps[size - 1] == null) {
-        pointerProps[size - 1] = PointerProperties()
-        pointerCoords[size - 1] = PointerCoords()
-        size--
+      while (pointerPropsSize > 0 && pointerProps[pointerPropsSize - 1] == null) {
+        pointerProps[pointerPropsSize - 1] = PointerProperties()
+        pointerCoords[pointerPropsSize - 1] = PointerCoords()
+        pointerPropsSize--
       }
     }
 

package/android/src/main/java/com/swmansion/gesturehandler/core/GestureHandlerOrchestrator.kt

@@ -7,6 +7,7 @@ import android.view.View
 import android.view.ViewGroup
 import android.widget.EditText
 import java.util.*
+import kotlin.collections.HashSet
 
 class GestureHandlerOrchestrator(
   private val wrapperView: ViewGroup,
@@ -22,6 +23,14 @@ class GestureHandlerOrchestrator(
   private val gestureHandlers = arrayListOf<GestureHandler<*>>()
   private val awaitingHandlers = arrayListOf<GestureHandler<*>>()
   private val preparedHandlers = arrayListOf<GestureHandler<*>>()
+
+  // In `onHandlerStateChange` method we iterate through `awaitingHandlers`, but calling `tryActivate` may modify this list.
+  // To avoid `ConcurrentModificationException` we iterate through copy. There is one more problem though - if handler was
+  // removed from `awaitingHandlers`, it was still present in copy of original list. This hashset helps us identify which handlers
+  // are really inside `awaitingHandlers`.
+  // `contains` method on HashSet has O(1) complexity, so calling it inside for loop won't result in O(n^2) (contrary to ArrayList)
+  private val awaitingHandlersTags = HashSet<Int>()
+
   private var isHandlingTouch = false
   private var handlingChangeSemaphore = 0
   private var finishedHandlersCleanupScheduled = false
@@ -73,16 +82,18 @@ class GestureHandlerOrchestrator(
     finishedHandlersCleanupScheduled = false
   }
 
-  private fun hasOtherHandlerToWaitFor(handler: GestureHandler<*>): Boolean {
-    for (otherHandler in gestureHandlers) {
-      if (!isFinished(otherHandler.state) && shouldHandlerWaitForOther(handler, otherHandler)) {
-        return true
-      }
-    }
-    return false
-  }
+  private fun hasOtherHandlerToWaitFor(handler: GestureHandler<*>) =
+    gestureHandlers.any { !isFinished(it.state) && shouldHandlerWaitForOther(handler, it) }
+
+  private fun shouldBeCancelledByFinishedHandler(handler: GestureHandler<*>) = gestureHandlers.any { shouldHandlerWaitForOther(handler, it) && it.state == GestureHandler.STATE_END }
 
   private fun tryActivate(handler: GestureHandler<*>) {
+    // If we are waiting for a gesture that has successfully finished, we should cancel handler
+    if (shouldBeCancelledByFinishedHandler(handler)) {
+      handler.cancel()
+      return
+    }
+
     // see if there is anyone else who we need to wait for
     if (hasOtherHandlerToWaitFor(handler)) {
       addAwaitingHandler(handler)
@@ -94,7 +105,14 @@ class GestureHandlerOrchestrator(
   }
 
   private fun cleanupAwaitingHandlers() {
-    awaitingHandlers.removeAll { !it.isAwaiting }
+    val awaitingHandlersCopy = awaitingHandlers.toList()
+
+    for (handler in awaitingHandlersCopy) {
+      if (!handler.isAwaiting) {
+        awaitingHandlers.remove(handler)
+        awaitingHandlersTags.remove(handler.tag)
+      }
+    }
   }
 
   /*package*/
@@ -107,7 +125,7 @@ class GestureHandlerOrchestrator(
 
       // if there were handlers awaiting completion of this handler, we can trigger active state
       for (otherHandler in currentlyAwaitingHandlers) {
-        if (!shouldHandlerWaitForOther(otherHandler, handler)) {
+        if (!shouldHandlerWaitForOther(otherHandler, handler) || !awaitingHandlersTags.contains(otherHandler.tag)) {
           continue
         }
 
@@ -174,7 +192,6 @@ class GestureHandlerOrchestrator(
     // Clear all awaiting handlers waiting for the current handler to fail
     for (otherHandler in awaitingHandlers.reversed()) {
       if (shouldHandlerBeCancelledBy(otherHandler, handler)) {
-        otherHandler.cancel()
         otherHandler.isAwaiting = false
       }
     }
@@ -389,6 +406,8 @@ class GestureHandlerOrchestrator(
     }
 
     awaitingHandlers.add(handler)
+    awaitingHandlersTags.add(handler.tag)
+
     with(handler) {
       isAwaiting = true
       activationIndex = this@GestureHandlerOrchestrator.activationIndex++

package/android/src/main/java/com/swmansion/gesturehandler/core/GestureUtils.kt

@@ -1,6 +1,7 @@
 package com.swmansion.gesturehandler.core
 
 import android.view.MotionEvent
+import kotlin.math.cos
 
 object GestureUtils {
   fun getLastPointerX(event: MotionEvent, averageTouches: Boolean): Float {
@@ -44,4 +45,6 @@ object GestureUtils {
       event.getY(lastPointerIdx)
     }
   }
+  fun coneToDeviation(angle: Double): Double =
+    cos(Math.toRadians(angle / 2.0))
 }

package/android/src/main/java/com/swmansion/gesturehandler/core/Vector.kt

@@ -0,0 +1,66 @@
+package com.swmansion.gesturehandler.core
+
+import android.view.VelocityTracker
+import com.swmansion.gesturehandler.core.GestureHandler.Companion.DIRECTION_DOWN
+import com.swmansion.gesturehandler.core.GestureHandler.Companion.DIRECTION_LEFT
+import com.swmansion.gesturehandler.core.GestureHandler.Companion.DIRECTION_RIGHT
+import com.swmansion.gesturehandler.core.GestureHandler.Companion.DIRECTION_UP
+import kotlin.math.hypot
+
+class Vector(val x: Double, val y: Double) {
+  private val unitX: Double
+  private val unitY: Double
+  val magnitude = hypot(x, y)
+
+  init {
+    val isMagnitudeSufficient = magnitude > MINIMAL_MAGNITUDE
+
+    unitX = if (isMagnitudeSufficient) x / magnitude else 0.0
+    unitY = if (isMagnitudeSufficient) y / magnitude else 0.0
+  }
+
+  private fun computeSimilarity(vector: Vector): Double {
+    return unitX * vector.unitX + unitY * vector.unitY
+  }
+
+  fun isSimilar(vector: Vector, threshold: Double): Boolean {
+    return computeSimilarity(vector) > threshold
+  }
+
+  companion object {
+    private val VECTOR_LEFT: Vector = Vector(-1.0, 0.0)
+    private val VECTOR_RIGHT: Vector = Vector(1.0, 0.0)
+    private val VECTOR_UP: Vector = Vector(0.0, -1.0)
+    private val VECTOR_DOWN: Vector = Vector(0.0, 1.0)
+
+    private val VECTOR_RIGHT_UP: Vector = Vector(1.0, -1.0)
+    private val VECTOR_RIGHT_DOWN: Vector = Vector(1.0, 1.0)
+    private val VECTOR_LEFT_UP: Vector = Vector(-1.0, -1.0)
+    private val VECTOR_LEFT_DOWN: Vector = Vector(-1.0, 1.0)
+
+    private val VECTOR_ZERO: Vector = Vector(0.0, 0.0)
+    private const val MINIMAL_MAGNITUDE = 0.1
+
+    fun fromDirection(direction: Int): Vector =
+      when (direction) {
+        DIRECTION_LEFT -> VECTOR_LEFT
+        DIRECTION_RIGHT -> VECTOR_RIGHT
+        DIRECTION_UP -> VECTOR_UP
+        DIRECTION_DOWN -> VECTOR_DOWN
+        DiagonalDirections.DIRECTION_RIGHT_UP -> VECTOR_RIGHT_UP
+        DiagonalDirections.DIRECTION_RIGHT_DOWN -> VECTOR_RIGHT_DOWN
+        DiagonalDirections.DIRECTION_LEFT_UP -> VECTOR_LEFT_UP
+        DiagonalDirections.DIRECTION_LEFT_DOWN -> VECTOR_LEFT_DOWN
+        else -> VECTOR_ZERO
+      }
+
+    fun fromVelocity(tracker: VelocityTracker): Vector {
+      tracker.computeCurrentVelocity(1000)
+
+      val velocityX = tracker.xVelocity.toDouble()
+      val velocityY = tracker.yVelocity.toDouble()
+
+      return Vector(velocityX, velocityY)
+    }
+  }
+}

package/android/src/main/java/com/swmansion/gesturehandler/react/RNGestureHandlerButtonViewManager.kt

@@ -5,6 +5,9 @@ import android.annotation.TargetApi
 import android.content.Context
 import android.content.res.ColorStateList
 import android.graphics.Color
+import android.graphics.DashPathEffect
+import android.graphics.Paint
+import android.graphics.PathEffect
 import android.graphics.drawable.Drawable
 import android.graphics.drawable.LayerDrawable
 import android.graphics.drawable.PaintDrawable
@@ -65,6 +68,41 @@ class RNGestureHandlerButtonViewManager : ViewGroupManager<ButtonViewGroup>(), R
     view.borderRadius = borderRadius
   }
 
+  @ReactProp(name = "borderTopLeftRadius")
+  override fun setBorderTopLeftRadius(view: ButtonViewGroup, borderTopLeftRadius: Float) {
+    view.borderTopLeftRadius = borderTopLeftRadius
+  }
+
+  @ReactProp(name = "borderTopRightRadius")
+  override fun setBorderTopRightRadius(view: ButtonViewGroup, borderTopRightRadius: Float) {
+    view.borderTopRightRadius = borderTopRightRadius
+  }
+
+  @ReactProp(name = "borderBottomLeftRadius")
+  override fun setBorderBottomLeftRadius(view: ButtonViewGroup, borderBottomLeftRadius: Float) {
+    view.borderBottomLeftRadius = borderBottomLeftRadius
+  }
+
+  @ReactProp(name = "borderBottomRightRadius")
+  override fun setBorderBottomRightRadius(view: ButtonViewGroup, borderBottomRightRadius: Float) {
+    view.borderBottomRightRadius = borderBottomRightRadius
+  }
+
+  @ReactProp(name = "borderWidth")
+  override fun setBorderWidth(view: ButtonViewGroup, borderWidth: Float) {
+    view.borderWidth = borderWidth
+  }
+
+  @ReactProp(name = "borderColor")
+  override fun setBorderColor(view: ButtonViewGroup, borderColor: Int?) {
+    view.borderColor = borderColor
+  }
+
+  @ReactProp(name = "borderStyle")
+  override fun setBorderStyle(view: ButtonViewGroup, borderStyle: String?) {
+    view.borderStyle = borderStyle
+  }
+
   @ReactProp(name = "rippleColor")
   override fun setRippleColor(view: ButtonViewGroup, rippleColor: Int?) {
     view.rippleColor = rippleColor
@@ -115,6 +153,42 @@ class RNGestureHandlerButtonViewManager : ViewGroupManager<ButtonViewGroup>(), R
       set(radius) = withBackgroundUpdate {
         field = radius * resources.displayMetrics.density
       }
+    var borderTopLeftRadius = 0f
+      set(radius) = withBackgroundUpdate {
+        field = radius * resources.displayMetrics.density
+      }
+    var borderTopRightRadius = 0f
+      set(radius) = withBackgroundUpdate {
+        field = radius * resources.displayMetrics.density
+      }
+    var borderBottomLeftRadius = 0f
+      set(radius) = withBackgroundUpdate {
+        field = radius * resources.displayMetrics.density
+      }
+    var borderBottomRightRadius = 0f
+      set(radius) = withBackgroundUpdate {
+        field = radius * resources.displayMetrics.density
+      }
+    var borderWidth = 0f
+      set(width) = withBackgroundUpdate {
+        field = width * resources.displayMetrics.density
+      }
+    var borderColor: Int? = null
+      set(color) = withBackgroundUpdate {
+        field = color
+      }
+    var borderStyle: String? = "solid"
+      set(style) = withBackgroundUpdate {
+        field = style
+      }
+
+    private val hasBorderRadii: Boolean
+      get() = borderRadius != 0f ||
+        borderTopLeftRadius != 0f ||
+        borderTopRightRadius != 0f ||
+        borderBottomLeftRadius != 0f ||
+        borderBottomRightRadius != 0f
+
     var exclusive = true
 
     private var _backgroundColor = Color.TRANSPARENT
@@ -139,6 +213,30 @@ class RNGestureHandlerButtonViewManager : ViewGroupManager<ButtonViewGroup>(), R
       needBackgroundUpdate = true
     }
 
+    private fun buildBorderRadii(): FloatArray {
+      // duplicate radius for each corner, as setCornerRadii expects X radius and Y radius for each
+      return floatArrayOf(
+        borderTopLeftRadius,
+        borderTopLeftRadius,
+        borderTopRightRadius,
+        borderTopRightRadius,
+        borderBottomRightRadius,
+        borderBottomRightRadius,
+        borderBottomLeftRadius,
+        borderBottomLeftRadius,
+      )
+        .map { if (it != 0f) it else borderRadius }
+        .toFloatArray()
+    }
+
+    private fun buildBorderStyle(): PathEffect? {
+      return when (borderStyle) {
+        "dotted" -> DashPathEffect(floatArrayOf(borderWidth, borderWidth, borderWidth, borderWidth), 0f)
+        "dashed" -> DashPathEffect(floatArrayOf(borderWidth * 3, borderWidth * 3, borderWidth * 3, borderWidth * 3), 0f)
+        else -> null
+      }
+    }
+
     override fun setBackgroundColor(color: Int) = withBackgroundUpdate {
       _backgroundColor = color
     }
@@ -188,14 +286,25 @@ class RNGestureHandlerButtonViewManager : ViewGroupManager<ButtonViewGroup>(), R
       return false
     }
 
-    private fun updateBackgroundColor(backgroundColor: Int, borderRadius: Float, selectable: Drawable?) {
+    private fun updateBackgroundColor(backgroundColor: Int, selectable: Drawable?) {
       val colorDrawable = PaintDrawable(backgroundColor)
+      val borderDrawable = PaintDrawable(Color.TRANSPARENT)
 
-      if (borderRadius != 0f) {
-        colorDrawable.setCornerRadius(borderRadius)
+      if (hasBorderRadii) {
+        colorDrawable.setCornerRadii(buildBorderRadii())
+        borderDrawable.setCornerRadii(buildBorderRadii())
       }
 
-      val layerDrawable = LayerDrawable(if (selectable != null) arrayOf(colorDrawable, selectable) else arrayOf(colorDrawable))
+      if (borderWidth > 0f) {
+        borderDrawable.paint.apply {
+          style = Paint.Style.STROKE
+          strokeWidth = borderWidth
+          color = borderColor ?: Color.BLACK
+          pathEffect = buildBorderStyle()
+        }
+      }
+
+      val layerDrawable = LayerDrawable(if (selectable != null) arrayOf(colorDrawable, selectable, borderDrawable) else arrayOf(colorDrawable, borderDrawable))
       background = layerDrawable
     }
 
@@ -216,30 +325,21 @@ class RNGestureHandlerButtonViewManager : ViewGroupManager<ButtonViewGroup>(), R
 
       val selectable = createSelectableDrawable()
 
-      if (borderRadius != 0f) {
-        // Radius-connected lines below ought to be considered
-        // as a temporary solution. It do not allow to set
-        // different radius on each corner. However, I suppose it's fairly
-        // fine for button-related use cases.
-        // Therefore it might be used as long as:
-        // 1. ReactViewManager is not a generic class with a possibility to handle another ViewGroup
-        // 2. There's no way to force native behavior of ReactViewGroup's superclass's onTouchEvent
-        if (selectable is RippleDrawable) {
-          val mask = PaintDrawable(Color.WHITE)
-          mask.setCornerRadius(borderRadius)
-          selectable.setDrawableByLayerId(android.R.id.mask, mask)
-        }
+      if (hasBorderRadii && selectable is RippleDrawable) {
+        val mask = PaintDrawable(Color.WHITE)
+        mask.setCornerRadii(buildBorderRadii())
+        selectable.setDrawableByLayerId(android.R.id.mask, mask)
       }
 
       if (useDrawableOnForeground && Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
         foreground = selectable
         if (_backgroundColor != Color.TRANSPARENT) {
-          updateBackgroundColor(_backgroundColor, borderRadius, null)
+          updateBackgroundColor(_backgroundColor, null)
         }
       } else if (_backgroundColor == Color.TRANSPARENT && rippleColor == null) {
         background = selectable
       } else {
-        updateBackgroundColor(_backgroundColor, borderRadius, selectable)
+        updateBackgroundColor(_backgroundColor, selectable)
       }
     }
 

package/android/src/main/java/com/swmansion/gesturehandler/react/RNGestureHandlerEnabledRootView.kt

@@ -6,8 +6,8 @@ import com.facebook.react.ReactRootView
 
 @Deprecated(message = "Use <GestureHandlerRootView /> component instead. Check gesture handler installation instructions in documentation for more information.")
 class RNGestureHandlerEnabledRootView : ReactRootView {
-  constructor(context: Context?) : super(context) {}
-  constructor(context: Context?, attrs: AttributeSet?) : super(context, attrs) {}
+  constructor(context: Context?) : super(context)
+  constructor(context: Context?, attrs: AttributeSet?) : super(context, attrs)
 
   init {
     throw UnsupportedOperationException("Your application is configured to use RNGestureHandlerEnabledRootView which is no longer supported. You can see how to migrate to <GestureHandlerRootView /> here: https://docs.swmansion.com/react-native-gesture-handler/docs/guides/migrating-off-rnghenabledroot")