fix(Android, Fabric): jumping content with native header

FabricTestExample/android/settings.gradle

@@ -2,3 +2,12 @@ rootProject.name = 'FabricTestExample'
 apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
 include ':app'
 includeBuild('../node_modules/@react-native/gradle-plugin')
+
+includeBuild('../node_modules/react-native') {
+    dependencySubstitution {
+        substitute(module("com.facebook.react:react-android")).using(project(":packages:react-native:ReactAndroid"))
+        substitute(module("com.facebook.react:react-native")).using(project(":packages:react-native:ReactAndroid"))
+        substitute(module("com.facebook.react:hermes-android")).using(project(":packages:react-native:ReactAndroid:hermes-engine"))
+        substitute(module("com.facebook.react:hermes-engine")).using(project(":packages:react-native:ReactAndroid:hermes-engine"))
+    }
+}

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

@@ -1,21 +1,62 @@
 package com.swmansion.rnscreens
 
+import android.util.Log
+import android.view.View
+import android.view.View.MeasureSpec
+import androidx.appcompat.app.AppCompatActivity
+import androidx.appcompat.widget.Toolbar
+import androidx.coordinatorlayout.widget.CoordinatorLayout
 import com.facebook.react.TurboReactPackage
 import com.facebook.react.bridge.NativeModule
 import com.facebook.react.bridge.ReactApplicationContext
 import com.facebook.react.module.annotations.ReactModuleList
 import com.facebook.react.module.model.ReactModuleInfo
 import com.facebook.react.module.model.ReactModuleInfoProvider
+import com.facebook.react.uimanager.PixelUtil
 import com.facebook.react.uimanager.ViewManager
+import com.google.android.material.appbar.AppBarLayout
+import java.lang.ref.WeakReference
 
 @ReactModuleList(
     nativeModules = [
         ScreensModule::class
     ]
 )
 class RNScreensPackage : TurboReactPackage() {
-    override fun createViewManagers(reactContext: ReactApplicationContext) =
-        listOf<ViewManager<*, *>>(
+    // The state required to compute header dimensions. We want this on instance rather than on class
+    // for context access & being tied to instance lifetime.
+    private lateinit var coordinatorLayout: CoordinatorLayout
+    private lateinit var appBarLayout: AppBarLayout
+    private lateinit var dummyContentView: View
+    private lateinit var toolbar: Toolbar
+
+    // We do not want to be responsible for the context lifecycle. If it's null, we're fine.
+    // This same context is being passed down to our view components so it is destroyed
+    // only if our views also are.
+    private var reactContext: WeakReference<ReactApplicationContext> = WeakReference(null)
+
+    init {
+        // We load the library so that we are able to communicate with our C++ code (descriptor & shadow nodes).
+        // Basically we leak this object to C++, as its lifecycle should span throughout whole application
+        // lifecycle anyway.
+        try {
+            System.loadLibrary(LIBRARY_NAME)
+        } catch (e: UnsatisfiedLinkError) {
+            Log.w(TAG, "Failed to load $LIBRARY_NAME")
+        }
+
+    }
+
+    override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> {
+        // This is the earliest we lay our hands on react context.
+        // Moreover this is called before FabricUIManger has finished initializing, not to mention
+        // installing its C++ bindings - so we are safe in terms of creating this hierarchy
+        // before RN starts creating shadow nodes.
+        WEAK_THIS = WeakReference(this)
+        this.reactContext = WeakReference(reactContext)
+        ensureDummyLayoutWithHeader(reactContext)
+
+        return listOf<ViewManager<*, *>>(
             ScreenContainerViewManager(),
             ScreenViewManager(),
             ModalScreenViewManager(),
@@ -24,6 +65,7 @@ class RNScreensPackage : TurboReactPackage() {
             ScreenStackHeaderSubviewManager(),
             SearchBarManager()
         )
+    }
 
     override fun getModule(
         s: String,
@@ -51,4 +93,103 @@ class RNScreensPackage : TurboReactPackage() {
             moduleInfos
         }
     }
+
+    /**
+     * Initializes dummy view hierarchy with CoordinatorLayout, AppBarLayout and dummy View.
+     * We utilize this to compute header height (app bar layout height) from C++ layer when its needed.
+     */
+    private fun ensureDummyLayoutWithHeader(reactContext: ReactApplicationContext) {
+        if (::coordinatorLayout.isInitialized) {
+            return
+        }
+        // We need to use activity here, as react context does not have theme attributes required by
+        // AppBarLayout attached leading to crash.
+        val contextWithTheme =
+            requireNotNull(reactContext.currentActivity) { "[RNScreens] Attempt to use context detached from activity" }
+        coordinatorLayout = CoordinatorLayout(contextWithTheme)
+
+        appBarLayout = AppBarLayout(contextWithTheme).apply {
+            layoutParams = CoordinatorLayout.LayoutParams(
+                CoordinatorLayout.LayoutParams.MATCH_PARENT,
+                CoordinatorLayout.LayoutParams.WRAP_CONTENT,
+            )
+        }
+
+        toolbar = Toolbar(contextWithTheme).apply {
+            title = "FontSize123!#$"
+            layoutParams = AppBarLayout.LayoutParams(
+                AppBarLayout.LayoutParams.MATCH_PARENT,
+                AppBarLayout.LayoutParams.WRAP_CONTENT
+            ).apply { scrollFlags = 0 }
+        }
+
+        (contextWithTheme as AppCompatActivity).setSupportActionBar(toolbar)
+        appBarLayout.addView(toolbar)
+
+        dummyContentView = View(contextWithTheme).apply {
+            layoutParams = CoordinatorLayout.LayoutParams(
+                CoordinatorLayout.LayoutParams.MATCH_PARENT,
+                CoordinatorLayout.LayoutParams.MATCH_PARENT
+            )
+        }
+
+        coordinatorLayout.apply {
+            addView(appBarLayout)
+            addView(dummyContentView)
+        }
+    }
+
+    /**
+     * Triggers layout pass on dummy view hierarchy, taking into consideration selected
+     * ScreenStackHeaderConfig props that might have impact on final header height.
+     *
+     * @param fontSize font size value as passed from JS
+     * @return header height in dp as consumed by Yoga
+     */
+    private fun computeDummyLayout(fontSize: Int): Float {
+        if (!::coordinatorLayout.isInitialized) {
+            Log.e(TAG, "[RNScreens] Attempt to access dummy view hierarchy before it is initialized")
+            return 0.0f
+        }
+
+        val topLevelDecorView = reactContext.get()!!.currentActivity!!.window.decorView
+
+        // These dimensions are not accurate, as they do include status bar & navigation bar, however
+        // it is ok for our purposes.
+        val decorViewWidth = topLevelDecorView.width
+        val decorViewHeight = topLevelDecorView.height
+
+        val widthMeasureSpec = MeasureSpec.makeMeasureSpec(decorViewWidth, MeasureSpec.EXACTLY)
+        val heightMeasureSpec = MeasureSpec.makeMeasureSpec(decorViewHeight, MeasureSpec.EXACTLY)
+
+        val textView = ScreenStackHeaderConfig.findTitleTextViewInToolbar(toolbar)
+        textView?.takeIf { fontSize != FONT_SIZE_UNSET }?.let { it.textSize = fontSize.toFloat() }
+
+        coordinatorLayout.measure(widthMeasureSpec, heightMeasureSpec)
+
+        // It seems that measure pass would be enough, however I'm not certain whether there are no
+        // scenarios when layout violates measured dimensions.
+        coordinatorLayout.layout(0, 0, decorViewWidth, decorViewHeight)
+
+        return PixelUtil.toDIPFromPixel(appBarLayout.height.toFloat())
+    }
+
+
+    companion object {
+        const val TAG = "RNScreensPackage"
+        const val LIBRARY_NAME = "react_codegen_rnscreens"
+
+        const val FONT_SIZE_UNSET = -1
+
+        // We access this field from C++ layer, through `getInstance` method.
+        // We don't care what instance we get access to as long as it has initialized
+        // dummy view hierarchy.
+        private var WEAK_THIS = WeakReference<RNScreensPackage>(null)
+
+        @JvmStatic
+        fun getInstance(): RNScreensPackage {
+            return WEAK_THIS.get()!!
+        }
+    }
+
 }

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

@@ -66,7 +66,8 @@ class Screen(context: ReactContext?) : FabricEnabledViewGroup(context) {
             val height = b - t
 
             val headerHeight = calculateHeaderHeight()
-            val totalHeight = headerHeight.first + headerHeight.second // action bar height + status bar height
+            val totalHeight =
+                headerHeight.first + headerHeight.second  // action bar height + status bar height
             if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
                 updateScreenSizeFabric(width, height, totalHeight)
             } else {
@@ -171,7 +172,13 @@ class Screen(context: ReactContext?) : FabricEnabledViewGroup(context) {
                 ScreenWindowTraits.applyDidSetStatusBarAppearance()
             }
             field = statusBarStyle
-            fragmentWrapper?.let { ScreenWindowTraits.setStyle(this, it.tryGetActivity(), it.tryGetContext()) }
+            fragmentWrapper?.let {
+                ScreenWindowTraits.setStyle(
+                    this,
+                    it.tryGetActivity(),
+                    it.tryGetContext()
+                )
+            }
         }
 
     var isStatusBarHidden: Boolean? = null
@@ -204,7 +211,13 @@ class Screen(context: ReactContext?) : FabricEnabledViewGroup(context) {
                 ScreenWindowTraits.applyDidSetStatusBarAppearance()
             }
             field = statusBarColor
-            fragmentWrapper?.let { ScreenWindowTraits.setColor(this, it.tryGetActivity(), it.tryGetContext()) }
+            fragmentWrapper?.let {
+                ScreenWindowTraits.setColor(
+                    this,
+                    it.tryGetActivity(),
+                    it.tryGetContext()
+                )
+            }
         }
 
     var navigationBarColor: Int? = null
@@ -213,7 +226,12 @@ class Screen(context: ReactContext?) : FabricEnabledViewGroup(context) {
                 ScreenWindowTraits.applyDidSetNavigationBarAppearance()
             }
             field = navigationBarColor
-            fragmentWrapper?.let { ScreenWindowTraits.setNavigationBarColor(this, it.tryGetActivity()) }
+            fragmentWrapper?.let {
+                ScreenWindowTraits.setNavigationBarColor(
+                    this,
+                    it.tryGetActivity()
+                )
+            }
         }
 
     var isNavigationBarHidden: Boolean? = null
@@ -234,20 +252,23 @@ class Screen(context: ReactContext?) : FabricEnabledViewGroup(context) {
 
     private fun calculateHeaderHeight(): Pair<Double, Double> {
         val actionBarTv = TypedValue()
-        val resolvedActionBarSize = context.theme.resolveAttribute(android.R.attr.actionBarSize, actionBarTv, true)
+        val resolvedActionBarSize =
+            context.theme.resolveAttribute(android.R.attr.actionBarSize, actionBarTv, true)
 
         // Check if it's possible to get an attribute from theme context and assign a value from it.
         // Otherwise, the default value will be returned.
-        val actionBarHeight = TypedValue.complexToDimensionPixelSize(actionBarTv.data, resources.displayMetrics)
-            .takeIf { resolvedActionBarSize && headerConfig?.isHeaderHidden != true && headerConfig?.isHeaderTranslucent != true }
-            ?.let { PixelUtil.toDIPFromPixel(it.toFloat()).toDouble() } ?: 0.0
-
-        val statusBarHeight = context.resources.getIdentifier("status_bar_height", "dimen", "android")
-            // Count only status bar when action bar is visible and status bar is not hidden
-            .takeIf { it > 0 && isStatusBarHidden != true && actionBarHeight > 0 }
-            ?.let { (context.resources::getDimensionPixelSize)(it) }
-            ?.let { PixelUtil.toDIPFromPixel(it.toFloat()).toDouble() }
-            ?: 0.0
+        val actionBarHeight =
+            TypedValue.complexToDimensionPixelSize(actionBarTv.data, resources.displayMetrics)
+                .takeIf { resolvedActionBarSize && headerConfig?.isHeaderHidden != true && headerConfig?.isHeaderTranslucent != true }
+                ?.let { PixelUtil.toDIPFromPixel(it.toFloat()).toDouble() } ?: 0.0
+
+        val statusBarHeight =
+            context.resources.getIdentifier("status_bar_height", "dimen", "android")
+                // Count only status bar when action bar is visible and status bar is not hidden
+                .takeIf { it > 0 && isStatusBarHidden != true && actionBarHeight > 0 }
+                ?.let { (context.resources::getDimensionPixelSize)(it) }
+                ?.let { PixelUtil.toDIPFromPixel(it.toFloat()).toDouble() }
+                ?: 0.0
 
         return actionBarHeight to statusBarHeight
     }

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

@@ -229,7 +229,6 @@ class ScreenStackFragment : ScreenFragment, ScreenStackFragmentWrapper {
 
                 override fun onAnimationRepeat(animation: Animation) {}
             }
-
         override fun startAnimation(animation: Animation) {
             // For some reason View##onAnimationEnd doesn't get called for
             // exit transitions so we explicitly attach animation listener.

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

@@ -163,7 +163,7 @@ class ScreenStackHeaderConfig(context: Context) : ViewGroup(context) {
             screenFragment?.setToolbar(toolbar)
         }
 
-        if (isTopInsetEnabled) {
+        if (isTopInsetEnabled && false) {
             headerTopInset.let {
                 toolbar.setPadding(0, it ?: 0, 0, 0)
             }
@@ -210,7 +210,7 @@ class ScreenStackHeaderConfig(context: Context) : ViewGroup(context) {
             toolbar.contentInsetStartWithNavigation = 0
         }
 
-        val titleTextView = titleTextView
+        val titleTextView = findTitleTextViewInToolbar(toolbar)
         if (titleColor != 0) {
             toolbar.setTitleTextColor(titleColor)
         }
@@ -309,19 +309,6 @@ class ScreenStackHeaderConfig(context: Context) : ViewGroup(context) {
         maybeUpdate()
     }
 
-    private val titleTextView: TextView?
-        get() {
-            for (i in 0 until toolbar.childCount) {
-                val view = toolbar.getChildAt(i)
-                if (view is TextView) {
-                    if (view.text == toolbar.title) {
-                        return view
-                    }
-                }
-            }
-            return null
-        }
-
     fun setTitle(title: String?) {
         this.title = title
     }
@@ -401,4 +388,18 @@ class ScreenStackHeaderConfig(context: Context) : ViewGroup(context) {
         }
         toolbar.clipChildren = false
     }
+
+    companion object {
+        fun findTitleTextViewInToolbar(toolbar: Toolbar): TextView? {
+            for (i in 0 until toolbar.childCount) {
+                val view = toolbar.getChildAt(i)
+                if (view is TextView) {
+                    if (view.text == toolbar.title) {
+                        return view
+                    }
+                }
+            }
+            return null
+        }
+    }
 }

android/src/main/jni/CMakeLists.txt

@@ -13,8 +13,6 @@ add_compile_options(
   -fexceptions
   -frtti
   -std=c++20
-  -Wall
-  -Wpedantic
   -Wno-gnu-zero-variadic-macro-arguments
 )
 

android/src/main/jni/rnscreens.cpp

@@ -4,6 +4,17 @@
  */
 #include "rnscreens.h"
 
+#include <iostream>
+
+JNIEXPORT jint JNICALL JNI_OnLoad(JavaVM *vm, void *reserved) {
+    JNIEnv *env;
+    if (vm->GetEnv(reinterpret_cast<void **>(&env), JNI_VERSION_1_6) != JNI_OK) {
+        LOG(ERROR) << "[RNScreens] error while acquiring env";
+        return JNI_ERR;
+    }
+    return JNI_VERSION_1_6;
+}
+
 namespace facebook {
 namespace react {
 

android/src/main/jni/rnscreens.h

@@ -19,6 +19,10 @@
 #include <react/renderer/components/rnscreens/RNSScreenComponentDescriptor.h>
 #include <react/renderer/components/rnscreens/RNSModalScreenComponentDescriptor.h>
 
+#include <jni.h>
+
+JNIEXPORT jint JNICALL JNI_OnLoad(JavaVM *vm, void *reserved);
+
 namespace facebook {
 namespace react {
 

apps/test-examples/src/App.js

@@ -102,6 +102,7 @@ import Test2048 from './Test2048';
 import Test2069 from './Test2069';
 import Test2118 from './Test2118';
 import TestScreenAnimation from './TestScreenAnimation';
+import TestHeader from './TestHeader';
 
 enableFreeze(true);