@react-navigation/native-stack 7.0.0-alpha.1 → 7.0.0-alpha.11

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,
@@ -30,7 +24,6 @@ type Props = NativeStackNavigationOptions & {
 };
 
 export function HeaderConfig({
-  headerHeight,
   headerBackImageSource,
   headerBackButtonMenuEnabled,
   headerBackTitle,
@@ -59,6 +52,7 @@ export function HeaderConfig({
   title,
   canGoBack,
 }: Props): JSX.Element {
+  const { direction } = useLocale();
   const { colors, fonts } = useTheme();
   const tintColor =
     headerTintColor ?? (Platform.OS === 'ios' ? colors.primary : colors.text);
@@ -182,118 +176,105 @@ export function HeaderConfig({
       headerTransparent !== false);
 
   return (
-    <>
-      {headerBackground != null ? (
-        <View
-          style={[
-            styles.background,
-            headerTransparent ? styles.translucent : null,
-            { height: headerHeight },
-          ]}
-        >
-          {headerBackground()}
-        </View>
-      ) : null}
-      <ScreenStackHeaderConfig
-        backButtonInCustomView={backButtonInCustomView}
-        backgroundColor={headerBackgroundColor}
-        backTitle={headerBackTitleVisible ? headerBackTitle : ' '}
-        backTitleFontFamily={backTitleFontFamily}
-        backTitleFontSize={backTitleFontSize}
-        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={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>
+    <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>
   );
 }
 
@@ -302,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',
-  },
 });