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

package/src/views/HeaderConfig.tsx

@@ -29,7 +29,7 @@ type Props = NativeStackNavigationOptions & {
   canGoBack: boolean;
 };
 
-export default function HeaderConfig({
+export function HeaderConfig({
   headerHeight,
   headerBackImageSource,
   headerBackButtonMenuEnabled,
@@ -59,15 +59,22 @@ export default function HeaderConfig({
   title,
   canGoBack,
 }: Props): JSX.Element {
-  const { colors } = useTheme();
+  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 +85,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 +126,12 @@ export default function HeaderConfig({
     headerTitleStyleSupported.fontWeight = titleFontWeight;
   }
 
+  const headerBackgroundColor =
+    headerStyleFlattened.backgroundColor ??
+    (headerBackground != null || headerTransparent
+      ? 'transparent'
+      : colors.card);
+
   const headerLeftElement = headerLeft?.({
     tintColor,
     canGoBack,
@@ -162,15 +196,10 @@ export default function HeaderConfig({
       ) : null}
       <ScreenStackHeaderConfig
         backButtonInCustomView={backButtonInCustomView}
-        backgroundColor={
-          headerStyleFlattened.backgroundColor ??
-          (headerBackground != null || headerTransparent
-            ? 'transparent'
-            : colors.card)
-        }
+        backgroundColor={headerBackgroundColor}
         backTitle={headerBackTitleVisible ? headerBackTitle : ' '}
         backTitleFontFamily={backTitleFontFamily}
-        backTitleFontSize={headerBackTitleStyleFlattened.fontSize}
+        backTitleFontSize={backTitleFontSize}
         blurEffect={headerBlurEffect}
         color={tintColor}
         direction={I18nManager.getConstants().isRTL ? 'rtl' : 'ltr'}
@@ -183,11 +212,11 @@ export default function HeaderConfig({
           (headerTransparent && headerShadowVisible !== true)
         }
         largeTitle={headerLargeTitle}
-        largeTitleBackgroundColor={headerLargeStyleFlattened.backgroundColor}
-        largeTitleColor={headerLargeTitleStyleFlattened.color}
+        largeTitleBackgroundColor={largeTitleBackgroundColor}
+        largeTitleColor={largeTitleColor}
         largeTitleFontFamily={largeTitleFontFamily}
-        largeTitleFontSize={headerLargeTitleStyleFlattened.fontSize}
-        largeTitleFontWeight={headerLargeTitleStyleFlattened.fontWeight}
+        largeTitleFontSize={largeTitleFontSize}
+        largeTitleFontWeight={largeTitleFontWeight}
         largeTitleHideShadow={headerLargeTitleShadowVisible === false}
         title={titleText}
         titleColor={titleColor}

package/src/views/NativeStackView.native.tsx

@@ -36,10 +36,10 @@ import type {
   NativeStackNavigationHelpers,
   NativeStackNavigationOptions,
 } from '../types';
-import useDismissedRouteError from '../utils/useDismissedRouteError';
-import useInvalidPreventRemoveError from '../utils/useInvalidPreventRemoveError';
-import DebugContainer from './DebugContainer';
-import HeaderConfig from './HeaderConfig';
+import { useDismissedRouteError } from '../utils/useDismissedRouteError';
+import { useInvalidPreventRemoveError } from '../utils/useInvalidPreventRemoveError';
+import { DebugContainer } from './DebugContainer';
+import { HeaderConfig } from './HeaderConfig';
 
 const isAndroid = Platform.OS === 'android';
 
@@ -440,7 +440,7 @@ function NativeStackViewInner({ state, navigation, descriptors }: Props) {
   );
 }
 
-export default function NativeStackView(props: Props) {
+export function NativeStackView(props: Props) {
   return (
     <SafeAreaProviderCompat>
       <NativeStackViewInner {...props} />

package/src/views/NativeStackView.tsx

@@ -31,7 +31,7 @@ const TRANSPARENT_PRESENTATIONS = [
   'containedTransparentModal',
 ];
 
-export default function NativeStackView({ state, descriptors }: Props) {
+export function NativeStackView({ state, descriptors }: Props) {
   const parentHeaderBack = React.useContext(HeaderBackContext);
 
   return (