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

package/src/Header/Header.tsx

@@ -1,9 +1,8 @@
 import { useNavigation, useTheme } from '@react-navigation/native';
-import Color from 'color';
 import * as React from 'react';
 import {
   Animated,
-  type LayoutChangeEvent,
+  Easing,
   Platform,
   StyleSheet,
   View,
@@ -12,20 +11,21 @@ import {
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import searchIcon from '../assets/search-icon.png';
-import type { HeaderOptions, Layout } from '../types';
+import { Color } from '../Color';
+import { isLiquidGlassSupported } from '../LiquidGlassView';
+import { PlatformColor } from '../PlatformColor';
+import type { HeaderOptions } from '../types';
 import { useFrameSize } from '../useFrameSize';
 import { getDefaultHeaderHeight } from './getDefaultHeaderHeight';
 import { HeaderBackButton } from './HeaderBackButton';
 import { HeaderBackground } from './HeaderBackground';
-import { HeaderButton } from './HeaderButton';
+import { BUTTON_SIZE, BUTTON_SPACING, HeaderButton } from './HeaderButton';
+import { HeaderButtonBackground } from './HeaderButtonBackground';
 import { HeaderIcon } from './HeaderIcon';
 import { HeaderSearchBar } from './HeaderSearchBar';
 import { HeaderShownContext } from './HeaderShownContext';
 import { HeaderTitle } from './HeaderTitle';
 
-// Width of the screen in split layout on portrait mode on iPad Mini
-const IPAD_MINI_MEDIUM_WIDTH = 414;
-
 type Props = HeaderOptions & {
   /**
    * Options for the back button.
@@ -44,16 +44,18 @@ type Props = HeaderOptions & {
    * Whether the header is in a modal
    */
   modal?: boolean;
-  /**
-   * Layout of the screen.
-   */
-  layout?: Layout;
   /**
    * Title text for the header.
    */
   title: string;
 };
 
+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: Record<string, any>) => {
   Object.keys(styles).forEach((styleProp) => {
     const value = styles[styleProp];
@@ -70,54 +72,41 @@ const warnIfHeaderStylesDefined = (styles: Record<string, any>) => {
   });
 };
 
+const useNativeDriver = Platform.OS !== 'web';
+
 export function Header(props: 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<Layout | undefined>(
-    undefined
-  );
-
-  const onTitleLayout = (e: LayoutChangeEvent) => {
-    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,
     headerTitle: customTitle,
     headerTitleAlign = Platform.OS === 'ios' ? 'center' : 'left',
     headerLeft = back ? (props) => <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,
@@ -127,10 +116,12 @@ export function Header(props: Props) {
     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 {
@@ -271,7 +262,10 @@ export function Header(props: Props) {
   const iconTintColor =
     headerTintColor ??
     Platform.select({
-      ios: colors.primary,
+      ios:
+        isLiquidGlassSupported && PlatformColor
+          ? PlatformColor('label')
+          : colors.primary,
       default: colors.text,
     });
 
@@ -281,8 +275,6 @@ export function Header(props: Props) {
         pressColor: headerPressColor,
         pressOpacity: headerPressOpacity,
         displayMode: headerBackButtonDisplayMode,
-        titleLayout,
-        screenLayout: layout,
         canGoBack: Boolean(back),
         onPress: back ? navigation.goBack : undefined,
         label: back?.title,
@@ -307,166 +299,248 @@ export function Header(props: 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 (
     <Animated.View
-      pointerEvents="box-none"
-      style={[{ height, minHeight, maxHeight, opacity, transform }]}
+      style={[
+        {
+          pointerEvents: 'box-none',
+          height,
+          minHeight,
+          maxHeight,
+          opacity,
+          transform,
+        },
+      ]}
     >
-      <Animated.View
-        pointerEvents="box-none"
-        style={[StyleSheet.absoluteFill, backgroundContainerStyle]}
-      >
+      <Animated.View style={[styles.background, backgroundContainerStyle]}>
         {headerBackground ? (
           headerBackground({ style: backgroundStyle })
         ) : (
           <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,
+            ]}
           />
         )}
       </Animated.View>
-      <View pointerEvents="none" style={{ height: headerStatusBarHeight }} />
-      <View
-        pointerEvents="box-none"
+      <Animated.View
         style={[
           styles.content,
-          Platform.OS === 'ios' && frame.width >= IPAD_MINI_MEDIUM_WIDTH
-            ? styles.large
-            : null,
+          {
+            pointerEvents: searchBarVisible ? 'none' : 'auto',
+            marginTop: statusBarSpacing,
+            opacity: headerOpacity,
+          },
         ]}
       >
-        <Animated.View
-          pointerEvents="box-none"
+        <View
           style={[
             styles.start,
-            !searchBarVisible && headerTitleAlign === 'center' && styles.expand,
-            { marginStart: insets.left },
-            leftContainerStyle,
+            headerTitleAlign === 'center' ? styles.expand : styles.shrink,
+            {
+              minWidth: buttonMinWidth,
+              marginStart: insets.left,
+            },
           ]}
         >
-          {leftButton}
+          <HeaderButtonBackground
+            plain={headerLeftBackgroundVisible === false}
+            style={[styles.buttonContainer, leftContainerStyle]}
+          >
+            {leftButton}
+          </HeaderButtonBackground>
+        </View>
+        <Animated.View
+          style={[
+            styles.title,
+            !leftButton && styles.titleStart,
+            titleContainerStyle,
+          ]}
+        >
+          {headerTitle({
+            children: title,
+            allowFontScaling: titleAllowFontScaling,
+            tintColor: headerTintColor,
+            style: [styles.titleText, titleStyle],
+          })}
         </Animated.View>
-        {Platform.OS === 'ios' || !searchBarVisible ? (
-          <>
-            <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,
-              ]}
-            >
-              {headerTitle({
-                children: title,
-                allowFontScaling: titleAllowFontScaling,
-                tintColor: headerTintColor,
-                onLayout: onTitleLayout,
-                style: titleStyle,
-              })}
-            </Animated.View>
-            <Animated.View
-              pointerEvents="box-none"
-              style={[
-                styles.end,
-                styles.expand,
-                { marginEnd: insets.right },
-                rightContainerStyle,
-              ]}
-            >
-              {rightButton}
-              {headerSearchBarOptions ? (
-                <HeaderButton
-                  tintColor={iconTintColor}
-                  pressColor={headerPressColor}
-                  pressOpacity={headerPressOpacity}
-                  onPress={() => {
-                    setSearchBarVisible(true);
-                    headerSearchBarOptions?.onOpen?.();
-                  }}
-                >
-                  <HeaderIcon source={searchIcon} tintColor={iconTintColor} />
-                </HeaderButton>
-              ) : null}
-            </Animated.View>
-          </>
-        ) : null}
-        {Platform.OS === 'ios' || searchBarVisible ? (
-          <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}
-      </View>
+        <View
+          style={[
+            styles.end,
+            styles.expand,
+            {
+              minWidth: buttonMinWidth,
+              marginEnd: insets.right,
+            },
+          ]}
+        >
+          <HeaderButtonBackground
+            plain={headerRightBackgroundVisible === false}
+            style={[styles.buttonContainer, rightContainerStyle]}
+          >
+            {rightButton}
+            {headerSearchBarOptions ? (
+              <HeaderButton
+                tintColor={iconTintColor}
+                pressColor={headerPressColor}
+                pressOpacity={headerPressOpacity}
+                onPress={() => {
+                  setSearchBarVisible(true);
+                  headerSearchBarOptions?.onOpen?.();
+                }}
+              >
+                <HeaderIcon source={searchIcon} tintColor={iconTintColor} />
+              </HeaderButton>
+            ) : null}
+          </HeaderButtonBackground>
+        </View>
+      </Animated.View>
+      {searchBarRendered ? (
+        <HeaderSearchBar
+          {...headerSearchBarOptions}
+          statusBarHeight={statusBarSpacing}
+          visible={searchBarVisible}
+          onClose={() => {
+            setSearchBarVisible(false);
+            headerSearchBarOptions?.onClose?.();
+          }}
+          tintColor={headerTintColor}
+          style={[StyleSheet.absoluteFill, { opacity: searchBarOpacity }]}
+        />
+      ) : null}
     </Animated.View>
   );
 }
 
+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: {
+    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',
+    pointerEvents: 'box-none',
   },
   end: {
     flexDirection: 'row',
     alignItems: 'center',
     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',
+  },
 });