Add ability to change header type during fast-refresh/live, moar exam…

…ples
software-mansion · Jan 8, 2024 · 144ddf2 · 144ddf2
1 parent 7168134
commit 144ddf2
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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)
         }