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

package/src/Header/HeaderSearchBar.tsx

@@ -1,30 +1,43 @@
 import { useNavigation, useTheme } from '@react-navigation/native';
-import Color from 'color';
 import * as React from 'react';
 import {
   Animated,
+  BackHandler,
+  type ColorValue,
   Image,
+  type NativeEventSubscription,
   Platform,
   type StyleProp,
   StyleSheet,
   TextInput,
-  View,
+  type TextStyle,
   type ViewStyle,
 } from 'react-native';
 
 import clearIcon from '../assets/clear-icon.png';
 import closeIcon from '../assets/close-icon.png';
 import searchIcon from '../assets/search-icon.png';
+import searchIconLegacy from '../assets/search-icon-legacy.png';
+import { Color } from '../Color';
+import {
+  AnimatedLiquidGlassContainerView,
+  isLiquidGlassSupported,
+} from '../LiquidGlassView';
 import { PlatformPressable } from '../PlatformPressable';
 import { Text } from '../Text';
 import type { HeaderSearchBarOptions, HeaderSearchBarRef } from '../types';
-import { HeaderButton } from './HeaderButton';
+import { HeaderBackButton } from './HeaderBackButton';
+import { BUTTON_SIZE, BUTTON_SPACING, HeaderButton } from './HeaderButton';
+import { HeaderButtonBackground } from './HeaderButtonBackground';
 import { HeaderIcon } from './HeaderIcon';
 
 type Props = Omit<HeaderSearchBarOptions, 'ref'> & {
   visible: boolean;
   onClose: () => void;
-  tintColor?: string;
+  tintColor?: ColorValue;
+  pressColor?: ColorValue;
+  pressOpacity?: number;
+  statusBarHeight: number;
   style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
 };
 
@@ -44,11 +57,14 @@ function HeaderSearchBarInternal(
     autoFocus = true,
     autoCapitalize,
     placeholder = 'Search',
-    cancelButtonText = 'Cancel',
     enterKeyHint = 'search',
-    onChangeText,
+    cancelButtonText = 'Cancel',
+    onChange,
     onClose,
     tintColor,
+    pressColor,
+    pressOpacity,
+    statusBarHeight,
     style,
     ...rest
   }: Props,
@@ -57,38 +73,11 @@ function HeaderSearchBarInternal(
   const navigation = useNavigation();
   const { dark, colors, fonts } = useTheme();
   const [value, setValue] = React.useState('');
-  const [rendered, setRendered] = React.useState(visible);
-  const [visibleAnim] = React.useState(
-    () => new Animated.Value(visible ? 1 : 0)
-  );
   const [clearVisibleAnim] = React.useState(() => new Animated.Value(0));
 
-  const visibleValueRef = React.useRef(visible);
   const clearVisibleValueRef = React.useRef(false);
   const inputRef = React.useRef<TextInput>(null);
 
-  React.useEffect(() => {
-    // Avoid act warning in tests just by rendering header
-    if (visible === visibleValueRef.current) {
-      return;
-    }
-
-    Animated.timing(visibleAnim, {
-      toValue: visible ? 1 : 0,
-      duration: 100,
-      useNativeDriver,
-    }).start(({ finished }) => {
-      if (finished) {
-        setRendered(visible);
-        visibleValueRef.current = visible;
-      }
-    });
-
-    return () => {
-      visibleAnim.stopAnimation();
-    };
-  }, [visible, visibleAnim]);
-
   const hasText = value !== '';
 
   React.useEffect(() => {
@@ -117,18 +106,49 @@ function HeaderSearchBarInternal(
     clearText();
     // FIXME: figure out how to create a SyntheticEvent
     // @ts-expect-error: we don't have the native event here
-    onChangeText?.({ nativeEvent: { text: '' } });
-  }, [clearText, onChangeText]);
+    onChange?.({ nativeEvent: { text: '' } });
+  }, [clearText, onChange]);
 
   const cancelSearch = React.useCallback(() => {
-    onClear();
+    // FIXME: figure out how to create a SyntheticEvent
+    // @ts-expect-error: we don't have the native event here
+    onChange?.({ nativeEvent: { text: '' } });
     onClose();
-  }, [onClear, onClose]);
+    setValue('');
+  }, [onChange, onClose]);
 
-  React.useEffect(
-    () => navigation?.addListener('blur', cancelSearch),
-    [cancelSearch, navigation]
-  );
+  React.useEffect(() => {
+    const unsubscribeBlur = navigation?.addListener('blur', cancelSearch);
+
+    const onKeyup = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        cancelSearch();
+      }
+    };
+
+    let backHandlerSubscription: NativeEventSubscription | undefined;
+
+    if (Platform.OS === 'web') {
+      document?.body?.addEventListener?.('keyup', onKeyup);
+    } else {
+      backHandlerSubscription = BackHandler.addEventListener(
+        'hardwareBackPress',
+        () => {
+          cancelSearch();
+          return true;
+        }
+      );
+    }
+
+    return () => {
+      unsubscribeBlur();
+      backHandlerSubscription?.remove();
+
+      if (Platform.OS === 'web') {
+        document?.body?.removeEventListener?.('keyup', onKeyup);
+      }
+    };
+  }, [cancelSearch, navigation]);
 
   React.useImperativeHandle(
     ref,
@@ -149,29 +169,60 @@ function HeaderSearchBarInternal(
     [cancelSearch, clearText]
   );
 
-  if (!visible && !rendered) {
-    return null;
-  }
-
   const textColor = tintColor ?? colors.text;
 
+  // When status bar height is provided, add spacing below it
+  // Otherwise, use a smaller top margin to align with the header content
+  const STATUS_BAR_TOP_ADJUSTMENT = 2;
+  const topMargin = Platform.select({
+    ios: statusBarHeight
+      ? statusBarHeight + BUTTON_SPACING
+      : BUTTON_SPACING - STATUS_BAR_TOP_ADJUSTMENT,
+    default: statusBarHeight,
+  });
+
   return (
-    <Animated.View
-      pointerEvents={visible ? 'auto' : 'none'}
+    <AnimatedLiquidGlassContainerView
+      spacing={BUTTON_SPACING}
       aria-live="polite"
       aria-hidden={!visible}
-      style={[styles.container, { opacity: visibleAnim }, style]}
+      style={[
+        styles.container,
+        Platform.OS === 'ios' && {
+          gap: BUTTON_SPACING,
+          margin: BUTTON_SPACING,
+        },
+        {
+          marginTop: topMargin,
+        },
+        style,
+      ]}
     >
-      <View style={styles.searchbarContainer}>
-        <HeaderIcon
-          source={searchIcon}
-          tintColor={textColor}
-          style={styles.inputSearchIcon}
+      {Platform.OS !== 'ios' ? (
+        <HeaderBackButton
+          accessibilityLabel={cancelButtonText}
+          tintColor={tintColor ?? colors.text}
+          pressColor={pressColor}
+          pressOpacity={pressOpacity}
+          onPress={cancelSearch}
+          style={styles.backButton}
         />
+      ) : null}
+      <HeaderButtonBackground style={styles.searchbarContainer}>
+        {Platform.OS === 'ios' ? (
+          <HeaderIcon
+            source={isLiquidGlassSupported ? searchIcon : searchIconLegacy}
+            tintColor={textColor}
+            style={[
+              styles.inputSearchIconIos,
+              !isLiquidGlassSupported && styles.inputSearchIconIosLegacy,
+            ]}
+          />
+        ) : null}
         <TextInput
           {...rest}
           ref={inputRef}
-          onChange={onChangeText}
+          onChange={onChange}
           onChangeText={setValue}
           autoFocus={autoFocus}
           autoCapitalize={
@@ -180,144 +231,191 @@ function HeaderSearchBarInternal(
           inputMode={INPUT_TYPE_TO_MODE[inputType ?? 'text']}
           enterKeyHint={enterKeyHint}
           placeholder={placeholder}
-          placeholderTextColor={Color(textColor).alpha(0.5).string()}
+          placeholderTextColor={Color(textColor)?.alpha(0.5).string()}
           cursorColor={colors.primary}
           selectionHandleColor={colors.primary}
-          selectionColor={Color(colors.primary).alpha(0.3).string()}
+          selectionColor={Color(colors.primary)?.alpha(0.3).string()}
           style={[
-            fonts.regular,
+            Platform.select({
+              ios: isLiquidGlassSupported ? fonts.medium : fonts.regular,
+              default: fonts.regular,
+            }),
             styles.searchbar,
-            {
-              backgroundColor: Platform.select({
-                ios: dark ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)',
-                default: 'transparent',
-              }),
-              color: textColor,
-              borderBottomColor: Color(textColor).alpha(0.2).string(),
-            },
+            Platform.OS === 'ios' &&
+              !isLiquidGlassSupported && {
+                backgroundColor: dark
+                  ? 'rgba(255, 255, 255, 0.1)'
+                  : 'rgba(0, 0, 0, 0.1)',
+              },
+            { color: textColor },
           ]}
         />
         {Platform.OS === 'ios' ? (
           <PlatformPressable
+            accessibilityLabel="Clear"
             onPress={onClear}
             style={[
               {
                 opacity: clearVisibleAnim,
                 transform: [{ scale: clearVisibleAnim }],
               },
-              styles.clearButton,
+              styles.clearButtonIos,
+              !isLiquidGlassSupported && styles.clearButtonIosLegacy,
             ]}
           >
             <Image
               source={clearIcon}
               resizeMode="contain"
               tintColor={textColor}
-              style={styles.clearIcon}
+              style={styles.clearIconIos}
             />
           </PlatformPressable>
         ) : null}
-      </View>
+      </HeaderButtonBackground>
       {Platform.OS !== 'ios' ? (
         <HeaderButton
-          onPress={() => {
-            if (value) {
-              onClear();
-            } else {
-              onClose();
-            }
-          }}
-          style={styles.closeButton}
+          accessibilityLabel="Clear"
+          onPress={onClear}
+          style={[styles.closeButton, { opacity: clearVisibleAnim }]}
         >
           <HeaderIcon source={closeIcon} tintColor={textColor} />
         </HeaderButton>
       ) : null}
       {Platform.OS === 'ios' ? (
-        <PlatformPressable onPress={cancelSearch} style={styles.cancelButton}>
-          <Text
-            style={[
-              fonts.regular,
-              { color: tintColor ?? colors.primary },
-              styles.cancelText,
-            ]}
+        isLiquidGlassSupported ? (
+          <HeaderButtonBackground style={styles.closeButtonContainerIos}>
+            <HeaderButton
+              accessibilityLabel={cancelButtonText}
+              onPress={cancelSearch}
+            >
+              <HeaderIcon source={closeIcon} tintColor={textColor} />
+            </HeaderButton>
+          </HeaderButtonBackground>
+        ) : (
+          <PlatformPressable
+            accessibilityLabel={cancelButtonText}
+            onPress={cancelSearch}
+            style={styles.cancelButton}
           >
-            {cancelButtonText}
-          </Text>
-        </PlatformPressable>
+            <Text
+              style={[
+                fonts.regular,
+                { color: tintColor ?? colors.primary },
+                styles.cancelText,
+              ]}
+            >
+              {cancelButtonText}
+            </Text>
+          </PlatformPressable>
+        )
       ) : null}
-    </Animated.View>
+    </AnimatedLiquidGlassContainerView>
   );
 }
 
+const SEARCH_ICON_SIZE = 18;
+const CLEAR_ICON_SIZE = 16;
+const CANCEL_FONT_SIZE = 17;
+const SEARCHBAR_FONT_SIZE = Platform.OS === 'ios' ? 17 : 18;
+
+const SEARCHBAR_ICON_SPACING = 5;
+const SEARCHBAR_HEIGHT_IOS = isLiquidGlassSupported ? BUTTON_SIZE : 36;
+
+// The top inset on iOS is a bit less than the status bar height
+const SEARCHBAR_LEGACY_VERTICAL_OFFSET_IOS = -4;
+
 const styles = StyleSheet.create({
   container: {
     flex: 1,
     flexDirection: 'row',
     alignItems: 'stretch',
   },
-  inputSearchIcon: {
+  inputSearchIconIos: {
     position: 'absolute',
     opacity: 0.5,
-    left: Platform.select({ ios: 16, default: 4 }),
-    top: Platform.select({ ios: -1, default: 17 }),
-    ...Platform.select({
-      ios: {
-        height: 18,
-        width: 18,
-      },
-      default: {},
-    }),
+    top: SEARCHBAR_ICON_SPACING,
+    left: SEARCHBAR_ICON_SPACING,
+    height: SEARCH_ICON_SIZE,
+    width: SEARCH_ICON_SIZE,
+  },
+  inputSearchIconIosLegacy: {
+    top: SEARCHBAR_LEGACY_VERTICAL_OFFSET_IOS,
+  },
+  backButton: {
+    alignSelf: 'center',
+    marginLeft: BUTTON_SPACING / 2,
   },
   closeButton: {
     position: 'absolute',
     opacity: 0.5,
-    right: Platform.select({ ios: 0, default: 8 }),
-    top: Platform.select({ ios: -2, default: 17 }),
+    right: BUTTON_SPACING,
+    height: '100%',
+  },
+  closeButtonContainerIos: {
+    alignSelf: 'center',
   },
-  clearButton: {
+  clearButtonIos: {
     position: 'absolute',
     right: 0,
-    top: -7,
+    top: 0,
     bottom: 0,
+    width: SEARCHBAR_HEIGHT_IOS,
     justifyContent: 'center',
-    padding: 8,
+    alignItems: 'center',
   },
-  clearIcon: {
-    height: 16,
-    width: 16,
+  clearButtonIosLegacy: {
+    top: SEARCHBAR_LEGACY_VERTICAL_OFFSET_IOS - SEARCHBAR_ICON_SPACING,
+  },
+  clearIconIos: {
+    height: CLEAR_ICON_SIZE,
+    width: CLEAR_ICON_SIZE,
     opacity: 0.5,
   },
   cancelButton: {
     alignSelf: 'center',
-    top: -4,
   },
   cancelText: {
-    fontSize: 17,
-    marginHorizontal: 12,
+    fontSize: CANCEL_FONT_SIZE,
+    marginRight: BUTTON_SPACING / 2,
   },
   searchbarContainer: {
     flex: 1,
+    flexDirection: 'row',
+    alignItems: 'stretch',
+    ...Platform.select<ViewStyle>({
+      ios: isLiquidGlassSupported
+        ? {}
+        : {
+            minHeight: SEARCHBAR_HEIGHT_IOS,
+          },
+      default: {
+        borderRadius: 0,
+      },
+    }),
+  },
+  searchbar: {
+    flex: 1,
+    backgroundColor: 'transparent',
+    fontSize: SEARCHBAR_FONT_SIZE,
+    ...Platform.select<TextStyle>({
+      ios: {
+        paddingHorizontal:
+          BUTTON_SPACING + SEARCH_ICON_SIZE + SEARCHBAR_ICON_SPACING * 2,
+        ...(!isLiquidGlassSupported
+          ? {
+              marginTop: SEARCHBAR_LEGACY_VERTICAL_OFFSET_IOS,
+              marginBottom: SEARCHBAR_ICON_SPACING,
+              borderRadius: BUTTON_SPACING,
+              borderCurve: 'continuous',
+            }
+          : null),
+      },
+      default: {
+        paddingLeft: BUTTON_SPACING,
+        paddingRight: BUTTON_SIZE + BUTTON_SPACING,
+      },
+    }),
   },
-  searchbar: Platform.select({
-    ios: {
-      flex: 1,
-      fontSize: 17,
-      paddingHorizontal: 32,
-      marginLeft: 16,
-      marginTop: -1,
-      marginBottom: 4,
-      borderRadius: 8,
-      borderCurve: 'continuous',
-    },
-    default: {
-      flex: 1,
-      fontSize: 18,
-      paddingHorizontal: 36,
-      marginRight: 8,
-      marginTop: 8,
-      marginBottom: 8,
-      borderBottomWidth: 1,
-    },
-  }),
 });
 
 export const HeaderSearchBar = React.forwardRef(HeaderSearchBarInternal);

package/src/Header/HeaderTitle.tsx

@@ -1,6 +1,7 @@
 import { useTheme } from '@react-navigation/native';
 import {
   Animated,
+  type ColorValue,
   Platform,
   type StyleProp,
   StyleSheet,
@@ -9,7 +10,7 @@ import {
 } from 'react-native';
 
 type Props = Omit<TextProps, 'style'> & {
-  tintColor?: string;
+  tintColor?: ColorValue;
   children?: string;
   style?: Animated.WithAnimatedValue<StyleProp<TextStyle>>;
 };

package/src/Header/getDefaultHeaderHeight.tsx

@@ -1,35 +1,46 @@
 import { PixelRatio, Platform } from 'react-native';
 
-import type { Layout } from '../types';
+import { isLiquidGlassSupported } from '../LiquidGlassView';
 
-export function getDefaultHeaderHeight(
-  layout: Layout,
-  modalPresentation: boolean,
-  topInset: number
-): number {
+export function getDefaultHeaderHeight({
+  landscape,
+  modalPresentation,
+  topInset,
+}: {
+  landscape: boolean;
+  modalPresentation: boolean;
+  topInset: number;
+}): number {
   let headerHeight;
 
   // On models with Dynamic Island the status bar height is smaller than the safe area top inset.
   const hasDynamicIsland = Platform.OS === 'ios' && topInset > 50;
-  const statusBarHeight = hasDynamicIsland
-    ? topInset - (5 + 1 / PixelRatio.get())
-    : topInset;
-
-  const isLandscape = layout.width > layout.height;
+  const statusBarHeight = Math.max(
+    topInset - (hasDynamicIsland ? 5 + 1 / PixelRatio.get() : 0),
+    0
+  );
 
   if (Platform.OS === 'ios') {
-    if (Platform.isPad || Platform.isTV) {
-      if (modalPresentation) {
-        headerHeight = 56;
+    if (isLiquidGlassSupported) {
+      if (modalPresentation && !Platform.isPad && !Platform.isTV) {
+        headerHeight = 70;
       } else {
-        headerHeight = 50;
+        if (hasDynamicIsland) {
+          headerHeight = 60;
+        } else {
+          headerHeight = 64;
+        }
       }
     } else {
-      if (isLandscape) {
-        headerHeight = 32;
-      } else {
+      if (Platform.isPad || Platform.isTV) {
         if (modalPresentation) {
           headerHeight = 56;
+        } else {
+          headerHeight = 50;
+        }
+      } else {
+        if (modalPresentation && !landscape) {
+          headerHeight = 56;
         } else {
           headerHeight = 44;
         }

package/src/Label/Label.tsx

@@ -1,4 +1,5 @@
 import {
+  type ColorValue,
   type StyleProp,
   StyleSheet,
   type TextProps,
@@ -8,7 +9,7 @@ import {
 import { Text } from '../Text';
 
 type Props = Omit<TextProps, 'style'> & {
-  tintColor?: string;
+  tintColor?: ColorValue;
   children?: string;
   style?: StyleProp<TextStyle>;
 };

package/src/LiquidGlassView.ios.tsx

@@ -0,0 +1,39 @@
+import { Animated, View } from 'react-native';
+
+type CallstackLiquidGlass = typeof import('@callstack/liquid-glass');
+
+let isLiquidGlassSupported: boolean,
+  LiquidGlassView: CallstackLiquidGlass['LiquidGlassView'],
+  LiquidGlassContainerView: CallstackLiquidGlass['LiquidGlassContainerView'],
+  AnimatedLiquidGlassView: Animated.AnimatedComponent<typeof LiquidGlassView>,
+  AnimatedLiquidGlassContainerView: Animated.AnimatedComponent<
+    typeof LiquidGlassContainerView
+  >;
+
+try {
+  // Add try/catch to support usage even if it's not installed, since it's optional.
+  isLiquidGlassSupported =
+    require('@callstack/liquid-glass').isLiquidGlassSupported;
+  LiquidGlassView = require('@callstack/liquid-glass').LiquidGlassView;
+  LiquidGlassContainerView =
+    require('@callstack/liquid-glass').LiquidGlassContainerView;
+  AnimatedLiquidGlassView = Animated.createAnimatedComponent(LiquidGlassView);
+  AnimatedLiquidGlassContainerView = Animated.createAnimatedComponent(
+    LiquidGlassContainerView
+  );
+} catch (e) {
+  isLiquidGlassSupported = false;
+  LiquidGlassView = View;
+  // @ts-expect-error: this is fine
+  AnimatedLiquidGlassView = Animated.View;
+  // @ts-expect-error: this is fine
+  AnimatedLiquidGlassContainerView = Animated.View;
+}
+
+export {
+  AnimatedLiquidGlassContainerView,
+  AnimatedLiquidGlassView,
+  isLiquidGlassSupported,
+  LiquidGlassContainerView,
+  LiquidGlassView,
+};

package/src/LiquidGlassView.tsx

@@ -0,0 +1,20 @@
+import { Animated, View } from 'react-native';
+
+type CallstackLiquidGlass = typeof import('@callstack/liquid-glass');
+
+export const LiquidGlassView: CallstackLiquidGlass['LiquidGlassView'] = View;
+
+export const LiquidGlassContainerView: CallstackLiquidGlass['LiquidGlassContainerView'] =
+  View;
+
+// @ts-expect-error: this is fine
+export const AnimatedLiquidGlassView: Animated.AnimatedComponent<
+  typeof LiquidGlassView
+> = Animated.View;
+
+// @ts-expect-error: this is fine
+export const AnimatedLiquidGlassContainerView: Animated.AnimatedComponent<
+  typeof LiquidGlassContainerView
+> = Animated.View;
+
+export const isLiquidGlassSupported = false;

package/src/MissingIcon.tsx

@@ -1,15 +1,24 @@
-import { type StyleProp, StyleSheet, type TextStyle } from 'react-native';
+import {
+  type ColorValue,
+  type StyleProp,
+  StyleSheet,
+  type TextStyle,
+} from 'react-native';
 
 import { Text } from './Text';
 
 type Props = {
-  color?: string;
+  color?: ColorValue;
   size?: number;
   style?: StyleProp<TextStyle>;
 };
 
 export function MissingIcon({ color, size, style }: Props) {
-  return <Text style={[styles.icon, { color, fontSize: size }, style]}>⏷</Text>;
+  return (
+    <Text aria-hidden style={[styles.icon, { color, fontSize: size }, style]}>
+      ⏷
+    </Text>
+  );
 }
 
 const styles = StyleSheet.create({

package/src/PlatformColor.native.tsx

@@ -0,0 +1 @@
+export { PlatformColor } from 'react-native';