feat(Android, Stack v5): handle header configuration and custom subviews

android/src/main/java/com/swmansion/rnscreens/RNScreensPackage.kt

@@ -8,6 +8,8 @@ import com.facebook.react.module.model.ReactModuleInfo
 import com.facebook.react.module.model.ReactModuleInfoProvider
 import com.facebook.react.uimanager.ViewManager
 import com.swmansion.rnscreens.gamma.scrollviewmarker.ScrollViewMarkerViewManager
+import com.swmansion.rnscreens.gamma.stack.header.config.StackHeaderConfigViewManager
+import com.swmansion.rnscreens.gamma.stack.header.subview.StackHeaderSubviewViewManager
 import com.swmansion.rnscreens.gamma.stack.host.StackHostViewManager
 import com.swmansion.rnscreens.gamma.stack.screen.StackScreenViewManager
 import com.swmansion.rnscreens.gamma.tabs.host.TabsHostViewManager
@@ -55,6 +57,8 @@ class RNScreensPackage : BaseReactPackage() {
             StackHostViewManager(),
             StackScreenViewManager(),
             ScrollViewMarkerViewManager(),
+            StackHeaderConfigViewManager(),
+            StackHeaderSubviewViewManager(),
         )
     }
 

android/src/main/java/com/swmansion/rnscreens/ext/ViewExt.kt

@@ -52,3 +52,7 @@ internal fun View.findFragmentOrNull(): Fragment? =
  * before being attached to window.
  */
 internal fun View.isMeasured(): Boolean = this.measuredWidth != 0 || this.measuredHeight != 0 || this.isLaidOut
+
+internal fun View.detachFromCurrentParent() {
+    (parent as? ViewGroup)?.removeView(this)
+}

android/src/main/java/com/swmansion/rnscreens/gamma/common/ShadowStateProxy.kt

@@ -0,0 +1,58 @@
+package com.swmansion.rnscreens.gamma.common
+
+import com.facebook.react.bridge.WritableNativeMap
+import com.facebook.react.uimanager.PixelUtil
+import com.facebook.react.uimanager.StateWrapper
+import kotlin.math.abs
+
+internal class ShadowStateProxy(
+    private val includesFrameSize: Boolean = true,
+) {
+    internal var stateWrapper: StateWrapper? = null
+
+    private var lastFrameWidthInDp: Float = 0f
+    private var lastFrameHeightInDp: Float = 0f
+    private var lastContentOffsetXInDp: Float = 0f
+    private var lastContentOffsetYInDp: Float = 0f
+
+    fun updateStateIfNeeded(
+        frameWidth: Int? = null,
+        frameHeight: Int? = null,
+        contentOffsetX: Int? = null,
+        contentOffsetY: Int? = null,
+    ) {
+        val widthInDp = frameWidth?.let { PixelUtil.toDIPFromPixel(it.toFloat()) } ?: lastFrameWidthInDp
+        val heightInDp = frameHeight?.let { PixelUtil.toDIPFromPixel(it.toFloat()) } ?: lastFrameHeightInDp
+        val offsetXInDp = contentOffsetX?.let { PixelUtil.toDIPFromPixel(it.toFloat()) } ?: lastContentOffsetXInDp
+        val offsetYInDp = contentOffsetY?.let { PixelUtil.toDIPFromPixel(it.toFloat()) } ?: lastContentOffsetYInDp
+
+        if (
+            abs(lastFrameWidthInDp - widthInDp) < DELTA &&
+            abs(lastFrameHeightInDp - heightInDp) < DELTA &&
+            abs(lastContentOffsetXInDp - offsetXInDp) < DELTA &&
+            abs(lastContentOffsetYInDp - offsetYInDp) < DELTA
+        ) {
+            return
+        }
+
+        lastFrameWidthInDp = widthInDp
+        lastFrameHeightInDp = heightInDp
+        lastContentOffsetXInDp = offsetXInDp
+        lastContentOffsetYInDp = offsetYInDp
+
+        val map =
+            WritableNativeMap().apply {
+                if (includesFrameSize) {
+                    putDouble("frameWidth", widthInDp.toDouble())
+                    putDouble("frameHeight", heightInDp.toDouble())
+                }
+                putDouble("contentOffsetX", offsetXInDp.toDouble())
+                putDouble("contentOffsetY", offsetYInDp.toDouble())
+            }
+        stateWrapper?.updateState(map)
+    }
+
+    companion object {
+        private const val DELTA = 0.1f
+    }
+}

android/src/main/java/com/swmansion/rnscreens/gamma/stack/screen/header/StackScreenAppBarLayout.kt → android/src/main/java/com/swmansion/rnscreens/gamma/stack/header/StackHeaderAppBarLayout.kt

@@ -1,4 +1,4 @@
-package com.swmansion.rnscreens.gamma.stack.screen.header
+package com.swmansion.rnscreens.gamma.stack.header
 
 import android.annotation.SuppressLint
 import android.content.Context
@@ -10,13 +10,12 @@ import com.google.android.material.appbar.AppBarLayout
 import com.google.android.material.appbar.AppBarLayout.LayoutParams.SCROLL_FLAG_EXIT_UNTIL_COLLAPSED
 import com.google.android.material.appbar.AppBarLayout.LayoutParams.SCROLL_FLAG_NO_SCROLL
 import com.google.android.material.appbar.AppBarLayout.LayoutParams.SCROLL_FLAG_SCROLL
-import com.google.android.material.appbar.AppBarLayout.LayoutParams.SCROLL_FLAG_SNAP
 import com.google.android.material.appbar.CollapsingToolbarLayout
 import com.google.android.material.appbar.MaterialToolbar
-import com.swmansion.rnscreens.gamma.stack.screen.header.configuration.StackScreenHeaderType
+import com.swmansion.rnscreens.gamma.stack.header.config.StackHeaderType
 import com.swmansion.rnscreens.utils.resolveDimensionAttr
 
-internal sealed class StackScreenAppBarLayout(
+internal sealed class StackHeaderAppBarLayout(
     context: Context,
 ) : AppBarLayout(context) {
     abstract val toolbar: MaterialToolbar
@@ -36,14 +35,13 @@ internal sealed class StackScreenAppBarLayout(
 
     internal class Small(
         context: Context,
-    ) : StackScreenAppBarLayout(context) {
+    ) : StackHeaderAppBarLayout(context) {
         override val toolbar =
             MaterialToolbar(context).apply {
                 elevation = 0f
                 layoutParams =
                     LayoutParams(MATCH_PARENT, WRAP_CONTENT).apply {
-                        // TODO: debug only for small header, must be moved to configuration
-//                        scrollFlags = SCROLL_FLAG_SCROLL or SCROLL_FLAG_SNAP
+                        // TODO: debug only for small header, must be moved to config
                         scrollFlags = SCROLL_FLAG_NO_SCROLL
                     }
             }
@@ -56,17 +54,8 @@ internal sealed class StackScreenAppBarLayout(
     @SuppressLint("ViewConstructor")
     internal class Collapsing(
         context: Context,
-        val type: StackScreenHeaderType,
-    ) : StackScreenAppBarLayout(context) {
-        init {
-            require(
-                type == StackScreenHeaderType.MEDIUM ||
-                    type == StackScreenHeaderType.LARGE,
-            ) {
-                "[RNScreens] Collapsing StackScreenAppBarLayout must be MEDIUM or LARGE type."
-            }
-        }
-
+        val type: StackHeaderType,
+    ) : StackHeaderAppBarLayout(context) {
         override val toolbar =
             MaterialToolbar(context).apply {
                 elevation = 0f
@@ -80,13 +69,13 @@ internal sealed class StackScreenAppBarLayout(
                         }
             }
 
-        val collapsingToolbarLayout: CollapsingToolbarLayout =
+        internal val collapsingToolbarLayout: CollapsingToolbarLayout =
             run {
                 val (styleAttr, sizeAttr) =
                     when (type) {
-                        StackScreenHeaderType.MEDIUM ->
+                        StackHeaderType.MEDIUM ->
                             Pair(R.attr.collapsingToolbarLayoutMediumStyle, R.attr.collapsingToolbarLayoutMediumSize)
-                        StackScreenHeaderType.LARGE ->
+                        StackHeaderType.LARGE ->
                             Pair(R.attr.collapsingToolbarLayoutLargeStyle, R.attr.collapsingToolbarLayoutLargeSize)
                         else -> error("[RNScreens] Invalid header mode.")
                     }
@@ -97,27 +86,32 @@ internal sealed class StackScreenAppBarLayout(
                             MATCH_PARENT,
                             resolveDimensionAttr(context, sizeAttr),
                         ).apply {
-                            // TODO: debug only for medium/large header, must be moved to configuration
-                            scrollFlags = SCROLL_FLAG_SCROLL or SCROLL_FLAG_EXIT_UNTIL_COLLAPSED or SCROLL_FLAG_SNAP
-//                            scrollFlags = SCROLL_FLAG_NO_SCROLL
+                            // TODO: debug only for medium/large header, must be moved to config
+                            scrollFlags = SCROLL_FLAG_SCROLL or SCROLL_FLAG_EXIT_UNTIL_COLLAPSED
                         }
                     addView(toolbar)
                 }
             }
 
         init {
+            require(
+                type == StackHeaderType.MEDIUM ||
+                    type == StackHeaderType.LARGE,
+            ) {
+                "[RNScreens] Collapsing StackHeaderAppBarLayout must be MEDIUM or LARGE type."
+            }
             addView(collapsingToolbarLayout)
         }
     }
 
     companion object {
         fun create(
             context: Context,
-            type: StackScreenHeaderType,
-        ): StackScreenAppBarLayout =
+            type: StackHeaderType,
+        ): StackHeaderAppBarLayout =
             when (type) {
-                StackScreenHeaderType.SMALL -> Small(context)
-                StackScreenHeaderType.MEDIUM, StackScreenHeaderType.LARGE -> Collapsing(context, type)
+                StackHeaderType.SMALL -> Small(context)
+                StackHeaderType.MEDIUM, StackHeaderType.LARGE -> Collapsing(context, type)
             }
     }
 }