@react-navigation/elements 2.9.5 → 3.0.0-alpha.1

package/lib/module/Badge.js

@@ -1,9 +1,9 @@
 "use strict";
 
 import { useTheme } from '@react-navigation/native';
-import Color from 'color';
 import * as React from 'react';
 import { Animated, Platform, StyleSheet } from 'react-native';
+import { Color } from "./Color.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useNativeDriver = Platform.OS !== 'web';
 export function Badge({
@@ -49,7 +49,7 @@ export function Badge({
     backgroundColor = colors.notification,
     ...restStyle
   } = StyleSheet.flatten(style) || {};
-  const textColor = Color(backgroundColor).isLight() ? 'black' : 'white';
+  const textColor = Color(backgroundColor)?.isLight() ? 'black' : 'white';
   const borderRadius = size / 2;
   const fontSize = Math.floor(size * 3 / 4);
   return /*#__PURE__*/_jsx(Animated.Text, {

package/lib/module/Badge.js.map

@@ -1 +1 @@
-{"version":3,"names":["useTheme","Color","React","Animated","Platform","StyleSheet","jsx","_jsx","useNativeDriver","OS","Badge","children","style","visible","size","rest","opacity","useState","Value","rendered","setRendered","colors","fonts","useEffect","timing","toValue","duration","start","finished","stopAnimation","backgroundColor","notification","restStyle","flatten","textColor","isLight","borderRadius","fontSize","Math","floor","Text","numberOfLines","transform","scale","interpolate","inputRange","outputRange","color","lineHeight","height","minWidth","borderCurve","regular","styles","container","create","alignSelf","textAlign","paddingHorizontal","overflow"],"sourceRoot":"../../src","sources":["Badge.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["useTheme","React","Animated","Platform","StyleSheet","Color","jsx","_jsx","useNativeDriver","OS","Badge","children","style","visible","size","rest","opacity","useState","Value","rendered","setRendered","colors","fonts","useEffect","timing","toValue","duration","start","finished","stopAnimation","backgroundColor","notification","restStyle","flatten","textColor","isLight","borderRadius","fontSize","Math","floor","Text","numberOfLines","transform","scale","interpolate","inputRange","outputRange","color","lineHeight","height","minWidth","borderCurve","regular","styles","container","create","alignSelf","textAlign","paddingHorizontal","overflow"],"sourceRoot":"../../src","sources":["Badge.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/BlurEffectBackground.js

@@ -0,0 +1,59 @@
+"use strict";
+
+import * as React from 'react';
+import { Animated, Platform, StyleSheet, View } from 'react-native';
+import { getBlurBackgroundColor } from "./getBlurBackgroundColor.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Component to use as a background to provide apple-style blur effect.
+ *
+ * Only supported on web. Falls back to a regular `View` on other platforms.
+ */
+export function BlurEffectBackground({
+  blurEffect,
+  style,
+  children,
+  ...rest
+}) {
+  let containerStyle, blurStyle, blurBackground, colorBackground;
+  if (Platform.OS === 'web' && blurEffect && blurEffect !== 'none') {
+    const blurBackgroundColor = getBlurBackgroundColor(blurEffect);
+    if (blurBackgroundColor) {
+      const backdropFilter = `saturate(180%) blur(30px)`;
+      blurStyle = {
+        // @ts-expect-error backdropFilter is web-only
+        backdropFilter,
+        webkitBackdropFilter: backdropFilter
+      };
+      blurBackground = /*#__PURE__*/_jsx("div", {
+        style: {
+          position: 'absolute',
+          left: 0,
+          right: 0,
+          top: 0,
+          bottom: 0,
+          zIndex: -1,
+          backgroundColor: blurBackgroundColor
+        }
+      });
+      const flattenedStyle = StyleSheet.flatten(style) || {};
+      containerStyle = [flattenedStyle, {
+        backgroundColor: 'transparent'
+      }];
+      colorBackground = 'backgroundColor' in flattenedStyle && flattenedStyle.backgroundColor !== 'transparent' ? /*#__PURE__*/_jsx(Animated.View, {
+        style: [StyleSheet.absoluteFill, {
+          zIndex: -1,
+          backgroundColor: flattenedStyle.backgroundColor
+        }]
+      }) : null;
+    }
+  } else {
+    containerStyle = style;
+  }
+  return /*#__PURE__*/_jsxs(View, {
+    style: [blurStyle, containerStyle],
+    ...rest,
+    children: [blurBackground, colorBackground, children]
+  });
+}
+//# sourceMappingURL=BlurEffectBackground.js.map

package/lib/module/BlurEffectBackground.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Animated","Platform","StyleSheet","View","getBlurBackgroundColor","jsx","_jsx","jsxs","_jsxs","BlurEffectBackground","blurEffect","style","children","rest","containerStyle","blurStyle","blurBackground","colorBackground","OS","blurBackgroundColor","backdropFilter","webkitBackdropFilter","position","left","right","top","bottom","zIndex","backgroundColor","flattenedStyle","flatten","absoluteFill"],"sourceRoot":"../../src","sources":["BlurEffectBackground.tsx"],"mappings":";;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SACEC,QAAQ,EACRC,QAAQ,EAERC,UAAU,EACVC,IAAI,QAGC,cAAc;AAErB,SAEEC,sBAAsB,QACjB,6BAA0B;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAQlC;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,oBAAoBA,CAAC;EACnCC,UAAU;EACVC,KAAK;EACLC,QAAQ;EACR,GAAGC;AACE,CAAC,EAAE;EACR,IAAIC,cAAc,EAAEC,SAAS,EAAEC,cAAc,EAAEC,eAAe;EAE9D,IAAIhB,QAAQ,CAACiB,EAAE,KAAK,KAAK,IAAIR,UAAU,IAAIA,UAAU,KAAK,MAAM,EAAE;IAChE,MAAMS,mBAAmB,GAAGf,sBAAsB,CAACM,UAAU,CAAC;IAE9D,IAAIS,mBAAmB,EAAE;MACvB,MAAMC,cAAc,GAAG,2BAA2B;MAElDL,SAAS,GAAG;QACV;QACAK,cAAc;QACdC,oBAAoB,EAAED;MACxB,CAAC;MAEDJ,cAAc,gBACZV,IAAA;QACEK,KAAK,EAAE;UACLW,QAAQ,EAAE,UAAU;UACpBC,IAAI,EAAE,CAAC;UACPC,KAAK,EAAE,CAAC;UACRC,GAAG,EAAE,CAAC;UACNC,MAAM,EAAE,CAAC;UACTC,MAAM,EAAE,CAAC,CAAC;UACVC,eAAe,EAAET;QACnB;MAAE,CACH,CACF;MAED,MAAMU,cAAc,GAAG3B,UAAU,CAAC4B,OAAO,CAACnB,KAAK,CAAC,IAAI,CAAC,CAAC;MAEtDG,cAAc,GAAG,CAACe,cAAc,EAAE;QAAED,eAAe,EAAE;MAAc,CAAC,CAAC;MACrEX,eAAe,GACb,iBAAiB,IAAIY,cAAc,IACnCA,cAAc,CAACD,eAAe,KAAK,aAAa,gBAC9CtB,IAAA,CAACN,QAAQ,CAACG,IAAI;QACZQ,KAAK,EAAE,CACLT,UAAU,CAAC6B,YAAY,EACvB;UACEJ,MAAM,EAAE,CAAC,CAAC;UACVC,eAAe,EAAEC,cAAc,CAACD;QAClC,CAAC;MACD,CACH,CAAC,GACA,IAAI;IACZ;EACF,CAAC,MAAM;IACLd,cAAc,GAAGH,KAAK;EACxB;EAEA,oBACEH,KAAA,CAACL,IAAI;IAACQ,KAAK,EAAE,CAACI,SAAS,EAAED,cAAc,CAAE;IAAA,GAAKD,IAAI;IAAAD,QAAA,GAC/CI,cAAc,EACdC,eAAe,EACfL,QAAQ;EAAA,CACL,CAAC;AAEX","ignoreList":[]}

package/lib/module/Button.js

@@ -1,9 +1,9 @@
 "use strict";
 
 import { useLinkProps, useTheme } from '@react-navigation/native';
-import Color from 'color';
 import * as React from 'react';
 import { Platform, StyleSheet } from 'react-native';
+import { Color } from "./Color.js";
 import { PlatformPressable } from "./PlatformPressable.js";
 import { Text } from "./Text.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -48,6 +48,7 @@ function ButtonBase({
   ...rest
 }) {
   const {
+    dark,
     colors,
     fonts
   } = useTheme();
@@ -60,25 +61,25 @@ function ButtonBase({
       textColor = color;
       break;
     case 'tinted':
-      backgroundColor = Color(color).fade(0.85).string();
+      backgroundColor = Color(color)?.fade(0.85).string() ?? (dark ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.06)');
       textColor = color;
       break;
     case 'filled':
       backgroundColor = color;
-      textColor = Color(color).isDark() ? 'white' : Color(color).darken(0.71).string();
+      textColor = Color(color)?.isDark() ? 'white' : Color(color)?.darken(0.71).string() ?? '#fff';
       break;
   }
   return /*#__PURE__*/_jsx(PlatformPressable, {
     ...rest,
     android_ripple: {
       radius: BUTTON_RADIUS,
-      color: Color(textColor).fade(0.85).string(),
+      color: Color(textColor)?.fade(0.85).string() ?? 'rgba(0, 0, 0, 0.1)',
       ...android_ripple
     },
     pressOpacity: Platform.OS === 'ios' ? undefined : 1,
-    hoverEffect: {
+    hoverEffect: typeof textColor === 'string' ? {
       color: textColor
-    },
+    } : undefined,
     style: [{
       backgroundColor
     }, styles.button, style],

package/lib/module/Button.js.map

@@ -1 +1 @@
-{"version":3,"names":["useLinkProps","useTheme","Color","React","Platform","StyleSheet","PlatformPressable","Text","jsx","_jsx","BUTTON_RADIUS","Button","props","ButtonLink","ButtonBase","screen","params","action","href","rest","variant","color","customColor","android_ripple","style","children","colors","fonts","primary","backgroundColor","textColor","fade","string","isDark","darken","radius","pressOpacity","OS","undefined","hoverEffect","styles","button","regular","text","create","paddingHorizontal","paddingVertical","borderRadius","borderCurve","fontSize","lineHeight","letterSpacing","textAlign"],"sourceRoot":"../../src","sources":["Button.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["useLinkProps","useTheme","React","Platform","StyleSheet","Color","PlatformPressable","Text","jsx","_jsx","BUTTON_RADIUS","Button","props","ButtonLink","ButtonBase","screen","params","action","href","rest","variant","color","customColor","android_ripple","style","children","dark","colors","fonts","primary","backgroundColor","textColor","fade","string","isDark","darken","radius","pressOpacity","OS","undefined","hoverEffect","styles","button","regular","text","create","paddingHorizontal","paddingVertical","borderRadius","borderCurve","fontSize","lineHeight","letterSpacing","textAlign"],"sourceRoot":"../../src","sources":["Button.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/Color.js

@@ -0,0 +1,11 @@
+"use strict";
+
+// eslint-disable-next-line no-restricted-imports
+import OriginalColor from 'color';
+export function Color(value) {
+  if (typeof value === 'string' && !value.startsWith('var(')) {
+    return OriginalColor(value);
+  }
+  return undefined;
+}
+//# sourceMappingURL=Color.js.map

package/lib/module/Color.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["OriginalColor","Color","value","startsWith","undefined"],"sourceRoot":"../../src","sources":["Color.tsx"],"mappings":";;AAAA;AACA,OAAOA,aAAa,MAAM,OAAO;AAajC,OAAO,SAASC,KAAKA,CAACC,KAAiB,EAAyB;EAC9D,IAAI,OAAOA,KAAK,KAAK,QAAQ,IAAI,CAACA,KAAK,CAACC,UAAU,CAAC,MAAM,CAAC,EAAE;IAC1D,OAAOH,aAAa,CAACE,KAAK,CAAC;EAC7B;EAEA,OAAOE,SAAS;AAClB","ignoreList":[]}

package/lib/module/Container.js

@@ -0,0 +1,42 @@
+"use strict";
+
+import { Platform, View } from 'react-native';
+import { jsx as _jsx } from "react/jsx-runtime";
+export function Container({
+  inert,
+  children,
+  style
+}) {
+  if (Platform.OS === 'web') {
+    return /*#__PURE__*/_jsx("div", {
+      inert: inert,
+      "aria-hidden": inert,
+      style: {
+        ...DEFAULT_STYLE,
+        ...style
+      },
+      children: children
+    });
+  }
+  return /*#__PURE__*/_jsx(View, {
+    "aria-hidden": inert,
+    style: [{
+      pointerEvents: inert ? 'none' : 'box-none'
+    }, style],
+    collapsable: false,
+    children: children
+  });
+}
+const DEFAULT_STYLE = {
+  display: 'flex',
+  alignContent: 'flex-start',
+  alignItems: 'stretch',
+  boxSizing: 'border-box',
+  flexBasis: 'auto',
+  flexDirection: 'column',
+  flexShrink: 0,
+  minHeight: 0,
+  minWidth: 0,
+  position: 'relative'
+};
+//# sourceMappingURL=Container.js.map

package/lib/module/Container.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Platform","View","jsx","_jsx","Container","inert","children","style","OS","DEFAULT_STYLE","pointerEvents","collapsable","display","alignContent","alignItems","boxSizing","flexBasis","flexDirection","flexShrink","minHeight","minWidth","position"],"sourceRoot":"../../src","sources":["Container.tsx"],"mappings":";;AAAA,SAASA,QAAQ,EAAEC,IAAI,QAAwB,cAAc;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAQ9D,OAAO,SAASC,SAASA,CAAC;EAAEC,KAAK;EAAEC,QAAQ;EAAEC;AAAa,CAAC,EAAE;EAC3D,IAAIP,QAAQ,CAACQ,EAAE,KAAK,KAAK,EAAE;IACzB,oBACEL,IAAA;MACEE,KAAK,EAAEA,KAAM;MACb,eAAaA,KAAM;MACnBE,KAAK,EAAE;QAAE,GAAGE,aAAa;QAAE,GAAGF;MAAM,CAAE;MAAAD,QAAA,EAErCA;IAAQ,CACN,CAAC;EAEV;EAEA,oBACEH,IAAA,CAACF,IAAI;IACH,eAAaI,KAAM;IACnBE,KAAK,EAAE,CAAC;MAAEG,aAAa,EAAEL,KAAK,GAAG,MAAM,GAAG;IAAW,CAAC,EAAEE,KAAK,CAAE;IAC/DI,WAAW,EAAE,KAAM;IAAAL,QAAA,EAElBA;EAAQ,CACL,CAAC;AAEX;AAEA,MAAMG,aAAa,GAAG;EACpBG,OAAO,EAAE,MAAM;EACfC,YAAY,EAAE,YAAY;EAC1BC,UAAU,EAAE,SAAS;EACrBC,SAAS,EAAE,YAAY;EACvBC,SAAS,EAAE,MAAM;EACjBC,aAAa,EAAE,QAAQ;EACvBC,UAAU,EAAE,CAAC;EACbC,SAAS,EAAE,CAAC;EACZC,QAAQ,EAAE,CAAC;EACXC,QAAQ,EAAE;AACZ,CAAwC","ignoreList":[]}

package/lib/module/Header/Header.js

@@ -1,24 +1,29 @@
 "use strict";
 
 import { useNavigation, useTheme } from '@react-navigation/native';
-import Color from 'color';
 import * as React from 'react';
-import { Animated, Platform, StyleSheet, View } from 'react-native';
+import { Animated, Easing, Platform, StyleSheet, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import searchIcon from '../assets/search-icon.png';
+import { Color } from "../Color.js";
+import { isLiquidGlassSupported } from '../LiquidGlassView';
+import { PlatformColor } from '../PlatformColor';
 import { useFrameSize } from "../useFrameSize.js";
 import { getDefaultHeaderHeight } from "./getDefaultHeaderHeight.js";
 import { HeaderBackButton } from "./HeaderBackButton.js";
 import { HeaderBackground } from "./HeaderBackground.js";
-import { HeaderButton } from "./HeaderButton.js";
+import { BUTTON_SIZE, BUTTON_SPACING, HeaderButton } from "./HeaderButton.js";
+import { HeaderButtonBackground } from "./HeaderButtonBackground.js";
 import { HeaderIcon } from "./HeaderIcon.js";
 import { HeaderSearchBar } from "./HeaderSearchBar.js";
 import { HeaderShownContext } from "./HeaderShownContext.js";
 import { HeaderTitle } from "./HeaderTitle.js";
-
-// Width of the screen in split layout on portrait mode on iPad Mini
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const IPAD_MINI_MEDIUM_WIDTH = 414;
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const STATUS_BAR_OFFSET = Platform.select({
+  // The top inset on iOS is a bit less than the status bar height
+  ios: -7,
+  default: 0
+});
 const warnIfHeaderStylesDefined = styles => {
   Object.keys(styles).forEach(styleProp => {
     const value = styles[styleProp];
@@ -29,33 +34,16 @@ const warnIfHeaderStylesDefined = styles => {
     }
   });
 };
+const useNativeDriver = Platform.OS !== 'web';
 export function Header(props) {
   const insets = useSafeAreaInsets();
-  const frame = useFrameSize(size => size, true);
   const {
     colors
   } = useTheme();
   const navigation = useNavigation();
   const isParentHeaderShown = React.useContext(HeaderShownContext);
   const [searchBarVisible, setSearchBarVisible] = React.useState(false);
-  const [titleLayout, setTitleLayout] = React.useState(undefined);
-  const onTitleLayout = e => {
-    const {
-      height,
-      width
-    } = e.nativeEvent.layout;
-    setTitleLayout(titleLayout => {
-      if (titleLayout && height === titleLayout.height && width === titleLayout.width) {
-        return titleLayout;
-      }
-      return {
-        height,
-        width
-      };
-    });
-  };
   const {
-    layout = frame,
     modal = false,
     back,
     title,
@@ -64,17 +52,20 @@ export function Header(props) {
     headerLeft = back ? props => /*#__PURE__*/_jsx(HeaderBackButton, {
       ...props
     }) : undefined,
+    headerLeftBackgroundVisible,
     headerSearchBarOptions,
     headerTransparent,
     headerTintColor,
     headerBackground,
+    headerBlurEffect,
     headerRight,
+    headerRightBackgroundVisible,
     headerTitleAllowFontScaling: titleAllowFontScaling,
     headerTitleStyle: titleStyle,
     headerLeftContainerStyle: leftContainerStyle,
     headerRightContainerStyle: rightContainerStyle,
     headerTitleContainerStyle: titleContainerStyle,
-    headerBackButtonDisplayMode = Platform.OS === 'ios' ? 'default' : 'minimal',
+    headerBackButtonDisplayMode = Platform.OS !== 'ios' || isLiquidGlassSupported ? 'minimal' : 'default',
     headerBackTitleStyle,
     headerBackgroundContainerStyle: backgroundContainerStyle,
     headerStyle: customHeaderStyle,
@@ -83,7 +74,11 @@ export function Header(props) {
     headerPressOpacity,
     headerStatusBarHeight = isParentHeaderShown ? 0 : insets.top
   } = props;
-  const defaultHeight = getDefaultHeaderHeight(layout, modal, headerStatusBarHeight);
+  const defaultHeight = useFrameSize(frame => getDefaultHeaderHeight({
+    landscape: frame.width > frame.height,
+    modalPresentation: modal,
+    topInset: headerStatusBarHeight
+  }));
   const {
     height = defaultHeight,
     maxHeight,
@@ -218,7 +213,7 @@ export function Header(props) {
     ...safeStyles
   };
   const iconTintColor = headerTintColor ?? Platform.select({
-    ios: colors.primary,
+    ios: isLiquidGlassSupported && PlatformColor ? PlatformColor('label') : colors.primary,
     default: colors.text
   });
   const leftButton = headerLeft ? headerLeft({
@@ -226,8 +221,6 @@ export function Header(props) {
     pressColor: headerPressColor,
     pressOpacity: headerPressOpacity,
     displayMode: headerBackButtonDisplayMode,
-    titleLayout,
-    screenLayout: layout,
     canGoBack: Boolean(back),
     onPress: back ? navigation.goBack : undefined,
     label: back?.title,
@@ -243,9 +236,50 @@ export function Header(props) {
   const headerTitle = typeof customTitle !== 'function' ? props => /*#__PURE__*/_jsx(HeaderTitle, {
     ...props
   }) : customTitle;
+  const buttonMinWidth = headerTitleAlign === 'center' && (leftButton || rightButton) ? BUTTON_SIZE : 0;
+  const [searchBarRendered, setSearchBarRendered] = React.useState(searchBarVisible);
+  const searchBarVisibleRef = React.useRef(searchBarVisible);
+  const [searchBarVisibleAnim] = React.useState(() => new Animated.Value(searchBarVisible ? 1 : 0));
+  if (searchBarVisible && !searchBarRendered) {
+    setSearchBarRendered(true);
+  }
+  React.useEffect(() => {
+    // Avoid act warning in tests just by rendering header
+    if (searchBarVisible === searchBarVisibleRef.current) {
+      return;
+    }
+    Animated.timing(searchBarVisibleAnim, {
+      toValue: searchBarVisible ? 1 : 0,
+      duration: 150,
+      useNativeDriver,
+      easing: Easing.in(Easing.linear)
+    }).start(({
+      finished
+    }) => {
+      if (finished) {
+        setSearchBarRendered(searchBarVisible);
+        searchBarVisibleRef.current = searchBarVisible;
+      }
+    });
+    return () => {
+      searchBarVisibleAnim.stopAnimation();
+    };
+  }, [searchBarVisible, searchBarVisibleAnim]);
+  const headerOpacity = searchBarVisibleAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: [1, 0]
+  });
+  const searchBarOpacity = searchBarVisibleAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: [
+    // FIXME: Liquid glass views don't work properly with `opacity: 0`
+    // So we use a small value instead to workaround this issue.
+    0.1, 1]
+  });
+  const statusBarSpacing = Math.max(headerStatusBarHeight + STATUS_BAR_OFFSET, 0);
   return /*#__PURE__*/_jsxs(Animated.View, {
-    pointerEvents: "box-none",
     style: [{
+      pointerEvents: 'box-none',
       height,
       minHeight,
       maxHeight,
@@ -253,53 +287,48 @@ export function Header(props) {
       transform
     }],
     children: [/*#__PURE__*/_jsx(Animated.View, {
-      pointerEvents: "box-none",
-      style: [StyleSheet.absoluteFill, backgroundContainerStyle],
+      style: [styles.background, backgroundContainerStyle],
       children: headerBackground ? headerBackground({
         style: backgroundStyle
       }) : /*#__PURE__*/_jsx(HeaderBackground, {
-        pointerEvents:
-        // Allow touch through the header when background color is transparent
-        headerTransparent && (backgroundStyle.backgroundColor === 'transparent' || Color(backgroundStyle.backgroundColor).alpha() === 0) ? 'none' : 'auto',
-        style: backgroundStyle
+        blurEffect: headerBlurEffect,
+        style: [{
+          // Allow touch through the header when background color is transparent
+          pointerEvents: headerTransparent && backgroundStyle.backgroundColor && (backgroundStyle.backgroundColor === 'transparent' || Color(backgroundStyle.backgroundColor)?.alpha() === 0) ? 'none' : 'auto'
+        }, backgroundStyle]
       })
-    }), /*#__PURE__*/_jsx(View, {
-      pointerEvents: "none",
-      style: {
-        height: headerStatusBarHeight
-      }
-    }), /*#__PURE__*/_jsxs(View, {
-      pointerEvents: "box-none",
-      style: [styles.content, Platform.OS === 'ios' && frame.width >= IPAD_MINI_MEDIUM_WIDTH ? styles.large : null],
-      children: [/*#__PURE__*/_jsx(Animated.View, {
-        pointerEvents: "box-none",
-        style: [styles.start, !searchBarVisible && headerTitleAlign === 'center' && styles.expand, {
+    }), /*#__PURE__*/_jsxs(Animated.View, {
+      style: [styles.content, {
+        pointerEvents: searchBarVisible ? 'none' : 'auto',
+        marginTop: statusBarSpacing,
+        opacity: headerOpacity
+      }],
+      children: [/*#__PURE__*/_jsx(View, {
+        style: [styles.start, headerTitleAlign === 'center' ? styles.expand : styles.shrink, {
+          minWidth: buttonMinWidth,
           marginStart: insets.left
-        }, leftContainerStyle],
-        children: leftButton
-      }), Platform.OS === 'ios' || !searchBarVisible ? /*#__PURE__*/_jsxs(_Fragment, {
-        children: [/*#__PURE__*/_jsx(Animated.View, {
-          pointerEvents: "box-none",
-          style: [styles.title, {
-            // Avoid the title from going offscreen or overlapping buttons
-            maxWidth: headerTitleAlign === 'center' ? layout.width - ((leftButton ? headerBackButtonDisplayMode !== 'minimal' ? 80 : 32 : 16) + (rightButton || headerSearchBarOptions ? 16 : 0) + Math.max(insets.left, insets.right)) * 2 : layout.width - ((leftButton ? 52 : 16) + (rightButton || headerSearchBarOptions ? 52 : 16) + insets.left - insets.right)
-          }, headerTitleAlign === 'left' && leftButton ? {
-            marginStart: 4
-          } : {
-            marginHorizontal: 16
-          }, titleContainerStyle],
-          children: headerTitle({
-            children: title,
-            allowFontScaling: titleAllowFontScaling,
-            tintColor: headerTintColor,
-            onLayout: onTitleLayout,
-            style: titleStyle
-          })
-        }), /*#__PURE__*/_jsxs(Animated.View, {
-          pointerEvents: "box-none",
-          style: [styles.end, styles.expand, {
-            marginEnd: insets.right
-          }, rightContainerStyle],
+        }],
+        children: /*#__PURE__*/_jsx(HeaderButtonBackground, {
+          plain: headerLeftBackgroundVisible === false,
+          style: [styles.buttonContainer, leftContainerStyle],
+          children: leftButton
+        })
+      }), /*#__PURE__*/_jsx(Animated.View, {
+        style: [styles.title, !leftButton && styles.titleStart, titleContainerStyle],
+        children: headerTitle({
+          children: title,
+          allowFontScaling: titleAllowFontScaling,
+          tintColor: headerTintColor,
+          style: [styles.titleText, titleStyle]
+        })
+      }), /*#__PURE__*/_jsx(View, {
+        style: [styles.end, styles.expand, {
+          minWidth: buttonMinWidth,
+          marginEnd: insets.right
+        }],
+        children: /*#__PURE__*/_jsxs(HeaderButtonBackground, {
+          plain: headerRightBackgroundVisible === false,
+          style: [styles.buttonContainer, rightContainerStyle],
           children: [rightButton, headerSearchBarOptions ? /*#__PURE__*/_jsx(HeaderButton, {
             tintColor: iconTintColor,
             pressColor: headerPressColor,
@@ -313,51 +342,81 @@ export function Header(props) {
               tintColor: iconTintColor
             })
           }) : null]
-        })]
-      }) : null, Platform.OS === 'ios' || searchBarVisible ? /*#__PURE__*/_jsx(HeaderSearchBar, {
-        ...headerSearchBarOptions,
-        visible: searchBarVisible,
-        onClose: () => {
-          setSearchBarVisible(false);
-          headerSearchBarOptions?.onClose?.();
-        },
-        tintColor: headerTintColor,
-        style: [Platform.OS === 'ios' ? [StyleSheet.absoluteFill, {
-          paddingTop: headerStatusBarHeight ? 0 : 4
-        }, {
-          backgroundColor: backgroundColor ?? colors.card
-        }] : !leftButton && {
-          marginStart: 8
-        }]
-      }) : null]
-    })]
+        })
+      })]
+    }), searchBarRendered ? /*#__PURE__*/_jsx(HeaderSearchBar, {
+      ...headerSearchBarOptions,
+      statusBarHeight: statusBarSpacing,
+      visible: searchBarVisible,
+      onClose: () => {
+        setSearchBarVisible(false);
+        headerSearchBarOptions?.onClose?.();
+      },
+      tintColor: headerTintColor,
+      style: [StyleSheet.absoluteFill, {
+        opacity: searchBarOpacity
+      }]
+    }) : null]
   });
 }
+const BUTTON_OFFSET = Platform.OS === 'ios' ? 10 : 4;
+const TITLE_START_OFFSET = Platform.OS === 'ios' ? 0 :
+// Since button container is always present,
+// We need to account for its horizontal margin as well
+16 - BUTTON_OFFSET * 2;
 const styles = StyleSheet.create({
   content: {
+    pointerEvents: 'box-none',
     flex: 1,
     flexDirection: 'row',
     alignItems: 'stretch'
   },
-  large: {
-    marginHorizontal: 5
-  },
   title: {
-    justifyContent: 'center'
+    flexShrink: 1,
+    minWidth: 0,
+    justifyContent: 'center',
+    pointerEvents: 'box-none',
+    // Make sure title goes below liquid glass buttons
+    zIndex: -1
+  },
+  titleStart: {
+    marginLeft: TITLE_START_OFFSET
+  },
+  titleText: {
+    textAlign: 'center'
+  },
+  buttonContainer: {
+    flexDirection: 'row',
+    pointerEvents: 'box-none',
+    gap: BUTTON_SPACING,
+    marginHorizontal: BUTTON_OFFSET
   },
   start: {
     flexDirection: 'row',
     alignItems: 'center',
-    justifyContent: 'flex-start'
+    justifyContent: 'flex-start',
+    pointerEvents: 'box-none'
   },
   end: {
     flexDirection: 'row',
     alignItems: 'center',
-    justifyContent: 'flex-end'
+    justifyContent: 'flex-end',
+    pointerEvents: 'box-none'
   },
   expand: {
     flexGrow: 1,
+    flexShrink: 1,
     flexBasis: 0
+  },
+  shrink: {
+    flexGrow: 0,
+    flexShrink: 1,
+    minWidth: 0,
+    maxWidth: '50%'
+  },
+  background: {
+    ...StyleSheet.absoluteFillObject,
+    pointerEvents: 'box-none'
   }
 });
 //# sourceMappingURL=Header.js.map