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

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

@@ -0,0 +1,488 @@
+package com.swmansion.rnscreens.bottomsheet
+
+import android.animation.ValueAnimator
+import android.app.Activity
+import android.graphics.Color
+import android.os.Bundle
+import android.view.LayoutInflater
+import android.view.View
+import android.view.ViewGroup
+import android.view.animation.Animation
+import android.view.animation.AnimationUtils
+import androidx.appcompat.widget.Toolbar
+import androidx.core.graphics.Insets
+import androidx.core.view.OnApplyWindowInsetsListener
+import androidx.core.view.WindowInsetsCompat
+import androidx.fragment.app.Fragment
+import androidx.fragment.app.commit
+import androidx.lifecycle.Lifecycle
+import androidx.lifecycle.LifecycleEventObserver
+import androidx.lifecycle.LifecycleOwner
+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.BottomSheetBehavior.BottomSheetCallback
+import com.swmansion.rnscreens.InsetsObserverProxy
+import com.swmansion.rnscreens.KeyboardDidHide
+import com.swmansion.rnscreens.KeyboardNotVisible
+import com.swmansion.rnscreens.KeyboardState
+import com.swmansion.rnscreens.KeyboardVisible
+import com.swmansion.rnscreens.R
+import com.swmansion.rnscreens.Screen
+import com.swmansion.rnscreens.ScreenContainer
+import com.swmansion.rnscreens.ScreenFragment
+import com.swmansion.rnscreens.ScreenFragmentWrapper
+import com.swmansion.rnscreens.ScreenStack
+import com.swmansion.rnscreens.ScreenStackFragment
+import com.swmansion.rnscreens.ScreenStackFragmentWrapper
+import com.swmansion.rnscreens.events.ScreenDismissedEvent
+
+/**
+ * This fragment aims to provide dimming view functionality behind the nested fragment.
+ * Useful when nested fragment is transparent / uses some kind of non-fullscreen presentation,
+ * such as `formSheet`.
+ */
+class DimmingFragment(
+    val nestedFragment: ScreenFragmentWrapper,
+) : Fragment(),
+    LifecycleEventObserver,
+    ScreenStackFragmentWrapper,
+    Animation.AnimationListener,
+    OnApplyWindowInsetsListener {
+    private lateinit var dimmingView: DimmingView
+    private lateinit var containerView: GestureTransparentViewGroup
+
+    private val maxAlpha: Float = 0.15F
+
+    private var isKeyboardVisible: Boolean = false
+    private var keyboardState: KeyboardState = KeyboardNotVisible
+
+    private var dimmingViewCallback: BottomSheetCallback? = null
+
+    private val container: ScreenStack?
+        get() = screen.container as? ScreenStack
+
+    private val insetsProxy = InsetsObserverProxy
+
+    init {
+        // We register for our child lifecycle as we want to know when it's dismissed via native gesture
+        nestedFragment.fragment.lifecycle.addObserver(this)
+    }
+
+    /**
+     * This bottom sheet callback is responsible for animating alpha of the dimming view.
+     */
+    private class AnimateDimmingViewCallback(
+        val screen: Screen,
+        val viewToAnimate: View,
+        val maxAlpha: Float,
+    ) : BottomSheetCallback() {
+        // largest *slide offset* that is yet undimmed
+        private var largestUndimmedOffset: Float =
+            computeOffsetFromDetentIndex(screen.sheetLargestUndimmedDetentIndex)
+
+        // first *slide offset* that should be fully dimmed
+        private var firstDimmedOffset: Float =
+            computeOffsetFromDetentIndex(
+                (screen.sheetLargestUndimmedDetentIndex + 1).coerceIn(
+                    0,
+                    screen.sheetDetents.count() - 1,
+                ),
+            )
+
+        // interval that we interpolate the alpha value over
+        private var intervalLength = firstDimmedOffset - largestUndimmedOffset
+        private val animator =
+            ValueAnimator.ofFloat(0F, maxAlpha).apply {
+                duration = 1 // Driven manually
+                addUpdateListener {
+                    viewToAnimate.alpha = it.animatedValue as Float
+                }
+            }
+
+        override fun onStateChanged(
+            bottomSheet: View,
+            newState: Int,
+        ) {
+            if (newState == BottomSheetBehavior.STATE_DRAGGING || newState == BottomSheetBehavior.STATE_SETTLING) {
+                largestUndimmedOffset =
+                    computeOffsetFromDetentIndex(screen.sheetLargestUndimmedDetentIndex)
+                firstDimmedOffset =
+                    computeOffsetFromDetentIndex(
+                        (screen.sheetLargestUndimmedDetentIndex + 1).coerceIn(
+                            0,
+                            screen.sheetDetents.count() - 1
+                        )
+                    )
+                assert(firstDimmedOffset >= largestUndimmedOffset) {
+                    "[RNScreens] Invariant violation: firstDimmedOffset ($firstDimmedOffset) < largestDimmedOffset ($largestUndimmedOffset)"
+                }
+                intervalLength = firstDimmedOffset - largestUndimmedOffset
+            }
+        }
+
+        override fun onSlide(
+            bottomSheet: View,
+            slideOffset: Float,
+        ) {
+            if (largestUndimmedOffset < slideOffset && slideOffset < firstDimmedOffset) {
+                val fraction = (slideOffset - largestUndimmedOffset) / intervalLength
+                animator.setCurrentFraction(fraction)
+            }
+        }
+
+        /**
+         * This method does compute slide offset (see [BottomSheetCallback.onSlide] docs) for detent
+         * at given index in the detents array.
+         */
+        private fun computeOffsetFromDetentIndex(index: Int): Float =
+            when (screen.sheetDetents.size) {
+                1 -> // Only 1 detent present in detents array
+                    when (index) {
+                        -1 -> -1F // hidden
+                        0 -> 1F // fully expanded
+                        else -> -1F // unexpected, default
+                    }
+
+                2 ->
+                    when (index) {
+                        -1 -> -1F // hidden
+                        0 -> 0F // collapsed
+                        1 -> 1F // expanded
+                        else -> -1F
+                    }
+
+                3 ->
+                    when (index) {
+                        -1 -> -1F // hidden
+                        0 -> 0F // collapsed
+                        1 -> screen.sheetBehavior!!.halfExpandedRatio // half
+                        2 -> 1F // expanded
+                        else -> -1F
+                    }
+
+                else -> -1F
+            }
+    }
+
+    override fun onCreateAnimation(
+        transit: Int,
+        enter: Boolean,
+        nextAnim: Int,
+    ): Animation? =
+        // We want dimming view to have always fade animation in current usages.
+        AnimationUtils.loadAnimation(
+            context,
+            if (enter) R.anim.rns_fade_in else R.anim.rns_fade_out
+        )
+
+    override fun onCreateView(
+        inflater: LayoutInflater,
+        container: ViewGroup?,
+        savedInstanceState: Bundle?,
+    ): View {
+        initViewHierarchy()
+        return containerView
+    }
+
+    override fun onViewCreated(
+        view: View,
+        savedInstanceState: Bundle?,
+    ) {
+        if (screen.sheetInitialDetentIndex <= screen.sheetLargestUndimmedDetentIndex) {
+            dimmingView.alpha = 0.0F
+        } else {
+            dimmingView.alpha = maxAlpha
+        }
+    }
+
+    override fun onStart() {
+        // This is the earliest we can access child fragment manager & present another fragment
+        super.onStart()
+        insetsProxy.registerOnView(requireRootView())
+        presentNestedFragment()
+    }
+
+    override fun onResume() {
+        insetsProxy.addOnApplyWindowInsetsListener(this)
+        super.onResume()
+    }
+
+    override fun onPause() {
+        super.onPause()
+        insetsProxy.removeOnApplyWindowInsetsListener(this)
+    }
+
+    override fun onStateChanged(
+        source: LifecycleOwner,
+        event: Lifecycle.Event,
+    ) {
+        when (event) {
+            Lifecycle.Event.ON_START -> {
+                nestedFragment.screen.sheetBehavior?.let {
+                    dimmingViewCallback =
+                        AnimateDimmingViewCallback(nestedFragment.screen, dimmingView, maxAlpha)
+                    it.addBottomSheetCallback(dimmingViewCallback!!)
+                }
+            }
+
+            Lifecycle.Event.ON_STOP -> {
+                dismissSelf(emitDismissedEvent = true)
+            }
+
+            else -> {}
+        }
+    }
+
+    private fun presentNestedFragment() {
+        childFragmentManager.commit(allowStateLoss = true) {
+            setReorderingAllowed(true)
+            add(requireView().id, nestedFragment.fragment, null)
+        }
+    }
+
+    private fun cleanRegisteredCallbacks() {
+        dimmingViewCallback?.let {
+            nestedFragment.screen.sheetBehavior?.removeBottomSheetCallback(it)
+        }
+        dimmingView.setOnClickListener(null)
+        nestedFragment.fragment.lifecycle.removeObserver(this)
+        insetsProxy.removeOnApplyWindowInsetsListener(this)
+    }
+
+    private fun dismissSelf(emitDismissedEvent: Boolean = false) {
+        if (!this.isRemoving) {
+            if (emitDismissedEvent) {
+                val reactContext = nestedFragment.screen.reactContext
+                val surfaceId = UIManagerHelper.getSurfaceId(reactContext)
+                UIManagerHelper
+                    .getEventDispatcherForReactTag(reactContext, screen.id)
+                    ?.dispatchEvent(ScreenDismissedEvent(surfaceId, screen.id))
+            }
+            cleanRegisteredCallbacks()
+            dismissFromContainer()
+        }
+    }
+
+    private fun initViewHierarchy() {
+        initContainerView()
+        initDimmingView()
+        containerView.addView(dimmingView)
+    }
+
+    private fun initContainerView() {
+        containerView =
+            GestureTransparentViewGroup(requireContext()).apply {
+                // These do not guarantee fullscreen width & height, TODO: find a way to guarantee that
+                layoutParams =
+                    ViewGroup.LayoutParams(
+                        ViewGroup.LayoutParams.MATCH_PARENT,
+                        ViewGroup.LayoutParams.MATCH_PARENT,
+                    )
+                setBackgroundColor(Color.TRANSPARENT)
+                // This is purely native view, React does not know of it, thus there should be no conflict with ids.
+                id = View.generateViewId()
+            }
+    }
+
+    private fun initDimmingView() {
+        dimmingView =
+            DimmingView(requireContext(), maxAlpha).apply {
+                // These do not guarantee fullscreen width & height, TODO: find a way to guarantee that
+                layoutParams =
+                    ViewGroup.LayoutParams(
+                        ViewGroup.LayoutParams.MATCH_PARENT,
+                        ViewGroup.LayoutParams.MATCH_PARENT,
+                    )
+                setOnClickListener {
+                    if (screen.sheetClosesOnTouchOutside) {
+                        dismissSelf(true)
+                    }
+                }
+            }
+    }
+
+    private fun requireRootView(): View =
+        checkNotNull(screen.reactContext.currentActivity) { "[RNScreens] Attempt to access activity on detached context" }
+            .window.decorView
+
+    // TODO: Move these methods related to toolbar to separate interface
+    override fun removeToolbar() = Unit
+
+    override fun setToolbar(toolbar: Toolbar) = Unit
+
+    override fun setToolbarShadowHidden(hidden: Boolean) = Unit
+
+    override fun setToolbarTranslucent(translucent: Boolean) = Unit
+
+    // Dimming view should never be bottom-most fragment
+    override fun canNavigateBack(): Boolean = true
+
+    override fun dismissFromContainer() {
+        container?.dismiss(this)
+    }
+
+    override var screen: Screen
+        get() = nestedFragment.screen
+        set(value) {
+            nestedFragment.screen = value
+        }
+
+    override val childScreenContainers: List<ScreenContainer> = nestedFragment.childScreenContainers
+
+    override fun addChildScreenContainer(container: ScreenContainer) {
+        nestedFragment.addChildScreenContainer(container)
+    }
+
+    override fun removeChildScreenContainer(container: ScreenContainer) {
+        nestedFragment.removeChildScreenContainer(container)
+    }
+
+    override fun onContainerUpdate() {
+        nestedFragment.onContainerUpdate()
+    }
+
+    override fun onViewAnimationStart() {
+        nestedFragment.onViewAnimationStart()
+    }
+
+    override fun onViewAnimationEnd() {
+        nestedFragment.onViewAnimationEnd()
+    }
+
+    override fun tryGetActivity(): Activity? {
+        return activity
+    }
+
+    override fun tryGetContext(): ReactContext? {
+        return context as? ReactContext?
+    }
+
+    override val fragment: Fragment
+        get() = this
+
+    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 onAnimationStart(animation: Animation?) = Unit
+
+    override fun onAnimationEnd(animation: Animation?) {
+        dismissFromContainer()
+    }
+
+    override fun onAnimationRepeat(animation: Animation?) = Unit
+
+    companion object {
+        const val TAG = "DimmingFragment"
+    }
+
+    // This is View.OnApplyWindowInsetsListener method, not view's own!
+    override fun onApplyWindowInsets(
+        v: View,
+        insets: WindowInsetsCompat,
+    ): WindowInsetsCompat {
+        val isImeVisible = insets.isVisible(WindowInsetsCompat.Type.ime())
+        val imeInset = insets.getInsets(WindowInsetsCompat.Type.ime())
+
+        if (isImeVisible) {
+            isKeyboardVisible = true
+            keyboardState = KeyboardVisible(imeInset.bottom)
+            screen.sheetBehavior?.let {
+                (nestedFragment as ScreenStackFragment).configureBottomSheetBehaviour(
+                    it,
+                    KeyboardVisible(imeInset.bottom)
+                )
+            }
+
+            if (this.isRemoving) {
+                return insets
+            }
+
+            val prevInsets = insets.getInsets(WindowInsetsCompat.Type.navigationBars())
+            return WindowInsetsCompat
+                .Builder(insets)
+                .setInsets(
+                    WindowInsetsCompat.Type.navigationBars(),
+                    Insets.of(
+                        prevInsets.left,
+                        prevInsets.top,
+                        prevInsets.right,
+                        0,
+                    ),
+                ).build()
+        } else {
+            if (this.isRemoving) {
+                val prevInsets = insets.getInsets(WindowInsetsCompat.Type.navigationBars())
+                return WindowInsetsCompat
+                    .Builder(insets)
+                    .setInsets(
+                        WindowInsetsCompat.Type.navigationBars(),
+                        Insets.of(
+                            prevInsets.left,
+                            prevInsets.top,
+                            prevInsets.right,
+                            0,
+                        ),
+                    ).build()
+            }
+
+            screen.sheetBehavior?.let {
+                if (isKeyboardVisible) {
+                    (nestedFragment as ScreenStackFragment).configureBottomSheetBehaviour(
+                        it,
+                        KeyboardDidHide
+                    )
+                } else if (keyboardState != KeyboardNotVisible) {
+                    (nestedFragment as ScreenStackFragment).configureBottomSheetBehaviour(
+                        it,
+                        KeyboardNotVisible
+                    )
+                } else {
+                }
+            }
+
+            keyboardState = KeyboardNotVisible
+            isKeyboardVisible = false
+
+            val prevInsets = insets.getInsets(WindowInsetsCompat.Type.navigationBars())
+            return WindowInsetsCompat
+                .Builder(insets)
+                .setInsets(
+                    WindowInsetsCompat.Type.navigationBars(),
+                    Insets.of(
+                        prevInsets.left,
+                        prevInsets.top,
+                        prevInsets.right,
+                        0,
+                    ),
+                ).build()
+        }
+    }
+}

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

@@ -0,0 +1,66 @@
+package com.swmansion.rnscreens.bottomsheet
+
+import android.annotation.SuppressLint
+import android.content.Context
+import android.graphics.Color
+import android.view.MotionEvent
+import android.view.ViewGroup
+import com.facebook.react.uimanager.PointerEvents
+import com.facebook.react.uimanager.ReactCompoundViewGroup
+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
+ * the viewport.
+ *
+ * This dimming view has one more additional feature: it blocks gestures if its alpha > 0.
+ */
+@SuppressLint("ViewConstructor") // Only we instantiate this view
+class DimmingView(
+    context: Context,
+    initialAlpha: Float = 0.6F,
+) : ViewGroup(context),
+    ReactCompoundViewGroup,
+    ReactPointerEventsView {
+    private val blockGestures
+        get() = !alpha.equalWithRespectToEps(0F)
+
+    init {
+        setBackgroundColor(Color.BLACK)
+        alpha = initialAlpha
+    }
+
+    // This view group is not supposed to have any children, however we need it to be a view group
+    override fun onLayout(
+        changed: Boolean,
+        l: Int,
+        t: Int,
+        r: Int,
+        b: Int,
+    ) = Unit
+
+    override fun onTouchEvent(event: MotionEvent?): Boolean {
+        if (blockGestures) {
+            callOnClick()
+        }
+        return blockGestures
+    }
+
+    override fun reactTagForTouch(
+        x: Float,
+        y: Float,
+    ): Int = throw IllegalStateException("[RNScreens] $TAG should never be asked for the view tag!")
+
+    override fun interceptsTouchEvent(
+        x: Float,
+        y: Float,
+    ) = blockGestures
+
+    override fun getPointerEvents(): PointerEvents =
+        if (blockGestures) PointerEvents.AUTO else PointerEvents.NONE
+
+    companion object {
+        const val TAG = "DimmingView"
+    }
+}

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

@@ -0,0 +1,24 @@
+package com.swmansion.rnscreens.bottomsheet
+
+import android.content.Context
+import android.widget.FrameLayout
+import com.facebook.react.uimanager.PointerEvents
+import com.facebook.react.uimanager.ReactPointerEventsView
+
+/**
+ * View group that will be ignored by RN event system, and won't be target of touches.
+ *
+ * Currently used as container for the form sheet, so that user can interact with the view
+ * under the sheet (otherwise RN captures the gestures).
+ */
+class GestureTransparentViewGroup(
+    context: Context,
+) : FrameLayout(context),
+    ReactPointerEventsView {
+
+    override fun getPointerEvents(): PointerEvents = PointerEvents.BOX_NONE
+
+    companion object {
+        const val TAG = "GestureTransparentFrameLayout"
+    }
+}

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

@@ -0,0 +1,127 @@
+package com.swmansion.rnscreens.bottomsheet
+
+import com.google.android.material.bottomsheet.BottomSheetBehavior
+import com.google.android.material.bottomsheet.BottomSheetBehavior.STATE_COLLAPSED
+import com.google.android.material.bottomsheet.BottomSheetBehavior.STATE_EXPANDED
+import com.google.android.material.bottomsheet.BottomSheetBehavior.STATE_HALF_EXPANDED
+import com.google.android.material.bottomsheet.BottomSheetBehavior.STATE_HIDDEN
+
+object SheetUtils {
+    /**
+     * Verifies whether BottomSheetBehavior.State is one of stable states. As unstable states
+     * we consider `STATE_DRAGGING` and `STATE_SETTLING`.
+     *
+     * @param state bottom sheet state to verify
+     */
+    fun isStateStable(state: Int): Boolean =
+        when (state) {
+            STATE_HIDDEN,
+            STATE_EXPANDED,
+            STATE_COLLAPSED,
+            STATE_HALF_EXPANDED,
+            -> true
+
+            else -> false
+        }
+
+    /**
+     * This method maps indices from legal detents array (prop) to appropriate values
+     * recognized by BottomSheetBehaviour. In particular used when setting up the initial behaviour
+     * of the form sheet.
+     *
+     * @param index index from array with detents fractions
+     * @param detentCount length of array with detents fractions
+     *
+     * @throws IllegalArgumentException for invalid index / detentCount combinations
+     */
+    fun sheetStateFromDetentIndex(
+        index: Int,
+        detentCount: Int,
+    ): Int =
+        when (detentCount) {
+            1 ->
+                when (index) {
+                    -1 -> STATE_HIDDEN
+                    0 -> STATE_EXPANDED
+                    else -> throw IllegalArgumentException("[RNScreens] Invalid detentCount/index combination $detentCount / $index")
+                }
+
+            2 ->
+                when (index) {
+                    -1 -> STATE_HIDDEN
+                    0 -> STATE_COLLAPSED
+                    1 -> STATE_EXPANDED
+                    else -> throw IllegalArgumentException("[RNScreens] Invalid detentCount/index combination $detentCount / $index")
+                }
+
+            3 ->
+                when (index) {
+                    -1 -> STATE_HIDDEN
+                    0 -> STATE_COLLAPSED
+                    1 -> STATE_HALF_EXPANDED
+                    2 -> STATE_EXPANDED
+                    else -> throw IllegalArgumentException("[RNScreens] Invalid detentCount/index combination $detentCount / $index")
+                }
+
+            else -> throw IllegalArgumentException("[RNScreens] Invalid detentCount/index combination $detentCount / $index")
+        }
+
+    /**
+     * This method maps BottomSheetBehavior.State values to appropriate indices of detents array.
+     *
+     * @param state state of the bottom sheet
+     * @param detentCount length of array with detents fractions
+     *
+     * @throws IllegalArgumentException for invalid state / detentCount combinations
+     */
+    fun detentIndexFromSheetState(
+        @BottomSheetBehavior.State state: Int,
+        detentCount: Int,
+    ): Int =
+        when (detentCount) {
+            1 ->
+                when (state) {
+                    STATE_HIDDEN -> -1
+                    STATE_EXPANDED -> 0
+                    else -> throw IllegalArgumentException("[RNScreens] Invalid state $state for detentCount $detentCount")
+                }
+
+            2 ->
+                when (state) {
+                    STATE_HIDDEN -> -1
+                    STATE_COLLAPSED -> 0
+                    STATE_EXPANDED -> 1
+                    else -> throw IllegalArgumentException("[RNScreens] Invalid state $state for detentCount $detentCount")
+                }
+
+            3 ->
+                when (state) {
+                    STATE_HIDDEN -> -1
+                    STATE_COLLAPSED -> 0
+                    STATE_HALF_EXPANDED -> 1
+                    STATE_EXPANDED -> 2
+                    else -> throw IllegalArgumentException("[RNScreens] Invalid state $state for detentCount $detentCount")
+                }
+
+            else -> throw IllegalArgumentException("[RNScreens] Invalid state $state for detentCount $detentCount")
+        }
+
+    fun isStateLessEqualThan(
+        state: Int,
+        otherState: Int,
+    ): Boolean {
+        if (state == otherState) {
+            return true
+        }
+        if (state != STATE_HALF_EXPANDED && otherState != STATE_HALF_EXPANDED) {
+            return state > otherState
+        }
+        if (state == STATE_HALF_EXPANDED) {
+            return otherState == BottomSheetBehavior.STATE_EXPANDED
+        }
+        if (state == STATE_COLLAPSED) {
+            return otherState != STATE_HIDDEN
+        }
+        return false
+    }
+}