fix: ensure large header subtitle doesn't rely on large header

Author: aharwood9

src/components/containers/FlashList.tsx

@@ -131,8 +131,8 @@ const FlashListWithHeadersInputComp = <ItemT extends any = any>(
           ...scrollIndicatorInsets,
         }}
         ListHeaderComponent={
-          LargeHeaderComponent ? (
-            <>
+          <>
+            {LargeHeaderComponent && (
               <View
                 onLayout={(e) => {
                   largeHeaderHeight.value = e.nativeEvent.layout.height;
@@ -150,10 +150,9 @@ const FlashListWithHeadersInputComp = <ItemT extends any = any>(
                   </View>
                 )}
               </View>
-              {LargeHeaderSubtitleComponent &&
-                LargeHeaderSubtitleComponent({ showNavBar, scrollY })}
-            </>
-          ) : undefined
+            )}
+            {LargeHeaderSubtitleComponent && LargeHeaderSubtitleComponent({ showNavBar, scrollY })}
+          </>
         }
         inverted={inverted}
         {...rest}

src/components/containers/FlatList.tsx

@@ -130,8 +130,8 @@ const FlatListWithHeadersInputComp = <ItemT extends unknown>(
           ...scrollIndicatorInsets,
         }}
         ListHeaderComponent={
-          LargeHeaderComponent ? (
-            <>
+          <>
+            {LargeHeaderComponent && (
               <View
                 onLayout={(e) => {
                   largeHeaderHeight.value = e.nativeEvent.layout.height;
@@ -149,10 +149,9 @@ const FlatListWithHeadersInputComp = <ItemT extends unknown>(
                   </View>
                 )}
               </View>
-              {LargeHeaderSubtitleComponent &&
-                LargeHeaderSubtitleComponent({ showNavBar, scrollY })}
-            </>
-          ) : undefined
+            )}
+            {LargeHeaderSubtitleComponent && LargeHeaderSubtitleComponent({ showNavBar, scrollY })}
+          </>
         }
         inverted={inverted}
         {...rest}

src/components/containers/ScrollView.tsx

@@ -130,28 +130,27 @@ const ScrollViewWithHeadersInputComp = (
         }}
         {...rest}
       >
-        {LargeHeaderComponent ? (
-          <>
-            <View
-              onLayout={(e) => {
-                largeHeaderHeight.value = e.nativeEvent.layout.height;
+        {LargeHeaderComponent && (
+          <View
+            onLayout={(e) => {
+              largeHeaderHeight.value = e.nativeEvent.layout.height;
+
+              if (onLargeHeaderLayout) onLargeHeaderLayout(e.nativeEvent.layout);
+            }}
+          >
+            {!disableLargeHeaderFadeAnim ? (
+              <FadingView opacity={largeHeaderOpacity} style={largeHeaderContainerStyle}>
+                {LargeHeaderComponent({ scrollY, showNavBar })}
+              </FadingView>
+            ) : (
+              <View style={largeHeaderContainerStyle}>
+                {LargeHeaderComponent({ scrollY, showNavBar })}
+              </View>
+            )}
+          </View>
+        )}
+        {LargeHeaderSubtitleComponent && LargeHeaderSubtitleComponent({ showNavBar, scrollY })}
 
-                if (onLargeHeaderLayout) onLargeHeaderLayout(e.nativeEvent.layout);
-              }}
-            >
-              {!disableLargeHeaderFadeAnim ? (
-                <FadingView opacity={largeHeaderOpacity} style={largeHeaderContainerStyle}>
-                  {LargeHeaderComponent({ scrollY, showNavBar })}
-                </FadingView>
-              ) : (
-                <View style={largeHeaderContainerStyle}>
-                  {LargeHeaderComponent({ scrollY, showNavBar })}
-                </View>
-              )}
-            </View>
-            {LargeHeaderSubtitleComponent && LargeHeaderSubtitleComponent({ showNavBar, scrollY })}
-          </>
-        ) : null}
         {children}
       </AnimatedScrollView>
 

src/components/containers/SectionList.tsx

@@ -134,8 +134,8 @@ const SectionListWithHeadersInputComp = <ItemT extends any = any, SectionT = Def
           ...scrollIndicatorInsets,
         }}
         ListHeaderComponent={
-          LargeHeaderComponent ? (
-            <>
+          <>
+            {LargeHeaderComponent && (
               <View
                 onLayout={(e) => {
                   largeHeaderHeight.value = e.nativeEvent.layout.height;
@@ -153,10 +153,9 @@ const SectionListWithHeadersInputComp = <ItemT extends any = any, SectionT = Def
                   </View>
                 )}
               </View>
-              {LargeHeaderSubtitleComponent &&
-                LargeHeaderSubtitleComponent({ showNavBar, scrollY })}
-            </>
-          ) : undefined
+            )}
+            {LargeHeaderSubtitleComponent && LargeHeaderSubtitleComponent({ showNavBar, scrollY })}
+          </>
         }
         inverted={inverted}
         {...rest}