react-native-screens 4.7.0-beta.0 → 4.7.0-beta.2

package/android/build.gradle

@@ -95,6 +95,14 @@ def safeAppExtGet(prop, fallback) {
     appProject?.ext?.has(prop) ? appProject.ext.get(prop) : fallback
 }
 
+def reactNativeRootDir = resolveReactNativeDirectory()
+
+def reactProperties = new Properties()
+file("$reactNativeRootDir/ReactAndroid/gradle.properties").withInputStream { reactProperties.load(it) }
+
+def REACT_NATIVE_VERSION = reactProperties.getProperty("VERSION_NAME")
+def REACT_NATIVE_MINOR_VERSION = REACT_NATIVE_VERSION.startsWith("0.0.0-") ? 1000 : REACT_NATIVE_VERSION.split("\\.")[1].toInteger()
+
 def IS_NEW_ARCHITECTURE_ENABLED = isNewArchitectureEnabled()
 
 android {
@@ -166,6 +174,7 @@ android {
     sourceSets.main {
         ext.androidResDir = "src/main/res"
         java {
+            // Architecture specific
             if (IS_NEW_ARCHITECTURE_ENABLED) {
                 srcDirs += [
                     "src/fabric/java",
@@ -175,6 +184,15 @@ android {
                     "src/paper/java",
                 ]
             }
+
+            // Background color resolving
+            if (REACT_NATIVE_MINOR_VERSION <= 74) {
+                srcDirs += "src/versioned/backgroundcolor/74"
+            } else if (REACT_NATIVE_MINOR_VERSION <= 76) {
+                srcDirs += "src/versioned/backgroundcolor/76"
+            } else {
+                srcDirs += "src/versioned/backgroundcolor/latest"
+            }
         }
         res {
             if (safeExtGet(['compileSdkVersion', 'compileSdk'], rnsDefaultCompileSdkVersion) >= 33) {
@@ -188,7 +206,7 @@ android {
 
 repositories {
     maven {
-        url "${resolveReactNativeDirectory()}/android"
+        url "${reactNativeRootDir}/android"
     }
 
     mavenCentral()

package/android/src/main/java/com/swmansion/rnscreens/Screen.kt

@@ -5,6 +5,7 @@ import android.content.pm.ActivityInfo
 import android.graphics.Paint
 import android.os.Parcelable
 import android.util.SparseArray
+import android.view.MotionEvent
 import android.view.View
 import android.view.ViewGroup
 import android.view.WindowManager
@@ -17,6 +18,7 @@ import androidx.swiperefreshlayout.widget.SwipeRefreshLayout
 import com.facebook.react.bridge.GuardedRunnable
 import com.facebook.react.bridge.ReactContext
 import com.facebook.react.uimanager.PixelUtil
+import com.facebook.react.uimanager.ThemedReactContext
 import com.facebook.react.uimanager.UIManagerHelper
 import com.facebook.react.uimanager.UIManagerModule
 import com.facebook.react.uimanager.events.EventDispatcher
@@ -24,13 +26,16 @@ import com.google.android.material.bottomsheet.BottomSheetBehavior
 import com.google.android.material.shape.CornerFamily
 import com.google.android.material.shape.MaterialShapeDrawable
 import com.google.android.material.shape.ShapeAppearanceModel
+import com.swmansion.rnscreens.bottomsheet.isSheetFitToContents
+import com.swmansion.rnscreens.bottomsheet.usesFormSheetPresentation
 import com.swmansion.rnscreens.events.HeaderHeightChangeEvent
 import com.swmansion.rnscreens.events.SheetDetentChangedEvent
+import com.swmansion.rnscreens.ext.parentAsViewGroup
 import java.lang.ref.WeakReference
 
 @SuppressLint("ViewConstructor") // Only we construct this view, it is never inflated.
 class Screen(
-    val reactContext: ReactContext,
+    val reactContext: ThemedReactContext,
 ) : FabricEnabledViewGroup(reactContext),
     ScreenContentWrapper.OnLayoutCallback {
     val fragment: Fragment?
@@ -81,6 +86,13 @@ class Screen(
     var sheetClosesOnTouchOutside = true
     var sheetElevation: Float = 24F
 
+    /**
+     * When using form sheet presentation we want to delay enter transition **on Paper** in order
+     * to wait for initial layout from React, otherwise the animator-based animation will look
+     * glitchy. *This is not needed on Fabric*.
+     */
+    var shouldTriggerPostponedTransitionAfterLayout = false
+
     var footer: ScreenFooter? = null
         set(value) {
             if (value == null && field != null) {
@@ -110,7 +122,7 @@ class Screen(
      * `fitToContents` for formSheets, as this is first entry point where we can acquire
      * height of our content.
      */
-    override fun onLayoutCallback(
+    override fun onContentWrapperLayout(
         changed: Boolean,
         left: Int,
         top: Int,
@@ -119,12 +131,23 @@ class Screen(
     ) {
         val height = bottom - top
 
-        if (sheetDetents.count() == 1 && sheetDetents.first() == SHEET_FIT_TO_CONTENTS) {
+        if (isSheetFitToContents()) {
             sheetBehavior?.let {
                 if (it.maxHeight != height) {
                     it.maxHeight = height
                 }
             }
+
+            if (!BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
+                // On old architecture we delay enter transition in order to wait for initial frame.
+                shouldTriggerPostponedTransitionAfterLayout = true
+                val parent = parentAsViewGroup()
+                if (parent != null && !parent.isInLayout) {
+                    // There are reported cases (irreproducible) when Screen is not laid out after
+                    // maxHeight is set on behaviour.
+                    parent.requestLayout()
+                }
+            }
         }
     }
 
@@ -162,6 +185,17 @@ class Screen(
 
             footer?.onParentLayout(changed, l, t, r, b, container!!.height)
             notifyHeaderHeightChange(t)
+
+            if (!BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
+                maybeTriggerPostponedTransition()
+            }
+        }
+    }
+
+    private fun maybeTriggerPostponedTransition() {
+        if (shouldTriggerPostponedTransitionAfterLayout) {
+            shouldTriggerPostponedTransitionAfterLayout = false
+            fragment?.startPostponedEnterTransition()
         }
     }
 
@@ -377,6 +411,28 @@ class Screen(
         }
     }
 
+    fun endRemovalTransition() {
+        if (!isBeingRemoved) {
+            return
+        }
+        isBeingRemoved = false
+        endTransitionRecursive(this)
+    }
+
+    private fun endTransitionRecursive(parent: ViewGroup) {
+        parent.children.forEach { childView ->
+            parent.endViewTransition(childView)
+
+            if (childView is ScreenStackHeaderConfig) {
+                endTransitionRecursive(childView.toolbar)
+            }
+
+            if (childView is ViewGroup) {
+                endTransitionRecursive(childView)
+            }
+        }
+    }
+
     private fun startTransitionRecursive(parent: ViewGroup?) {
         parent?.let {
             for (i in 0 until it.childCount) {
@@ -407,6 +463,17 @@ class Screen(
         }
     }
 
+    // We do not want to perform any action, therefore do not need to override the associated method.
+    @SuppressLint("ClickableViewAccessibility")
+    override fun onTouchEvent(event: MotionEvent?): Boolean =
+        if (usesFormSheetPresentation()) {
+            // If we're a form sheet we want to consume the gestures to prevent
+            // DimmingView's callback from triggering when clicking on the sheet itself.
+            true
+        } else {
+            super.onTouchEvent(event)
+        }
+
     private fun notifyHeaderHeightChange(headerHeight: Int) {
         val screenContext = context as ReactContext
         val surfaceId = UIManagerHelper.getSurfaceId(screenContext)

package/android/src/main/java/com/swmansion/rnscreens/ScreenContentWrapper.kt

@@ -17,7 +17,7 @@ class ScreenContentWrapper(
     internal var delegate: OnLayoutCallback? = null
 
     interface OnLayoutCallback {
-        fun onLayoutCallback(
+        fun onContentWrapperLayout(
             changed: Boolean,
             left: Int,
             top: Int,
@@ -33,6 +33,6 @@ class ScreenContentWrapper(
         right: Int,
         bottom: Int,
     ) {
-        delegate?.onLayoutCallback(changed, left, top, right, bottom)
+        delegate?.onContentWrapperLayout(changed, left, top, right, bottom)
     }
 }

package/android/src/main/java/com/swmansion/rnscreens/ScreenFragment.kt

@@ -15,7 +15,6 @@ import com.facebook.react.bridge.UiThreadUtil
 import com.facebook.react.uimanager.UIManagerHelper
 import com.facebook.react.uimanager.events.Event
 import com.facebook.react.uimanager.events.EventDispatcher
-import com.swmansion.rnscreens.bottomsheet.DimmingFragment
 import com.swmansion.rnscreens.events.HeaderBackButtonClickedEvent
 import com.swmansion.rnscreens.events.ScreenAppearEvent
 import com.swmansion.rnscreens.events.ScreenDisappearEvent
@@ -290,12 +289,7 @@ open class ScreenFragment :
         // since we subscribe to parent's animation start/end and dispatch events in child from there
         // check for `isTransitioning` should be enough since the child's animation should take only
         // 20ms due to always being `StackAnimation.NONE` when nested stack being pushed
-        val parent =
-            if (parentFragment is DimmingFragment) {
-                parentFragment?.parentFragment
-            } else {
-                parentFragment
-            }
+        val parent = parentFragment
         if (parent == null || (parent is ScreenFragment && !parent.isTransitioning)) {
             // onViewAnimationStart/End is triggered from View#onAnimationStart/End method of the fragment's root
             // view. We override an appropriate method of the StackFragment's

package/android/src/main/java/com/swmansion/rnscreens/ScreenStack.kt

@@ -7,11 +7,10 @@ import android.view.View
 import com.facebook.react.bridge.ReactContext
 import com.facebook.react.uimanager.UIManagerHelper
 import com.swmansion.rnscreens.Screen.StackAnimation
-import com.swmansion.rnscreens.bottomsheet.DimmingFragment
+import com.swmansion.rnscreens.bottomsheet.isSheetFitToContents
 import com.swmansion.rnscreens.events.StackFinishTransitioningEvent
 import java.util.Collections
 import kotlin.collections.ArrayList
-import kotlin.collections.HashSet
 
 class ScreenStack(
     context: Context?,
@@ -50,7 +49,7 @@ class ScreenStack(
 
     override fun adapt(screen: Screen): ScreenStackFragmentWrapper =
         when (screen.stackPresentation) {
-            Screen.StackPresentation.FORM_SHEET -> DimmingFragment(ScreenStackFragment(screen))
+            Screen.StackPresentation.FORM_SHEET -> ScreenStackFragment(screen)
             else -> ScreenStackFragment(screen)
         }
 
@@ -242,7 +241,6 @@ class ScreenStack(
                     }
                 }
             }
-
             // animation logic end
             goingForward = shouldUseOpenAnimation
 
@@ -302,6 +300,12 @@ class ScreenStack(
                     }
                 }
             } else if (newTop != null && !newTop.fragment.isAdded) {
+                if (!BuildConfig.IS_NEW_ARCHITECTURE_ENABLED && newTop.screen.isSheetFitToContents()) {
+                    // On old architecture the content wrapper might not have received its frame yet,
+                    // which is required to determine height of the sheet after animation. Therefore
+                    // we delay the transition and trigger it after views receive the layout.
+                    newTop.fragment.postponeEnterTransition()
+                }
                 it.add(id, newTop.fragment)
             }
             topScreenWrapper = newTop as? ScreenStackFragmentWrapper

package/android/src/main/java/com/swmansion/rnscreens/ScreenStackFragment.kt

@@ -1,5 +1,8 @@
 package com.swmansion.rnscreens
 
+import android.animation.Animator
+import android.animation.AnimatorSet
+import android.animation.ValueAnimator
 import android.annotation.SuppressLint
 import android.content.Context
 import android.graphics.Color
@@ -16,7 +19,6 @@ import android.view.WindowInsets
 import android.view.WindowManager
 import android.view.animation.Animation
 import android.view.animation.AnimationSet
-import android.view.animation.AnimationUtils
 import android.view.animation.Transformation
 import android.view.inputmethod.InputMethodManager
 import android.widget.LinearLayout
@@ -27,6 +29,7 @@ import androidx.core.view.WindowInsetsCompat
 import com.facebook.react.uimanager.PixelUtil
 import com.facebook.react.uimanager.PointerEvents
 import com.facebook.react.uimanager.ReactPointerEventsView
+import com.facebook.react.uimanager.UIManagerHelper
 import com.google.android.material.appbar.AppBarLayout
 import com.google.android.material.appbar.AppBarLayout.ScrollingViewBehavior
 import com.google.android.material.bottomsheet.BottomSheetBehavior
@@ -34,14 +37,20 @@ import com.google.android.material.bottomsheet.BottomSheetBehavior.BottomSheetCa
 import com.google.android.material.shape.CornerFamily
 import com.google.android.material.shape.MaterialShapeDrawable
 import com.google.android.material.shape.ShapeAppearanceModel
+import com.swmansion.rnscreens.bottomsheet.DimmingViewManager
+import com.swmansion.rnscreens.bottomsheet.SheetDelegate
 import com.swmansion.rnscreens.bottomsheet.SheetUtils
 import com.swmansion.rnscreens.bottomsheet.isSheetFitToContents
 import com.swmansion.rnscreens.bottomsheet.useSingleDetent
 import com.swmansion.rnscreens.bottomsheet.useThreeDetents
 import com.swmansion.rnscreens.bottomsheet.useTwoDetents
 import com.swmansion.rnscreens.bottomsheet.usesFormSheetPresentation
+import com.swmansion.rnscreens.events.ScreenDismissedEvent
+import com.swmansion.rnscreens.events.ScreenEventDelegate
 import com.swmansion.rnscreens.ext.recycle
+import com.swmansion.rnscreens.transition.ExternalBoundaryValuesEvaluator
 import com.swmansion.rnscreens.utils.DeviceUtils
+import com.swmansion.rnscreens.utils.resolveBackgroundColor
 
 sealed class KeyboardState
 
@@ -76,6 +85,13 @@ class ScreenStackFragment :
             return container
         }
 
+    private val dimmingDelegate =
+        lazy(LazyThreadSafetyMode.NONE) {
+            DimmingViewManager(screen.reactContext, screen)
+        }
+
+    private var sheetDelegate: SheetDelegate? = null
+
     @SuppressLint("ValidFragment")
     constructor(screenView: Screen) : super(screenView)
 
@@ -131,7 +147,12 @@ class ScreenStackFragment :
 
     override fun onViewAnimationEnd() {
         super.onViewAnimationEnd()
+
+        // Rely on guards inside the callee to detect whether this was indeed appear transition.
         notifyViewAppearTransitionEnd()
+
+        // Rely on guards inside the callee to detect whether this was indeed removal transition.
+        screen.endRemovalTransition()
     }
 
     private fun notifyViewAppearTransitionEnd() {
@@ -176,7 +197,7 @@ class ScreenStackFragment :
                 }
 
                 if (newState == BottomSheetBehavior.STATE_HIDDEN) {
-                    nativeDismissalObserver?.onNativeDismiss(this@ScreenStackFragment)
+                    dismissSelf()
                 }
             }
 
@@ -186,18 +207,17 @@ class ScreenStackFragment :
             ) = Unit
         }
 
-    override fun onCreateAnimation(
-        transit: Int,
-        enter: Boolean,
-        nextAnim: Int,
-    ): Animation? {
-        if (screen.stackPresentation != Screen.StackPresentation.FORM_SHEET) {
-            return null
-        }
-        return if (enter) {
-            AnimationUtils.loadAnimation(context, R.anim.rns_slide_in_from_bottom)
-        } else {
-            AnimationUtils.loadAnimation(context, R.anim.rns_slide_out_to_bottom)
+    /**
+     * Currently this method dispatches event to JS where state is recomputed and fragment
+     * gets removed in the result of incoming state update.
+     */
+    internal fun dismissSelf() {
+        if (!this.isRemoving || !this.isDetached) {
+            val reactContext = screen.reactContext
+            val surfaceId = UIManagerHelper.getSurfaceId(reactContext)
+            UIManagerHelper
+                .getEventDispatcherForReactTag(reactContext, screen.id)
+                ?.dispatchEvent(ScreenDismissedEvent(surfaceId, screen.id))
         }
     }
 
@@ -205,6 +225,10 @@ class ScreenStackFragment :
         screen.onSheetCornerRadiusChange()
     }
 
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+    }
+
     override fun onCreateView(
         inflater: LayoutInflater,
         container: ViewGroup?,
@@ -262,6 +286,90 @@ class ScreenStackFragment :
         return coordinatorLayout
     }
 
+    override fun onViewCreated(
+        view: View,
+        savedInstanceState: Bundle?,
+    ) {
+        super.onViewCreated(view, savedInstanceState)
+
+        if (!screen.usesFormSheetPresentation()) {
+            return
+        }
+
+        sheetDelegate = SheetDelegate(screen)
+
+        assert(view == coordinatorLayout)
+        dimmingDelegate.value.onViewHierarchyCreated(screen, coordinatorLayout)
+        dimmingDelegate.value.onBehaviourAttached(screen, screen.sheetBehavior!!)
+
+        val container = screen.container!!
+        coordinatorLayout.measure(
+            View.MeasureSpec.makeMeasureSpec(container.width, View.MeasureSpec.EXACTLY),
+            View.MeasureSpec.makeMeasureSpec(container.height, View.MeasureSpec.EXACTLY),
+        )
+        coordinatorLayout.layout(0, 0, container.width, container.height)
+    }
+
+    override fun onCreateAnimation(
+        transit: Int,
+        enter: Boolean,
+        nextAnim: Int,
+    ): Animation? {
+        // Ensure onCreateAnimator is called
+        return null
+    }
+
+    override fun onCreateAnimator(
+        transit: Int,
+        enter: Boolean,
+        nextAnim: Int,
+    ): Animator? {
+        if (!screen.usesFormSheetPresentation()) {
+            // Use animation defined while defining transaction in screen stack
+            return null
+        }
+
+        val animatorSet = AnimatorSet()
+
+        if (enter) {
+            val alphaAnimator =
+                ValueAnimator.ofFloat(0f, dimmingDelegate.value.maxAlpha).apply {
+                    addUpdateListener { anim ->
+                        val animatedValue = anim.animatedValue as? Float
+                        animatedValue?.let { dimmingDelegate.value.dimmingView.alpha = it }
+                    }
+                }
+            val startValueCallback = { initialStartValue: Number? -> screen.height.toFloat() }
+            val evaluator = ExternalBoundaryValuesEvaluator(startValueCallback, { 0f })
+            val slideAnimator =
+                ValueAnimator.ofObject(evaluator, screen.height.toFloat(), 0f).apply {
+                    addUpdateListener { anim ->
+                        val animatedValue = anim.animatedValue as? Float
+                        animatedValue?.let { screen.translationY = it }
+                    }
+                }
+            animatorSet.play(alphaAnimator).with(slideAnimator)
+        } else {
+            val alphaAnimator =
+                ValueAnimator.ofFloat(dimmingDelegate.value.dimmingView.alpha, 0f).apply {
+                    addUpdateListener { anim ->
+                        val animatedValue = anim.animatedValue as? Float
+                        animatedValue?.let { dimmingDelegate.value.dimmingView.alpha = it }
+                    }
+                }
+            val slideAnimator =
+                ValueAnimator.ofFloat(0f, (coordinatorLayout.bottom - screen.top).toFloat()).apply {
+                    addUpdateListener { anim ->
+                        val animatedValue = anim.animatedValue as? Float
+                        animatedValue?.let { screen.translationY = it }
+                    }
+                }
+            animatorSet.play(alphaAnimator).with(slideAnimator)
+        }
+        animatorSet.addListener(ScreenEventDelegate(this))
+        return animatorSet
+    }
+
     /**
      * This method might return slightly different values depending on code path,
      * but during testing I've found this effect negligible. For practical purposes
@@ -348,7 +456,10 @@ class ScreenStackFragment :
                         behavior.apply {
                             val height =
                                 if (screen.isSheetFitToContents()) {
-                                    screen.contentWrapper.get()?.height
+                                    screen.contentWrapper
+                                        .get()
+                                        ?.height
+                                        .takeIf { screen.contentWrapper.get()?.isLaidOut == true }
                                 } else {
                                     (screen.sheetDetents.first() * containerHeight).toInt()
                                 }
@@ -456,10 +567,30 @@ class ScreenStackFragment :
         }
     }
 
+    private fun createBottomSheetBehaviour(): BottomSheetBehavior<Screen> = BottomSheetBehavior<Screen>()
+
     // In general it would be great to create BottomSheetBehaviour only via this method as it runs some
     // side effects.
-    internal fun createAndConfigureBottomSheetBehaviour(): BottomSheetBehavior<Screen> =
-        configureBottomSheetBehaviour(BottomSheetBehavior<Screen>())
+    private fun createAndConfigureBottomSheetBehaviour(): BottomSheetBehavior<Screen> =
+        configureBottomSheetBehaviour(createBottomSheetBehaviour())
+
+    private fun resolveBackgroundColor(screen: Screen): Int? {
+        val screenColor =
+            (screen.background as? ColorDrawable?)?.color
+                ?: (screen.background as? MaterialShapeDrawable?)?.tintList?.defaultColor
+
+        if (screenColor != null) {
+            return screenColor
+        }
+
+        val contentWrapper = screen.contentWrapper.get()
+        if (contentWrapper == null) {
+            return null
+        }
+
+        val contentWrapperColor = contentWrapper.resolveBackgroundColor()
+        return contentWrapperColor
+    }
 
     private fun attachShapeToScreen(screen: Screen) {
         val cornerSize = PixelUtil.toPixelFromDIP(screen.sheetCornerRadius)
@@ -471,10 +602,8 @@ class ScreenStackFragment :
                     setTopRightCorner(CornerFamily.ROUNDED, cornerSize)
                 }.build()
         val shape = MaterialShapeDrawable(shapeAppearanceModel)
-        val currentColor =
-            (screen.background as? ColorDrawable?)?.color
-                ?: (screen.background as? MaterialShapeDrawable?)?.tintList?.defaultColor
-        shape.setTint(currentColor ?: Color.TRANSPARENT)
+        val backgroundColor = resolveBackgroundColor(screen)
+        shape.setTint(backgroundColor ?: Color.TRANSPARENT)
         screen.background = shape
     }
 

package/android/src/main/java/com/swmansion/rnscreens/bottomsheet/BottomSheetBehaviorExt.kt

@@ -12,7 +12,9 @@ internal fun <T : View> BottomSheetBehavior<T>.useSingleDetent(
     if (forceExpandedState) {
         this.state = BottomSheetBehavior.STATE_EXPANDED
     }
-    height?.let { maxHeight = height }
+    height?.let {
+        maxHeight = height
+    }
     return this
 }
 

package/android/src/main/java/com/swmansion/rnscreens/bottomsheet/DimmingView.kt

@@ -11,7 +11,7 @@ import com.facebook.react.uimanager.ReactPointerEventsView
 import com.swmansion.rnscreens.ext.equalWithRespectToEps
 
 /**
- * Serves as dimming view that can be used as background for some view that not fully fills
+ * Serves as dimming view that can be used as background for some view that does not fully fill
  * the viewport.
  *
  * This dimming view has one more additional feature: it blocks gestures if its alpha > 0.
@@ -40,6 +40,8 @@ class DimmingView(
         b: Int,
     ) = Unit
 
+    // We do not want to have any action defined here. We just want listeners notified that the click happened.
+    @SuppressLint("ClickableViewAccessibility")
     override fun onTouchEvent(event: MotionEvent?): Boolean {
         if (blockGestures) {
             callOnClick()