diff --git a/example/src/Screens/NativeStackHeaderCustomization.tsx b/example/src/Screens/NativeStackHeaderCustomization.tsx
index 522628dcde..624fbd6429 100644
--- a/example/src/Screens/NativeStackHeaderCustomization.tsx
+++ b/example/src/Screens/NativeStackHeaderCustomization.tsx
@@ -4,7 +4,14 @@ import {
NativeStackScreenProps,
} from '@react-navigation/native-stack';
import * as React from 'react';
-import { Alert, Platform, ScrollView, StyleSheet, View } from 'react-native';
+import {
+ Alert,
+ Image,
+ Platform,
+ ScrollView,
+ StyleSheet,
+ View,
+} from 'react-native';
import { Appbar, Button } from 'react-native-paper';
import Albums from '../Shared/Albums';
@@ -130,6 +137,7 @@ export default function NativeStackScreen({
component={ArticleScreen}
options={({ route }) => ({
title: `Article by ${route.params?.author ?? 'Unknown'}`,
+ headerTintColor: 'white',
headerTitle: ({ tintColor }) => (
),
+ headerBackground: () => (
+
+ ),
})}
initialParams={{ author: 'Gandalf' }}
/>
diff --git a/example/src/Screens/StackHeaderCustomization.tsx b/example/src/Screens/StackHeaderCustomization.tsx
index a0eb2605d5..6a9e691346 100644
--- a/example/src/Screens/StackHeaderCustomization.tsx
+++ b/example/src/Screens/StackHeaderCustomization.tsx
@@ -164,7 +164,7 @@ export default function HeaderCustomizationScreen({ navigation }: Props) {
headerBackground: () => (
React.ReactNode;
/**
* Function which returns a React Element to display on the left side of the header.
* This replaces the back button. See `headerBackVisible` to show the back button along side left element.
diff --git a/packages/native-stack/src/views/HeaderConfig.tsx b/packages/native-stack/src/views/HeaderConfig.tsx
index fb2a6c1342..7bd15ef7df 100644
--- a/packages/native-stack/src/views/HeaderConfig.tsx
+++ b/packages/native-stack/src/views/HeaderConfig.tsx
@@ -23,11 +23,13 @@ import type { NativeStackNavigationOptions } from '../types';
import { processFonts } from './FontProcessor';
type Props = NativeStackNavigationOptions & {
+ headerHeight: number;
route: Route;
canGoBack: boolean;
};
export default function HeaderConfig({
+ headerHeight,
headerBackImageSource,
headerBackButtonMenuEnabled,
headerBackTitle,
@@ -39,6 +41,7 @@ export default function HeaderConfig({
headerLargeTitle,
headerLargeTitleShadowVisible,
headerLargeTitleStyle,
+ headerBackground,
headerLeft,
headerRight,
headerShown,
@@ -55,6 +58,7 @@ export default function HeaderConfig({
canGoBack,
}: Props): JSX.Element {
const insets = useSafeAreaInsets();
+
const { colors } = useTheme();
const tintColor =
headerTintColor ?? (Platform.OS === 'ios' ? colors.primary : colors.text);
@@ -128,104 +132,120 @@ export default function HeaderConfig({
: Platform.OS === 'android' && headerTitleElement != null;
return (
-
- {Platform.OS === 'ios' ? (
- <>
- {headerLeftElement != null ? (
-
- {headerLeftElement}
-
- ) : null}
- {headerTitleElement != null ? (
-
- {headerTitleElement}
-
- ) : null}
- >
- ) : (
- <>
- {headerLeftElement != null || typeof headerTitle === 'function' ? (
-
-
- {headerLeftElement}
- {headerTitleAlign !== 'center' ? (
- typeof headerTitle === 'function' ? (
- headerTitleElement
- ) : (
-
- {titleText}
-
- )
- ) : null}
-
-
- ) : null}
- {headerTitleAlign === 'center' ? (
-
- {typeof headerTitle === 'function' ? (
- headerTitleElement
- ) : (
-
- {titleText}
-
- )}
-
- ) : null}
- >
- )}
- {headerBackImageSource !== undefined ? (
-
- ) : null}
- {headerRightElement != null ? (
-
- {headerRightElement}
-
- ) : null}
- {Platform.OS === 'ios' && headerSearchBarOptions != null ? (
-
-
-
+ <>
+ {headerBackground != null ? (
+
+ {headerBackground()}
+
) : null}
-
+
+ {Platform.OS === 'ios' ? (
+ <>
+ {headerLeftElement != null ? (
+
+ {headerLeftElement}
+
+ ) : null}
+ {headerTitleElement != null ? (
+
+ {headerTitleElement}
+
+ ) : null}
+ >
+ ) : (
+ <>
+ {headerLeftElement != null || typeof headerTitle === 'function' ? (
+
+
+ {headerLeftElement}
+ {headerTitleAlign !== 'center' ? (
+ typeof headerTitle === 'function' ? (
+ headerTitleElement
+ ) : (
+
+ {titleText}
+
+ )
+ ) : null}
+
+
+ ) : null}
+ {headerTitleAlign === 'center' ? (
+
+ {typeof headerTitle === 'function' ? (
+ headerTitleElement
+ ) : (
+
+ {titleText}
+
+ )}
+
+ ) : null}
+ >
+ )}
+ {headerBackImageSource !== undefined ? (
+
+ ) : null}
+ {headerRightElement != null ? (
+
+ {headerRightElement}
+
+ ) : null}
+ {Platform.OS === 'ios' && headerSearchBarOptions != null ? (
+
+
+
+ ) : null}
+
+ >
);
}
@@ -234,4 +254,14 @@ const styles = StyleSheet.create({
flexDirection: 'row',
alignItems: 'center',
},
+ translucent: {
+ position: 'absolute',
+ top: 0,
+ left: 0,
+ right: 0,
+ zIndex: 1,
+ },
+ background: {
+ overflow: 'hidden',
+ },
});
diff --git a/packages/native-stack/src/views/NativeStackView.native.tsx b/packages/native-stack/src/views/NativeStackView.native.tsx
index e49051c183..9d105d483e 100644
--- a/packages/native-stack/src/views/NativeStackView.native.tsx
+++ b/packages/native-stack/src/views/NativeStackView.native.tsx
@@ -40,11 +40,13 @@ const MaybeNestedStack = ({
options,
route,
presentation,
+ headerHeight,
children,
}: {
options: NativeStackNavigationOptions;
route: Route;
presentation: Exclude | 'card';
+ headerHeight: number;
children: React.ReactNode;
}) => {
const { colors } = useTheme();
@@ -87,7 +89,12 @@ const MaybeNestedStack = ({
return (
-
+
{content}
@@ -221,6 +228,7 @@ const SceneView = ({
{...options}
route={route}
headerShown={isHeaderInPush}
+ headerHeight={headerHeight}
canGoBack={index !== 0}
/>
)}
@@ -228,6 +236,7 @@ const SceneView = ({
options={options}
route={route}
presentation={presentation}
+ headerHeight={headerHeight}
>
{render()}