From 144ddf2733398578c425e916ac42939c71d513cb Mon Sep 17 00:00:00 2001
From: tboba <tymoteusz.boba@gmail.com>
Date: Mon, 8 Jan 2024 17:25:02 +0100
Subject: [PATCH] Add ability to change header type during fast-refresh/live,
 moar examples

---
 FabricTestExample/src/Test1874.tsx                  | 13 ++++++++++++-
 TestsExample/src/Test1874.tsx                       | 13 ++++++++++++-
 .../src/main/java/com/swmansion/rnscreens/Screen.kt |  7 ++++++-
 .../com/swmansion/rnscreens/ScreenStackHeader.kt    |  5 +++++
 .../swmansion/rnscreens/ScreenStackHeaderConfig.kt  |  6 ++++++
 5 files changed, 41 insertions(+), 3 deletions(-)

diff --git a/FabricTestExample/src/Test1874.tsx b/FabricTestExample/src/Test1874.tsx
index d1b91811fa..3785668fac 100644
--- a/FabricTestExample/src/Test1874.tsx
+++ b/FabricTestExample/src/Test1874.tsx
@@ -111,6 +111,10 @@ function useHeaderOptions(
 }
 
 function SettingsSwitcher({ navigation }: SettingsScreenProps) {
+  const { currentValue: headerType, component: headerTypeSetting } =
+    useHeaderOptions('header type', 'large', ['large', 'medium', 'small']);
+  const { currentValue: headerTitleAlign, component: headerTitleAlignSetting } =
+    useHeaderOptions('title align', 'left', ['left', 'center']);
   const { currentValue: backgroundColor, component: bgColorSetting } =
     useHeaderOptions('background color', 'white', [
       'white',
@@ -138,21 +142,27 @@ function SettingsSwitcher({ navigation }: SettingsScreenProps) {
     navigation.setOptions({
       headerStyle: { backgroundColor },
       headerTitleStyle: { color: textColor },
+      headerTitleAlign,
       headerHideShadow: hideShadow,
       headerShown,
       headerTranslucent,
+      headerType,
     });
   }, [
     navigation,
+    headerType,
     backgroundColor,
     textColor,
     hideShadow,
     headerShown,
     headerTranslucent,
+    headerTitleAlign,
   ]);
 
   return (
     <View style={styles.settingSection}>
+      {headerTypeSetting}
+      {headerTitleAlignSetting}
       {bgColorSetting}
       {textColorSetting}
       {hideShadowSetting}
@@ -274,7 +284,8 @@ export default function App() {
             name="Settings"
             component={Settings}
             options={{
-              headerType: 'large',
+              headerTitle: 'Settings',
+              headerType: 'medium',
             }}
           />
           <Stack.Screen
diff --git a/TestsExample/src/Test1874.tsx b/TestsExample/src/Test1874.tsx
index d1b91811fa..3785668fac 100644
--- a/TestsExample/src/Test1874.tsx
+++ b/TestsExample/src/Test1874.tsx
@@ -111,6 +111,10 @@ function useHeaderOptions(
 }
 
 function SettingsSwitcher({ navigation }: SettingsScreenProps) {
+  const { currentValue: headerType, component: headerTypeSetting } =
+    useHeaderOptions('header type', 'large', ['large', 'medium', 'small']);
+  const { currentValue: headerTitleAlign, component: headerTitleAlignSetting } =
+    useHeaderOptions('title align', 'left', ['left', 'center']);
   const { currentValue: backgroundColor, component: bgColorSetting } =
     useHeaderOptions('background color', 'white', [
       'white',
@@ -138,21 +142,27 @@ function SettingsSwitcher({ navigation }: SettingsScreenProps) {
     navigation.setOptions({
       headerStyle: { backgroundColor },
       headerTitleStyle: { color: textColor },
+      headerTitleAlign,
       headerHideShadow: hideShadow,
       headerShown,
       headerTranslucent,
+      headerType,
     });
   }, [
     navigation,
+    headerType,
     backgroundColor,
     textColor,
     hideShadow,
     headerShown,
     headerTranslucent,
+    headerTitleAlign,
   ]);
 
   return (
     <View style={styles.settingSection}>
+      {headerTypeSetting}
+      {headerTitleAlignSetting}
       {bgColorSetting}
       {textColorSetting}
       {hideShadowSetting}
@@ -274,7 +284,8 @@ export default function App() {
             name="Settings"
             component={Settings}
             options={{
-              headerType: 'large',
+              headerTitle: 'Settings',
+              headerType: 'medium',
             }}
           />
           <Stack.Screen
diff --git a/android/src/main/java/com/swmansion/rnscreens/Screen.kt b/android/src/main/java/com/swmansion/rnscreens/Screen.kt
index aa5576e22b..56df68b520 100644
--- a/android/src/main/java/com/swmansion/rnscreens/Screen.kt
+++ b/android/src/main/java/com/swmansion/rnscreens/Screen.kt
@@ -34,7 +34,6 @@ class Screen(context: ReactContext?) : FabricEnabledViewGroup(context) {
     var isGestureEnabled = true
     var screenOrientation: Int? = null
         private set
-    var headerType = HeaderType.Small
     var isStatusBarAnimated: Boolean? = null
 
     init {
@@ -205,6 +204,12 @@ class Screen(context: ReactContext?) : FabricEnabledViewGroup(context) {
             fragmentWrapper?.let { ScreenWindowTraits.setColor(this, it.tryGetActivity(), it.tryGetContext()) }
         }
 
+    var headerType = HeaderType.Small
+        set(headerType) {
+            field = headerType
+            headerConfig?.onUpdate()
+        }
+
     var navigationBarColor: Int? = null
         set(navigationBarColor) {
             if (navigationBarColor != null) {
diff --git a/android/src/main/java/com/swmansion/rnscreens/ScreenStackHeader.kt b/android/src/main/java/com/swmansion/rnscreens/ScreenStackHeader.kt
index ffab699635..38de4b74e1 100644
--- a/android/src/main/java/com/swmansion/rnscreens/ScreenStackHeader.kt
+++ b/android/src/main/java/com/swmansion/rnscreens/ScreenStackHeader.kt
@@ -12,6 +12,7 @@ import com.google.android.material.R as MaterialR
 class ScreenStackHeader(val screen: Screen) {
     var toolbar: CustomToolbar? = null
     var collapsingToolbarLayout: CollapsingToolbarLayout? = null
+    var loadedHeaderType = screen.headerType
 
     fun recreateToolbar() {
         if (screen.headerType.isCollapsing) {
@@ -28,6 +29,10 @@ class ScreenStackHeader(val screen: Screen) {
         }
     }
 
+    fun updateHeaderType() {
+        loadedHeaderType = screen.headerType
+    }
+
     fun removeToolbar() {
         toolbar?.removeAllViews()
         collapsingToolbarLayout?.removeAllViews()
diff --git a/android/src/main/java/com/swmansion/rnscreens/ScreenStackHeaderConfig.kt b/android/src/main/java/com/swmansion/rnscreens/ScreenStackHeaderConfig.kt
index 804d52433a..566a22c296 100644
--- a/android/src/main/java/com/swmansion/rnscreens/ScreenStackHeaderConfig.kt
+++ b/android/src/main/java/com/swmansion/rnscreens/ScreenStackHeaderConfig.kt
@@ -160,6 +160,12 @@ class ScreenStackHeaderConfig(context: Context) : ViewGroup(context) {
             return
         }
 
+        // Reattach the header, when the developer tries to change the header type
+        if (screenStackHeader?.loadedHeaderType != screen?.headerType) {
+            screenStackHeader?.updateHeaderType()
+            screenFragment?.removeToolbar()
+        }
+
         if (toolbar.parent == null) {
             screenFragment?.setToolbar(toolbar)
         }