@react-navigation/native-stack 7.0.0-alpha.0 → 7.0.0-alpha.10

package/src/views/HeaderConfig.tsx

@@ -1,13 +1,7 @@
 import { getHeaderTitle, HeaderTitle } from '@react-navigation/elements';
-import { Route, useTheme } from '@react-navigation/native';
+import { type Route, useLocale, useTheme } from '@react-navigation/native';
 import * as React from 'react';
-import {
-  I18nManager,
-  Platform,
-  StyleSheet,
-  TextStyle,
-  View,
-} from 'react-native';
+import { Platform, StyleSheet, type TextStyle, View } from 'react-native';
 import {
   isSearchBarAvailableForCurrentPlatform,
   ScreenStackHeaderBackButtonImage,
@@ -29,8 +23,7 @@ type Props = NativeStackNavigationOptions & {
   canGoBack: boolean;
 };
 
-export default function HeaderConfig({
-  headerHeight,
+export function HeaderConfig({
   headerBackImageSource,
   headerBackButtonMenuEnabled,
   headerBackTitle,
@@ -59,15 +52,23 @@ export default function HeaderConfig({
   title,
   canGoBack,
 }: Props): JSX.Element {
-  const { colors } = useTheme();
+  const { direction } = useLocale();
+  const { colors, fonts } = useTheme();
   const tintColor =
     headerTintColor ?? (Platform.OS === 'ios' ? colors.primary : colors.text);
 
   const headerBackTitleStyleFlattened =
-    StyleSheet.flatten(headerBackTitleStyle) || {};
+    StyleSheet.flatten([headerBackTitleStyle, fonts.regular]) || {};
   const headerLargeTitleStyleFlattened =
-    StyleSheet.flatten(headerLargeTitleStyle) || {};
-  const headerTitleStyleFlattened = StyleSheet.flatten(headerTitleStyle) || {};
+    StyleSheet.flatten([
+      headerLargeTitleStyle,
+      Platform.select({ ios: fonts.heavy, default: fonts.medium }),
+    ]) || {};
+  const headerTitleStyleFlattened =
+    StyleSheet.flatten([
+      headerTitleStyle,
+      Platform.select({ ios: fonts.bold, default: fonts.medium }),
+    ]) || {};
   const headerStyleFlattened = StyleSheet.flatten(headerStyle) || {};
   const headerLargeStyleFlattened = StyleSheet.flatten(headerLargeStyle) || {};
 
@@ -78,12 +79,33 @@ export default function HeaderConfig({
       headerTitleStyleFlattened.fontFamily,
     ]);
 
+  const backTitleFontSize =
+    'fontSize' in headerBackTitleStyleFlattened
+      ? headerBackTitleStyleFlattened.fontSize
+      : undefined;
+
   const titleText = getHeaderTitle({ title, headerTitle }, route.name);
   const titleColor =
-    headerTitleStyleFlattened.color ?? headerTintColor ?? colors.text;
-  const titleFontSize = headerTitleStyleFlattened.fontSize;
+    'color' in headerTitleStyleFlattened
+      ? headerTitleStyleFlattened.color
+      : headerTintColor ?? colors.text;
+  const titleFontSize =
+    'fontSize' in headerTitleStyleFlattened
+      ? headerTitleStyleFlattened.fontSize
+      : undefined;
   const titleFontWeight = headerTitleStyleFlattened.fontWeight;
 
+  const largeTitleBackgroundColor = headerLargeStyleFlattened.backgroundColor;
+  const largeTitleColor =
+    'color' in headerLargeTitleStyleFlattened
+      ? headerLargeTitleStyleFlattened.color
+      : undefined;
+  const largeTitleFontSize =
+    'fontSize' in headerLargeTitleStyleFlattened
+      ? headerLargeTitleStyleFlattened.fontSize
+      : undefined;
+  const largeTitleFontWeight = headerLargeTitleStyleFlattened.fontWeight;
+
   const headerTitleStyleSupported: TextStyle = { color: titleColor };
 
   if (headerTitleStyleFlattened.fontFamily != null) {
@@ -98,6 +120,12 @@ export default function HeaderConfig({
     headerTitleStyleSupported.fontWeight = titleFontWeight;
   }
 
+  const headerBackgroundColor =
+    headerStyleFlattened.backgroundColor ??
+    (headerBackground != null || headerTransparent
+      ? 'transparent'
+      : colors.card);
+
   const headerLeftElement = headerLeft?.({
     tintColor,
     canGoBack,
@@ -148,123 +176,105 @@ export default function HeaderConfig({
       headerTransparent !== false);
 
   return (
-    <>
-      {headerBackground != null ? (
-        <View
-          style={[
-            styles.background,
-            headerTransparent ? styles.translucent : null,
-            { height: headerHeight },
-          ]}
-        >
-          {headerBackground()}
-        </View>
-      ) : null}
-      <ScreenStackHeaderConfig
-        backButtonInCustomView={backButtonInCustomView}
-        backgroundColor={
-          headerStyleFlattened.backgroundColor ??
-          (headerBackground != null || headerTransparent
-            ? 'transparent'
-            : colors.card)
-        }
-        backTitle={headerBackTitleVisible ? headerBackTitle : ' '}
-        backTitleFontFamily={backTitleFontFamily}
-        backTitleFontSize={headerBackTitleStyleFlattened.fontSize}
-        blurEffect={headerBlurEffect}
-        color={tintColor}
-        direction={I18nManager.getConstants().isRTL ? 'rtl' : 'ltr'}
-        disableBackButtonMenu={headerBackButtonMenuEnabled === false}
-        hidden={headerShown === false}
-        hideBackButton={headerBackVisible === false}
-        hideShadow={
-          headerShadowVisible === false ||
-          headerBackground != null ||
-          (headerTransparent && headerShadowVisible !== true)
-        }
-        largeTitle={headerLargeTitle}
-        largeTitleBackgroundColor={headerLargeStyleFlattened.backgroundColor}
-        largeTitleColor={headerLargeTitleStyleFlattened.color}
-        largeTitleFontFamily={largeTitleFontFamily}
-        largeTitleFontSize={headerLargeTitleStyleFlattened.fontSize}
-        largeTitleFontWeight={headerLargeTitleStyleFlattened.fontWeight}
-        largeTitleHideShadow={headerLargeTitleShadowVisible === false}
-        title={titleText}
-        titleColor={titleColor}
-        titleFontFamily={titleFontFamily}
-        titleFontSize={titleFontSize}
-        titleFontWeight={titleFontWeight}
-        topInsetEnabled={headerTopInsetEnabled}
-        translucent={
-          // This defaults to `true`, so we can't pass `undefined`
-          translucent === true
-        }
-      >
-        {Platform.OS === 'ios' ? (
-          <>
-            {headerLeftElement != null ? (
-              <ScreenStackHeaderLeftView>
+    <ScreenStackHeaderConfig
+      backButtonInCustomView={backButtonInCustomView}
+      backgroundColor={headerBackgroundColor}
+      backTitle={headerBackTitleVisible ? headerBackTitle : ' '}
+      backTitleFontFamily={backTitleFontFamily}
+      backTitleFontSize={backTitleFontSize}
+      blurEffect={headerBlurEffect}
+      color={tintColor}
+      direction={direction}
+      disableBackButtonMenu={headerBackButtonMenuEnabled === false}
+      hidden={headerShown === false}
+      hideBackButton={headerBackVisible === false}
+      hideShadow={
+        headerShadowVisible === false ||
+        headerBackground != null ||
+        (headerTransparent && headerShadowVisible !== true)
+      }
+      largeTitle={headerLargeTitle}
+      largeTitleBackgroundColor={largeTitleBackgroundColor}
+      largeTitleColor={largeTitleColor}
+      largeTitleFontFamily={largeTitleFontFamily}
+      largeTitleFontSize={largeTitleFontSize}
+      largeTitleFontWeight={largeTitleFontWeight}
+      largeTitleHideShadow={headerLargeTitleShadowVisible === false}
+      title={titleText}
+      titleColor={titleColor}
+      titleFontFamily={titleFontFamily}
+      titleFontSize={titleFontSize}
+      titleFontWeight={titleFontWeight}
+      topInsetEnabled={headerTopInsetEnabled}
+      translucent={
+        // This defaults to `true`, so we can't pass `undefined`
+        translucent === true
+      }
+    >
+      {Platform.OS === 'ios' ? (
+        <>
+          {headerLeftElement != null ? (
+            <ScreenStackHeaderLeftView>
+              {headerLeftElement}
+            </ScreenStackHeaderLeftView>
+          ) : null}
+          {headerTitleElement != null ? (
+            <ScreenStackHeaderCenterView>
+              {headerTitleElement}
+            </ScreenStackHeaderCenterView>
+          ) : null}
+        </>
+      ) : (
+        <>
+          {headerLeftElement != null || typeof headerTitle === 'function' ? (
+            <ScreenStackHeaderLeftView>
+              <View style={styles.row}>
                 {headerLeftElement}
-              </ScreenStackHeaderLeftView>
-            ) : null}
-            {headerTitleElement != null ? (
-              <ScreenStackHeaderCenterView>
-                {headerTitleElement}
-              </ScreenStackHeaderCenterView>
-            ) : null}
-          </>
-        ) : (
-          <>
-            {headerLeftElement != null || typeof headerTitle === 'function' ? (
-              <ScreenStackHeaderLeftView>
-                <View style={styles.row}>
-                  {headerLeftElement}
-                  {headerTitleAlign !== 'center' ? (
-                    typeof headerTitle === 'function' ? (
-                      headerTitleElement
-                    ) : (
-                      <HeaderTitle
-                        tintColor={tintColor}
-                        style={headerTitleStyleSupported}
-                      >
-                        {titleText}
-                      </HeaderTitle>
-                    )
-                  ) : null}
-                </View>
-              </ScreenStackHeaderLeftView>
-            ) : null}
-            {headerTitleAlign === 'center' ? (
-              <ScreenStackHeaderCenterView>
-                {typeof headerTitle === 'function' ? (
-                  headerTitleElement
-                ) : (
-                  <HeaderTitle
-                    tintColor={tintColor}
-                    style={headerTitleStyleSupported}
-                  >
-                    {titleText}
-                  </HeaderTitle>
-                )}
-              </ScreenStackHeaderCenterView>
-            ) : null}
-          </>
-        )}
-        {headerBackImageSource !== undefined ? (
-          <ScreenStackHeaderBackButtonImage source={headerBackImageSource} />
-        ) : null}
-        {headerRightElement != null ? (
-          <ScreenStackHeaderRightView>
-            {headerRightElement}
-          </ScreenStackHeaderRightView>
-        ) : null}
-        {hasHeaderSearchBar ? (
-          <ScreenStackHeaderSearchBarView>
-            <SearchBar {...headerSearchBarOptions} />
-          </ScreenStackHeaderSearchBarView>
-        ) : null}
-      </ScreenStackHeaderConfig>
-    </>
+                {headerTitleAlign !== 'center' ? (
+                  typeof headerTitle === 'function' ? (
+                    headerTitleElement
+                  ) : (
+                    <HeaderTitle
+                      tintColor={tintColor}
+                      style={headerTitleStyleSupported}
+                    >
+                      {titleText}
+                    </HeaderTitle>
+                  )
+                ) : null}
+              </View>
+            </ScreenStackHeaderLeftView>
+          ) : null}
+          {headerTitleAlign === 'center' ? (
+            <ScreenStackHeaderCenterView>
+              {typeof headerTitle === 'function' ? (
+                headerTitleElement
+              ) : (
+                <HeaderTitle
+                  tintColor={tintColor}
+                  style={headerTitleStyleSupported}
+                >
+                  {titleText}
+                </HeaderTitle>
+              )}
+            </ScreenStackHeaderCenterView>
+          ) : null}
+        </>
+      )}
+      {headerBackImageSource !== undefined ? (
+        <ScreenStackHeaderBackButtonImage source={headerBackImageSource} />
+      ) : null}
+      {headerRightElement != null ? (
+        <ScreenStackHeaderRightView>
+          {headerRightElement}
+        </ScreenStackHeaderRightView>
+      ) : null}
+      {hasHeaderSearchBar ? (
+        <ScreenStackHeaderSearchBarView>
+          <SearchBar {...headerSearchBarOptions} />
+        </ScreenStackHeaderSearchBarView>
+      ) : null}
+    </ScreenStackHeaderConfig>
   );
 }
 
@@ -273,15 +283,4 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
   },
-  translucent: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    zIndex: 1,
-    elevation: 1,
-  },
-  background: {
-    overflow: 'hidden',
-  },
 });