react-native-screens 5.0.0-alpha.2 → 5.0.0-alpha.3

package/android/src/main/java/com/swmansion/rnscreens/modals/formsheet/native/model/FormSheetDetents.kt

@@ -1,5 +1,7 @@
 package com.swmansion.rnscreens.modals.formsheet.native.model
 
+import kotlin.math.roundToInt
+
 internal class FormSheetDetents(
     rawDetents: List<Double>,
 ) {
@@ -31,47 +33,83 @@ internal class FormSheetDetents(
 
     private fun heightFractionAt(index: Int): Double = detents[index]
 
+    // Height of the sheet resting at the given detent, measured down to the bottom edge of the container.
     private fun heightAt(
         index: Int,
         containerHeight: Int,
-    ): Int = (heightFractionAt(index) * containerHeight).toInt()
+        keyboardLift: Int,
+    ): Int = ((heightFractionAt(index) * containerHeight).roundToInt() + keyboardLift).coerceAtMost(containerHeight)
 
-    internal fun firstHeight(containerHeight: Int): Int = heightAt(0, containerHeight)
+    /**
+     * Height handed to Material as `peekHeight`. Material treats the peek height as the content height above
+     * the bottom inset and adds that inset back (`BottomSheetBehavior.calculatePeekHeight`), while every
+     * other metric (`maxHeight`, `halfExpandedRatio`) describes the sheet down to the screen edge. The inset is
+     * subtracted here so the lowest detent is resolved against the same reference as the other ones.
+     * Material's inset covers the keyboard as well, so the lift is subtracted along with the system inset.
+     */
+    internal fun peekHeight(
+        containerHeight: Int,
+        bottomInset: Int,
+        keyboardLift: Int = 0,
+    ): Int = (heightAt(0, containerHeight, keyboardLift) - bottomInset - keyboardLift).coerceAtLeast(0)
 
-    internal fun maxAllowedHeight(containerHeight: Int): Int = heightAt(count - 1, containerHeight)
+    internal fun maxAllowedHeight(
+        containerHeight: Int,
+        keyboardLift: Int = 0,
+    ): Int = heightAt(count - 1, containerHeight, keyboardLift)
 
     internal fun maxAllowedHeightForFitToContents(
         containerHeight: Int,
         contentHeight: Int,
         bottomInset: Int,
+        keyboardLift: Int = 0,
     ): Int {
         /*
-         * We add the `bottomInset` to the `contentHeight` so that the Material BottomSheet
-         * is laid out behind the system navigation bar. The sheet's container covers the insets,
+         * We add the `bottomInset` and the `keyboardLift` to the `contentHeight` so that the Material BottomSheet
+         * is laid out behind the system navigation bar or the keyboard. The sheet's container covers the insets,
          * while the RN content is strictly constrained to `contentHeight`.
          */
         if (contentHeight <= 0) {
             // Avoid collapsing the sheet before the React content has been laid out and measured.
             return containerHeight
         }
-        return (contentHeight + bottomInset).coerceAtMost(containerHeight)
+        return (contentHeight + bottomInset + keyboardLift).coerceAtMost(containerHeight)
     }
 
-    internal fun halfExpandedRatio(): Float {
+    /**
+     * Ratio of the middle detent's sheet height to the container height, handed to Material as `halfExpandedRatio`.
+     * Material resolves the half-expanded position from it as `(int) (parentHeight * (1 - ratio))`.
+     *
+     * The keyboard lift can push both the middle and the largest detent to the top of the container. Material needs
+     * the half-expanded position strictly below the expanded one so the middle detent is kept at least
+     * [MIDDLE_DETENT_MIN_GAP] px shorter than the largest one.
+     */
+    internal fun halfExpandedRatio(
+        containerHeight: Int,
+        keyboardLift: Int = 0,
+    ): Float {
         check(count == MAX_DETENTS) { "[RNScreens] Exactly $MAX_DETENTS detents are required for halfExpandedRatio." }
-        return (heightFractionAt(1) / heightFractionAt(2)).toFloat()
+        val middleDetentHeight =
+            heightAt(1, containerHeight, keyboardLift)
+                .coerceAtMost(maxAllowedHeight(containerHeight, keyboardLift) - MIDDLE_DETENT_MIN_GAP)
+                .coerceAtLeast(1)
+        return middleDetentHeight.toFloat() / containerHeight
     }
 
     internal fun expandedOffsetFromTop(
         containerHeight: Int,
         topInset: Int = 0,
+        keyboardLift: Int = 0,
     ): Int {
         check(count == MAX_DETENTS) { "[RNScreens] Exactly $MAX_DETENTS detents are required for expandedOffsetFromTop." }
-        return ((1 - heightFractionAt(2)) * containerHeight).toInt() + topInset
+        return largestDetentTopOffset(containerHeight, keyboardLift) + topInset
     }
 
     // Distance from the top of the window to the top of the largest detent's surface.
-    private fun largestDetentTopOffset(containerHeight: Int): Int = containerHeight - maxAllowedHeight(containerHeight)
+    private fun largestDetentTopOffset(
+        containerHeight: Int,
+        keyboardLift: Int,
+    ): Int = containerHeight - maxAllowedHeight(containerHeight, keyboardLift)
 
     /**
      * Material's BottomSheetDialog dynamically applies padding when its content overlaps
@@ -83,24 +121,32 @@ internal class FormSheetDetents(
         topInset: Int,
         bottomInset: Int,
         contentHeight: Int = 0,
+        keyboardLift: Int = 0,
     ): Int {
+        val bottomPadding = bottomInset + keyboardLift
+
         if (isFitToContents) {
             // Until we have a measured content height, fall back to a safe-area height so Yoga can lay out.
             if (contentHeight <= 0) {
-                return (containerHeight - topInset - bottomInset).coerceAtLeast(0)
+                return (containerHeight - topInset - bottomPadding).coerceAtLeast(0)
             }
-            return contentHeight.coerceAtMost(containerHeight)
+            // Content taller than the safe area is aligned with it.
+            return contentHeight.coerceAtMost((containerHeight - topInset - bottomPadding).coerceAtLeast(0))
         }
 
-        // Bottom inset is always fully subtracted because the sheet is in its dedicated window and it's
+        // Bottom padding is always fully subtracted because the sheet is in its dedicated window and it's
         // anchored to the bottom.
         // Top inset is subtracted only by the amount the sheet actually overlaps it.
-        val topOverlap = (topInset - largestDetentTopOffset(containerHeight)).coerceAtLeast(0)
-        return (maxAllowedHeight(containerHeight) - topOverlap - bottomInset).coerceAtLeast(0)
+        val topOverlap = (topInset - largestDetentTopOffset(containerHeight, keyboardLift)).coerceAtLeast(0)
+        return (maxAllowedHeight(containerHeight, keyboardLift) - topOverlap - bottomPadding).coerceAtLeast(0)
     }
 
     companion object {
         const val MAX_DETENTS = 3
         const val FIT_TO_CONTENTS_DETENT_VALUE = -1.0
+
+        // Material resolves the half-expanded position in float precision and the truncation to int can eat 1 px
+        // which would put the middle detent back on the expanded position.
+        private const val MIDDLE_DETENT_MIN_GAP = 2
     }
 }

package/android/src/main/java/com/swmansion/rnscreens/modals/formsheet/native/presentation/FormSheetAnimatorFactory.kt

@@ -4,11 +4,9 @@ import android.animation.Animator
 import android.animation.AnimatorSet
 import android.animation.ValueAnimator
 import android.view.View
-import androidx.core.animation.doOnStart
-import com.swmansion.rnscreens.modals.dimmingview.DimmingViewManager
 
 internal class FormSheetAnimatorFactory(
-    private val dimmingManager: DimmingViewManager,
+    private val dimmingManager: FormSheetDimmingManager,
 ) {
     // TODO: @t0maboro - consider exposing as a prop
     val animationDuration = 250L
@@ -18,7 +16,7 @@ internal class FormSheetAnimatorFactory(
         isInterrupting: Boolean = false,
     ): Animator {
         val startY = if (isInterrupting) view.translationY else view.height.toFloat()
-        val startAlpha = if (isInterrupting) dimmingManager.dimmingViewAlpha else 0f
+        val startAlpha = if (isInterrupting) dimmingManager.dimmingAlpha else 0f
 
         val slideAnimator =
             ValueAnimator.ofFloat(startY, 0f).apply {
@@ -30,14 +28,13 @@ internal class FormSheetAnimatorFactory(
         val alphaAnimator =
             ValueAnimator.ofFloat(startAlpha, dimmingManager.maxAlpha).apply {
                 addUpdateListener { animation ->
-                    dimmingManager.dimmingViewAlpha = animation.animatedValue as Float
+                    dimmingManager.dimmingAlpha = animation.animatedValue as Float
                 }
             }
 
         return AnimatorSet().apply {
             playTogether(slideAnimator, alphaAnimator)
             duration = animationDuration
-            doOnStart { view.translationY = startY }
         }
     }
 
@@ -45,8 +42,10 @@ internal class FormSheetAnimatorFactory(
         view: View,
         isInterrupting: Boolean = false,
     ): Animator {
-        val startY = if (isInterrupting) view.translationY else 0f
-        val startAlpha = if (isInterrupting) dimmingManager.dimmingViewAlpha else dimmingManager.maxAlpha
+        // Always leave from the current translation: besides an interrupted enter animation, the sheet
+        // may be mid-way through tracking the keyboard animation when the dismissal starts.
+        val startY = view.translationY
+        val startAlpha = if (isInterrupting) dimmingManager.dimmingAlpha else dimmingManager.maxAlpha
 
         val slideAnimator =
             ValueAnimator.ofFloat(startY, view.height.toFloat()).apply {
@@ -58,7 +57,7 @@ internal class FormSheetAnimatorFactory(
         val alphaAnimator =
             ValueAnimator.ofFloat(startAlpha, 0f).apply {
                 addUpdateListener { animation ->
-                    dimmingManager.dimmingViewAlpha = animation.animatedValue as Float
+                    dimmingManager.dimmingAlpha = animation.animatedValue as Float
                 }
             }
 

package/android/src/main/java/com/swmansion/rnscreens/modals/formsheet/native/presentation/FormSheetDimmingManager.kt

@@ -0,0 +1,115 @@
+package com.swmansion.rnscreens.modals.formsheet.native.presentation
+
+import android.app.Activity
+import android.content.Context
+import android.content.ContextWrapper
+import android.graphics.Color
+import android.graphics.drawable.ColorDrawable
+import android.util.Log
+import android.view.View
+import com.facebook.react.bridge.ReactContext
+import com.google.android.material.bottomsheet.BottomSheetBehavior
+import kotlin.math.roundToInt
+
+internal class FormSheetDimmingManager(
+    private val context: Context,
+) {
+    // TODO: @t0maboro - consider exposing as a prop
+    internal val maxAlpha: Float = MAX_DIMMING_ALPHA_FRACTION
+
+    internal var isTransitionAnimationRunning: Boolean = false
+
+    // The drawable rendering this sheet's dimming, added to the overlay of dimmingHost which is
+    // Material's `design_bottom_sheet` component or the DecorView of the main application content.
+    private var dimmingDrawable: ColorDrawable? = null
+    private var dimmingHost: View? = null
+
+    private val dimmingHostLayoutListener =
+        View.OnLayoutChangeListener { view, _, _, _, _, _, _, _, _ ->
+            dimmingDrawable?.setBounds(0, 0, view.width, view.height)
+        }
+
+    internal var dimmingAlpha: Float = 0f
+        set(value) {
+            field = value
+            // We're transforming the value, because View.alpha is within [0.0, 1.0] range,
+            // while Drawable.alpha is an Integer in [0, 255] range.
+            dimmingDrawable?.alpha = (value * MAX_DRAWABLE_OVERLAY_ALPHA).roundToInt().coerceIn(0, MAX_DRAWABLE_OVERLAY_ALPHA)
+        }
+
+    /**
+     * Called when the sheet is presented. [belowSheetView] is the `design_bottom_sheet` of the
+     * sheet directly below in the stack, or null when this sheet is the bottom-most one - the
+     * dimming then goes onto the decor of the activity hosting the sheets.
+     */
+    internal fun attachDimming(belowSheetView: View?) {
+        val host = belowSheetView ?: resolveActivityDecorView()
+        if (host == null) {
+            Log.e(TAG, "[RNScreens] Neither a sheet below nor an activity decor found; the sheet will present undimmed.")
+            return
+        }
+
+        dimmingHost = host
+        dimmingDrawable =
+            ColorDrawable(Color.BLACK).apply {
+                alpha = 0
+                setBounds(0, 0, host.width, host.height)
+            }
+        host.overlay.add(dimmingDrawable!!)
+        host.addOnLayoutChangeListener(dimmingHostLayoutListener)
+    }
+
+    internal fun detachDimming() {
+        dimmingHost?.removeOnLayoutChangeListener(dimmingHostLayoutListener)
+        dimmingDrawable?.let { dimmingHost?.overlay?.remove(it) }
+        dimmingHost = null
+        dimmingDrawable = null
+    }
+
+    internal fun attachToBehavior(behavior: BottomSheetBehavior<*>) {
+        behavior.addBottomSheetCallback(
+            object : BottomSheetBehavior.BottomSheetCallback() {
+                override fun onStateChanged(
+                    bottomSheet: View,
+                    newState: Int,
+                ) = Unit
+
+                override fun onSlide(
+                    bottomSheet: View,
+                    slideOffset: Float,
+                ) {
+                    // Prevent system updates from overriding alpha while running custom enter/exit animation.
+                    // When initialDetentIndex is snapping to a high detent, BottomSheetBehavior fires onSlide
+                    // events that conflict with our manual alpha animator, causing the backdrop to flash.
+                    if (isTransitionAnimationRunning) {
+                        return
+                    }
+
+                    val fraction = if (slideOffset >= 0) 1f else 1f + slideOffset
+                    dimmingAlpha = fraction * maxAlpha
+                }
+            },
+        )
+    }
+
+    private fun resolveActivityDecorView(): View? {
+        var current: Context? = context
+        while (current is ContextWrapper) {
+            if (current is Activity) {
+                return current.window?.decorView
+            }
+            if (current is ReactContext) {
+                return current.currentActivity?.window?.decorView
+            }
+            current = current.baseContext
+        }
+        return null
+    }
+
+    companion object {
+        const val TAG = "FormSheetDimmingManager"
+
+        private const val MAX_DIMMING_ALPHA_FRACTION = 0.3f
+        private const val MAX_DRAWABLE_OVERLAY_ALPHA = 255
+    }
+}

package/android/src/main/java/com/swmansion/rnscreens/modals/formsheet/native/presentation/FormSheetDismissalOrigin.kt

@@ -0,0 +1,22 @@
+package com.swmansion.rnscreens.modals.formsheet.native.presentation
+
+internal enum class FormSheetDismissalOrigin {
+    /**
+     * No dismissal request is pending. Completing a dismissal with this
+     * origin should report an error.
+     */
+    UNSPECIFIED,
+
+    /**
+     * The dismissal was requested from JS by setting `isOpen = false`.
+     * Emits `onDismiss`.
+     */
+    PROGRAMMATIC_JS,
+
+    /**
+     * The dismissal was initiated by the user (swiping the sheet down,
+     * triggering the native back button, or tapping the backdrop).
+     * Emits `onNativeDismiss`.
+     */
+    USER,
+}

package/android/src/main/java/com/swmansion/rnscreens/modals/formsheet/native/presentation/FormSheetPresentation.kt

@@ -0,0 +1,173 @@
+package com.swmansion.rnscreens.modals.formsheet.native.presentation
+
+import android.content.Context
+import android.util.Log
+import android.view.ViewGroup
+import android.widget.FrameLayout
+import com.google.android.material.bottomsheet.BottomSheetBehavior
+import com.swmansion.rnscreens.modals.formsheet.native.coordinator.FormSheetAppearanceCoordinator
+import com.swmansion.rnscreens.modals.formsheet.native.coordinator.FormSheetBehaviorController
+import com.swmansion.rnscreens.modals.formsheet.native.coordinator.FormSheetDimensionsCoordinator
+import com.swmansion.rnscreens.modals.formsheet.native.coordinator.FormSheetKeyboardCoordinator
+import com.swmansion.rnscreens.modals.formsheet.native.coordinator.FormSheetNativeDismissCoordinator
+import com.swmansion.rnscreens.modals.formsheet.native.core.FormSheetContainer
+import com.swmansion.rnscreens.modals.formsheet.native.core.FormSheetDialog
+import com.swmansion.rnscreens.modals.formsheet.native.model.FormSheetConfig
+import com.swmansion.rnscreens.modals.formsheet.native.model.FormSheetDetents
+
+internal class FormSheetPresentation(
+    themedContext: Context,
+    private val container: FormSheetContainer,
+    private val callbacks: Callbacks,
+) {
+    internal interface Callbacks {
+        fun onDetentChanged(index: Int)
+
+        fun onNativeDismissAllowed()
+
+        fun onNativeDismissPrevented()
+    }
+
+    internal val dialog =
+        FormSheetDialog(themedContext).apply {
+            setContentView(container)
+            // Backdrop taps are handled by Material's `touch_outside` view, which calls `cancel()`,
+            // intercepted by FormSheetDialog.cancelRequestInterceptor, that's responsible for
+            // preventNativeDismiss handling.
+            setCanceledOnTouchOutside(true)
+        }
+
+    internal val bottomSheetView: FrameLayout? = dialog.findViewById(com.google.android.material.R.id.design_bottom_sheet)
+
+    internal val sheetBehavior: BottomSheetBehavior<FrameLayout>?
+        get() = bottomSheetView?.let { BottomSheetBehavior.from(it) }
+
+    private val behaviorController =
+        bottomSheetView?.let {
+            FormSheetBehaviorController(it) { index -> callbacks.onDetentChanged(index) }
+        }
+
+    private val appearanceCoordinator =
+        FormSheetAppearanceCoordinator(
+            bottomSheetView = bottomSheetView,
+        )
+
+    private val dimensionsCoordinator =
+        FormSheetDimensionsCoordinator(
+            dialog = dialog,
+            container = container,
+            behaviorController = behaviorController,
+        )
+
+    private val keyboardCoordinator =
+        bottomSheetView?.let {
+            FormSheetKeyboardCoordinator(bottomSheetView = it)
+        }
+
+    private val nativeDismissCoordinator =
+        FormSheetNativeDismissCoordinator(
+            dialog = dialog,
+            behaviorController = behaviorController,
+            onDismissAllowed = callbacks::onNativeDismissAllowed,
+            onDismissPrevented = callbacks::onNativeDismissPrevented,
+        )
+
+    init {
+        nativeDismissCoordinator.setup()
+        appearanceCoordinator.setup()
+        dimensionsCoordinator.setup()
+        keyboardCoordinator?.setup()
+        behaviorController?.setup()
+    }
+
+    /**
+     * Enables tracking the keyboard animation. Expected to be on only while the sheet rests in the
+     * PRESENTED state - the enter / exit animators own `translationY` otherwise.
+     */
+    internal fun setKeyboardTrackingEnabled(enabled: Boolean) {
+        keyboardCoordinator?.isTrackingEnabled = enabled
+    }
+
+    internal fun onContentHeightChanged(height: Int) {
+        dimensionsCoordinator.onContentHeightChanged(height)
+    }
+
+    internal fun applyInitialConfig(
+        config: FormSheetConfig,
+        contentHeight: Int,
+    ) {
+        onContentHeightChanged(contentHeight)
+        dimensionsCoordinator.updateFormSheetDimensions(
+            resolveDetents(config.detents),
+            config.initialDetentIndex,
+            applyInitialDetent = true,
+        )
+        container.setGrabberVisible(config.prefersGrabberVisible)
+        appearanceCoordinator.updateCornerRadius(config.preferredCornerRadius)
+        appearanceCoordinator.updateBackgroundColor(config.nativeContainerBackgroundColor)
+        nativeDismissCoordinator.shouldPreventDismiss = config.shouldPreventNativeDismiss
+    }
+
+    internal fun applyConfigUpdate(
+        oldConfig: FormSheetConfig,
+        newConfig: FormSheetConfig,
+    ) {
+        if (oldConfig.detents != newConfig.detents) {
+            dimensionsCoordinator.updateFormSheetDimensions(
+                resolveDetents(newConfig.detents),
+                newConfig.initialDetentIndex,
+            )
+        }
+
+        if (oldConfig.prefersGrabberVisible != newConfig.prefersGrabberVisible) {
+            container.setGrabberVisible(newConfig.prefersGrabberVisible)
+        }
+
+        if (oldConfig.preferredCornerRadius != newConfig.preferredCornerRadius) {
+            appearanceCoordinator.updateCornerRadius(newConfig.preferredCornerRadius)
+        }
+
+        if (oldConfig.nativeContainerBackgroundColor != newConfig.nativeContainerBackgroundColor) {
+            appearanceCoordinator.updateBackgroundColor(newConfig.nativeContainerBackgroundColor)
+        }
+
+        if (oldConfig.shouldPreventNativeDismiss != newConfig.shouldPreventNativeDismiss) {
+            nativeDismissCoordinator.shouldPreventDismiss = newConfig.shouldPreventNativeDismiss
+        }
+    }
+
+    internal fun destroy() {
+        behaviorController?.destroy()
+        nativeDismissCoordinator.destroy()
+        dimensionsCoordinator.destroy()
+        keyboardCoordinator?.destroy()
+
+        dialog.setOnShowListener(null)
+        dialog.dismiss()
+
+        // The FormSheetContainer outlives the presentation - its lifecycle is managed by FormSheetDialogManager
+        // which is tied with the React's Host lifecycle.
+        (container.parent as? ViewGroup)?.removeView(container)
+    }
+
+    private fun resolveDetents(rawDetents: List<Double>): FormSheetDetents {
+        if (rawDetents.isEmpty()) {
+            return FormSheetDetents(listOf(LARGE_DETENT_FRACTION))
+        }
+
+        return try {
+            FormSheetDetents(rawDetents)
+        } catch (e: IllegalArgumentException) {
+            Log.e(
+                "[RNScreens]",
+                "Invalid FormSheet detents: $rawDetents. Falling back to large detent.",
+                e,
+            )
+            FormSheetDetents(listOf(LARGE_DETENT_FRACTION))
+        }
+    }
+
+    companion object {
+        private const val LARGE_DETENT_FRACTION = 1.0
+    }
+}