react-native-screens 3.35.0-rc.0 → 4.0.0-beta.0

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

@@ -15,6 +15,7 @@ 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
@@ -22,6 +23,7 @@ import com.swmansion.rnscreens.events.ScreenDismissedEvent
 import com.swmansion.rnscreens.events.ScreenTransitionProgressEvent
 import com.swmansion.rnscreens.events.ScreenWillAppearEvent
 import com.swmansion.rnscreens.events.ScreenWillDisappearEvent
+import com.swmansion.rnscreens.ext.recycle
 import kotlin.math.max
 import kotlin.math.min
 
@@ -92,7 +94,7 @@ open class ScreenFragment :
             )
         val wrapper =
             context?.let { ScreensFrameLayout(it) }?.apply {
-                addView(recycleView(screen))
+                addView(screen.recycle())
             }
         return wrapper
     }
@@ -288,7 +290,12 @@ 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 = parentFragment
+        val parent =
+            if (parentFragment is DimmingFragment) {
+                parentFragment?.parentFragment
+            } else {
+                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
@@ -312,7 +319,7 @@ open class ScreenFragment :
     override fun onDestroy() {
         super.onDestroy()
         val container = screen.container
-        if (container == null || !container.hasScreen(this)) {
+        if (container == null || !container.hasScreen(this.screen.fragmentWrapper)) {
             // we only send dismissed even when the screen has been removed from its container
             val screenContext = screen.context
             if (screenContext is ReactContext) {
@@ -326,22 +333,7 @@ open class ScreenFragment :
     }
 
     companion object {
-        @JvmStatic
-        protected fun recycleView(view: View): View {
-            // screen fragments reuse view instances instead of creating new ones. In order to reuse a given
-            // view it needs to be detached from the view hierarchy to allow the fragment to attach it back.
-            val parent = view.parent
-            if (parent != null) {
-                (parent as ViewGroup).endViewTransition(view)
-                parent.removeView(view)
-            }
-
-            // view detached from fragment manager get their visibility changed to GONE after their state is
-            // dumped. Since we don't restore the state but want to reuse the view we need to change
-            // visibility back to VISIBLE in order for the fragment manager to animate in the view.
-            view.visibility = View.VISIBLE
-            return view
-        }
+        const val TAG = "ScreenFragment"
 
         fun getCoalescingKey(progress: Float): Short {
             /* We want value of 0 and 1 to be always dispatched so we base coalescing key on the progress:

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

@@ -15,6 +15,10 @@ interface ScreenFragmentWrapper :
 
     fun removeChildScreenContainer(container: ScreenContainer)
 
+    /**
+     * Container that this fragment belongs to calls it to notify the fragment,
+     * that the container has updated.
+     */
     fun onContainerUpdate()
 
     // Animation phase callbacks

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

@@ -0,0 +1,281 @@
+package com.swmansion.rnscreens
+
+import android.app.Activity
+import android.app.Dialog
+import android.content.Context
+import android.os.Build
+import android.os.Bundle
+import android.view.LayoutInflater
+import android.view.View
+import android.view.ViewGroup
+import android.view.ViewParent
+import android.view.WindowManager
+import androidx.appcompat.widget.Toolbar
+import androidx.fragment.app.Fragment
+import com.facebook.react.bridge.ReactContext
+import com.facebook.react.uimanager.UIManagerHelper
+import com.google.android.material.bottomsheet.BottomSheetBehavior
+import com.google.android.material.bottomsheet.BottomSheetDialog
+import com.google.android.material.bottomsheet.BottomSheetDialogFragment
+import com.swmansion.rnscreens.bottomsheet.BottomSheetDialogRootView
+import com.swmansion.rnscreens.bottomsheet.BottomSheetDialogScreen
+import com.swmansion.rnscreens.bottomsheet.SheetUtils
+import com.swmansion.rnscreens.events.ScreenDismissedEvent
+import com.swmansion.rnscreens.ext.parentAsView
+import com.swmansion.rnscreens.ext.recycle
+
+class ScreenModalFragment :
+    BottomSheetDialogFragment,
+    ScreenStackFragmentWrapper {
+    override lateinit var screen: Screen
+
+    // Nested containers
+    override val childScreenContainers = ArrayList<ScreenContainer>()
+
+    private val container: ScreenStack?
+        get() = screen.container as? ScreenStack
+
+    /**
+     * Dialog instance. Note that we are responsible for creating the dialog.
+     * This member is valid after `onCreateDialog` method runs.
+     */
+    private lateinit var sheetDialog: BottomSheetDialog
+
+    /**
+     * Behaviour attached to bottom sheet dialog.
+     * This member is valid after `onCreateDialog` method runs.
+     */
+    private val behavior
+        get() = sheetDialog.behavior
+
+    override val fragment: Fragment
+        get() = this
+
+    constructor() {
+        throw IllegalStateException(
+            "Screen fragments should never be restored. Follow instructions from https://github.com/software-mansion/react-native-screens/issues/17#issuecomment-424704067 to properly configure your main activity.",
+        )
+    }
+
+    constructor(screen: Screen) : super() {
+        this.screen = screen
+    }
+
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+        // Right now whole purpose of this Fragment is to be displayed as a dialog.
+        // I've experimented with setting false here, but could not get it to work.
+        showsDialog = true
+    }
+
+    // We override this method to provide our custom dialog type instead of the default Dialog.
+    override fun onCreateDialog(savedInstanceState: Bundle?): Dialog {
+        configureDialogAndBehaviour()
+
+        val reactEventDispatcher = checkNotNull(screen.reactEventDispatcher) { "[RNScreens] No ReactEventDispatcher attached to screen while creating modal fragment" }
+        val rootView = BottomSheetDialogRootView(screen.reactContext, reactEventDispatcher)
+
+        rootView.addView(screen.recycle())
+        sheetDialog.setContentView(rootView)
+
+        rootView.parentAsView()?.clipToOutline = true
+
+        return sheetDialog
+    }
+
+    override fun onCreateView(
+        inflater: LayoutInflater,
+        container: ViewGroup?,
+        savedInstanceState: Bundle?,
+    ): View? = null
+
+    override fun dismissFromContainer() {
+        check(container is ScreenStack)
+        val container = container as ScreenStack
+        container.dismiss(this)
+    }
+
+    // Modal can never be first on the stack
+    override fun canNavigateBack(): Boolean = true
+
+    override fun addChildScreenContainer(container: ScreenContainer) {
+        childScreenContainers.add(container)
+    }
+
+    override fun removeChildScreenContainer(container: ScreenContainer) {
+        childScreenContainers.remove(container)
+    }
+
+    override fun onContainerUpdate() {
+    }
+
+    override fun onViewAnimationStart() {
+    }
+
+    override fun onViewAnimationEnd() {
+    }
+
+    override fun tryGetActivity(): Activity? = requireActivity()
+
+    override fun tryGetContext(): ReactContext? {
+        if (context is ReactContext) {
+            return context as ReactContext
+        }
+        if (screen.context is ReactContext) {
+            return screen.context as ReactContext
+        }
+
+        var parent: ViewParent? = screen.container
+        while (parent != null) {
+            if (parent is Screen && parent.context is ReactContext) {
+                return parent.context as ReactContext
+            }
+            parent = parent.parent
+        }
+
+        return null
+    }
+
+    override fun canDispatchLifecycleEvent(event: ScreenFragment.ScreenLifecycleEvent): Boolean {
+        TODO("Not yet implemented")
+    }
+
+    override fun updateLastEventDispatched(event: ScreenFragment.ScreenLifecycleEvent) {
+        TODO("Not yet implemented")
+    }
+
+    override fun dispatchLifecycleEvent(
+        event: ScreenFragment.ScreenLifecycleEvent,
+        fragmentWrapper: ScreenFragmentWrapper,
+    ) {
+        TODO("Not yet implemented")
+    }
+
+    override fun dispatchLifecycleEventInChildContainers(event: ScreenFragment.ScreenLifecycleEvent) {
+        TODO("Not yet implemented")
+    }
+
+    override fun dispatchHeaderBackButtonClickedEvent() {
+        TODO("Not yet implemented")
+    }
+
+    override fun dispatchTransitionProgressEvent(
+        alpha: Float,
+        closing: Boolean,
+    ) {
+        TODO("Not yet implemented")
+    }
+
+    override fun onDestroy() {
+        super.onDestroy()
+        val container = container
+        if (container == null || !container.hasScreen(this)) {
+            val screenContext = screen.context
+            if (screenContext is ReactContext) {
+                val surfaceId = UIManagerHelper.getSurfaceId(screenContext)
+                UIManagerHelper
+                    .getEventDispatcherForReactTag(screenContext, screen.id)
+                    ?.dispatchEvent(ScreenDismissedEvent(surfaceId, screen.id))
+            }
+        }
+        childScreenContainers.clear()
+    }
+
+    override fun removeToolbar(): Unit = throw IllegalStateException("[RNScreens] Modal screens on Android do not support header right now")
+
+    override fun setToolbar(toolbar: Toolbar): Unit =
+        throw IllegalStateException("[RNScreens] Modal screens on Android do not support header right now")
+
+    override fun setToolbarShadowHidden(hidden: Boolean): Unit =
+        throw IllegalStateException("[RNScreens] Modal screens on Android do not support header right now")
+
+    override fun setToolbarTranslucent(translucent: Boolean): Unit =
+        throw IllegalStateException("[RNScreens] Modal screens on Android do not support header right now")
+
+    private fun configureDialogAndBehaviour(): BottomSheetDialog {
+        sheetDialog = BottomSheetDialogScreen(requireContext(), this)
+        sheetDialog.dismissWithAnimation = true
+        sheetDialog.setCanceledOnTouchOutside(screen.sheetClosesOnTouchOutside)
+
+        configureBehaviour()
+
+        return sheetDialog
+    }
+
+    /**
+     * This method might return slightly different values depending on code path,
+     * but during testing I've found this effect negligible. For practical purposes
+     * this is acceptable.
+     */
+    private fun tryResolveContainerHeight(): Int? {
+        screen.container?.height?.let { return it }
+        context
+            ?.resources
+            ?.displayMetrics
+            ?.heightPixels
+            ?.let { return it }
+
+        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.R) {
+            (context?.getSystemService(Context.WINDOW_SERVICE) as? WindowManager)
+                ?.currentWindowMetrics
+                ?.bounds
+                ?.height()
+                ?.let { return it }
+        }
+        return null
+    }
+
+    private fun configureBehaviour() {
+        val containerHeight = tryResolveContainerHeight()
+        check(containerHeight != null) { "[RNScreens] Failed to find window height during bottom sheet behaviour configuration" }
+
+        behavior.apply {
+            isHideable = true
+            isDraggable = true
+        }
+
+        when (screen.sheetDetents.count()) {
+            1 ->
+                behavior.apply {
+                    state = BottomSheetBehavior.STATE_EXPANDED
+                    skipCollapsed = true
+                    isFitToContents = true
+                    maxHeight = (screen.sheetDetents.first() * containerHeight).toInt()
+                }
+
+            2 ->
+                behavior.apply {
+                    state =
+                        SheetUtils.sheetStateFromDetentIndex(
+                            screen.sheetInitialDetentIndex,
+                            screen.sheetDetents.count(),
+                        )
+                    skipCollapsed = false
+                    isFitToContents = true
+                    peekHeight = (screen.sheetDetents[0] * containerHeight).toInt()
+                    maxHeight = (screen.sheetDetents[1] * containerHeight).toInt()
+                }
+
+            3 ->
+                behavior.apply {
+                    state =
+                        SheetUtils.sheetStateFromDetentIndex(
+                            screen.sheetInitialDetentIndex,
+                            screen.sheetDetents.count(),
+                        )
+                    skipCollapsed = false
+                    isFitToContents = false
+                    peekHeight = (screen.sheetDetents[0] * containerHeight).toInt()
+                    expandedOffset = ((1 - screen.sheetDetents[2]) * containerHeight).toInt()
+                    halfExpandedRatio =
+                        (screen.sheetDetents[1] / screen.sheetDetents[2]).toFloat()
+                }
+
+            else -> throw IllegalStateException("[RNScreens] Invalid detent count ${screen.sheetDetents.count()}. Expected at most 3.")
+        }
+    }
+
+    companion object {
+        const val TAG = "ScreenModalFragment"
+    }
+}

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

@@ -7,6 +7,7 @@ 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.events.StackFinishTransitioningEvent
 import java.util.Collections
 import kotlin.collections.ArrayList
@@ -26,6 +27,11 @@ class ScreenStack(
     private var previousChildrenCount = 0
     var goingForward = false
 
+    /**
+     * Marks given fragment as to-be-dismissed and performs updates on container
+     *
+     * @param fragmentWrapper to-be-dismissed wrapper
+     */
     fun dismiss(screenFragment: ScreenStackFragmentWrapper) {
         dismissedWrappers.add(screenFragment)
         performUpdatesNow()
@@ -38,18 +44,16 @@ class ScreenStack(
         get() = stack
 
     val rootScreen: Screen
-        get() {
-            for (i in 0 until screenCount) {
-                val screenWrapper = getScreenFragmentWrapperAt(i)
-                if (!dismissedWrappers.contains(screenWrapper)) {
-                    return screenWrapper.screen
-                }
-            }
-            throw IllegalStateException("Stack has no root screen set")
+        get() =
+            screenWrappers.firstOrNull { !dismissedWrappers.contains(it) }?.screen
+                ?: throw IllegalStateException("[RNScreens] Stack has no root screen set")
+
+    override fun adapt(screen: Screen): ScreenStackFragmentWrapper =
+        when (screen.stackPresentation) {
+            Screen.StackPresentation.FORM_SHEET -> DimmingFragment(ScreenStackFragment(screen))
+            else -> ScreenStackFragment(screen)
         }
 
-    override fun adapt(screen: Screen) = ScreenStackFragment(screen)
-
     override fun startViewTransition(view: View) {
         super.startViewTransition(view)
         removalTransitionStarted = true
@@ -94,8 +98,10 @@ class ScreenStack(
         // when all screens are dismissed and no screen is to be displayed on top. We need to gracefully
         // handle the case of newTop being NULL, which happens in several places below
         var newTop: ScreenFragmentWrapper? = null // newTop is nullable, see the above comment ^
-        var visibleBottom: ScreenFragmentWrapper? = null // this is only set if newTop has TRANSPARENT_MODAL presentation mode
+        var visibleBottom: ScreenFragmentWrapper? =
+            null // this is only set if newTop has one of transparent presentation modes
         isDetachingCurrentScreen = false // we reset it so the previous value is not used by mistake
+
         for (i in screenWrappers.indices.reversed()) {
             val screenWrapper = getScreenFragmentWrapperAt(i)
             if (!dismissedWrappers.contains(screenWrapper)) {
@@ -109,6 +115,7 @@ class ScreenStack(
                 }
             }
         }
+
         var shouldUseOpenAnimation = true
         var stackAnimation: StackAnimation? = null
         if (!stack.contains(newTop)) {
@@ -141,9 +148,24 @@ class ScreenStack(
             if (stackAnimation != null) {
                 if (shouldUseOpenAnimation) {
                     when (stackAnimation) {
-                        StackAnimation.DEFAULT -> it.setCustomAnimations(R.anim.rns_default_enter_in, R.anim.rns_default_enter_out)
-                        StackAnimation.NONE -> it.setCustomAnimations(R.anim.rns_no_animation_20, R.anim.rns_no_animation_20)
-                        StackAnimation.FADE -> it.setCustomAnimations(R.anim.rns_fade_in, R.anim.rns_fade_out)
+                        StackAnimation.DEFAULT ->
+                            it.setCustomAnimations(
+                                R.anim.rns_default_enter_in,
+                                R.anim.rns_default_enter_out,
+                            )
+
+                        StackAnimation.NONE ->
+                            it.setCustomAnimations(
+                                R.anim.rns_no_animation_20,
+                                R.anim.rns_no_animation_20,
+                            )
+
+                        StackAnimation.FADE ->
+                            it.setCustomAnimations(
+                                R.anim.rns_fade_in,
+                                R.anim.rns_fade_out,
+                            )
+
                         StackAnimation.SLIDE_FROM_RIGHT ->
                             it.setCustomAnimations(
                                 R.anim.rns_slide_in_from_right,
@@ -164,9 +186,24 @@ class ScreenStack(
                     }
                 } else {
                     when (stackAnimation) {
-                        StackAnimation.DEFAULT -> it.setCustomAnimations(R.anim.rns_default_exit_in, R.anim.rns_default_exit_out)
-                        StackAnimation.NONE -> it.setCustomAnimations(R.anim.rns_no_animation_20, R.anim.rns_no_animation_20)
-                        StackAnimation.FADE -> it.setCustomAnimations(R.anim.rns_fade_in, R.anim.rns_fade_out)
+                        StackAnimation.DEFAULT ->
+                            it.setCustomAnimations(
+                                R.anim.rns_default_exit_in,
+                                R.anim.rns_default_exit_out,
+                            )
+
+                        StackAnimation.NONE ->
+                            it.setCustomAnimations(
+                                R.anim.rns_no_animation_20,
+                                R.anim.rns_no_animation_20,
+                            )
+
+                        StackAnimation.FADE ->
+                            it.setCustomAnimations(
+                                R.anim.rns_fade_in,
+                                R.anim.rns_fade_out,
+                            )
+
                         StackAnimation.SLIDE_FROM_RIGHT ->
                             it.setCustomAnimations(
                                 R.anim.rns_slide_in_from_left,
@@ -239,7 +276,9 @@ class ScreenStack(
                             }
                     }
                     // when first visible screen found, make all screens after that visible
-                    it.add(id, fragmentWrapper.fragment).runOnCommit { top?.screen?.bringToFront() }
+                    it.add(id, fragmentWrapper.fragment).runOnCommit {
+                        top?.screen?.bringToFront()
+                    }
                 }
             } else if (newTop != null && !newTop.fragment.isAdded) {
                 it.add(id, newTop.fragment)
@@ -262,7 +301,9 @@ class ScreenStack(
                     val screenFragmentsBeneathTop = screenWrappers.slice(0 until screenWrappers.size - 1).asReversed()
                     // go from the top of the stack excluding the top screen
                     for (fragmentWrapper in screenFragmentsBeneathTop) {
-                        fragmentWrapper.screen.changeAccessibilityMode(IMPORTANT_FOR_ACCESSIBILITY_NO_HIDE_DESCENDANTS)
+                        fragmentWrapper.screen.changeAccessibilityMode(
+                            IMPORTANT_FOR_ACCESSIBILITY_NO_HIDE_DESCENDANTS,
+                        )
 
                         // don't change a11y below non-transparent screens
                         if (fragmentWrapper == visibleBottom) {
@@ -363,6 +404,8 @@ class ScreenStack(
     }
 
     companion object {
+        const val TAG = "ScreenStack"
+
         private fun needsDrawReordering(fragmentWrapper: ScreenFragmentWrapper): Boolean =
             // On Android sdk 33 and above the animation is different and requires draw reordering.
             // For React Native 0.70 and lower versions, `Build.VERSION_CODES.TIRAMISU` is not defined yet.